| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>RTCPeerState & RTCIceConnectionState Demo 1</title> |
| <!-- Load the polyfill to switch-hit between Chrome and Firefox --> |
| <script src="../../base/adapter.js"></script> |
| <style> |
| video { |
| border:5px solid black; |
| width:480px; |
| height:360px; |
| } |
| button { |
| font: 18px sans-serif; |
| padding: 8px; |
| } |
| label{ |
| font: bold 15px/30px Georgia,serif; |
| display:inline-table; |
| width:200px; |
| text-align:left; |
| } |
| input{ |
| font:italic bold 15px/30px Georgia,serif; |
| text-align:center; |
| } |
| fieldset{ |
| border:none; |
| margin:0px auto; |
| } |
| </style> |
| </head> |
| <body> |
| <video id="vid1" autoplay></video> |
| <video id="vid2" autoplay></video> |
| <br> |
| <button id="btn1" onclick="start()">Start</button> |
| <button id="btn2" onclick="call()">Call</button> |
| <button id="btn3" onclick="hangup()">Hang Up</button> |
| <br> |
| <br> |
| <fieldset> |
| <label>pc1-state:</label> |
| <input type="text" id="pc1-state" size="50" disabled="true"> |
| <br> |
| <label>pc1-ice-connection-state:</label> |
| <input type="text" id="pc1-ice-connection-state" size="50" disabled="true"> |
| <br> |
| <label>pc2-state:</label> |
| <input type="text" id="pc2-state" size="50" disabled="true"> |
| <br> |
| <label>pc2-ice-connection-state:</label> |
| <input type="text" id="pc2-ice-connection-state" size="50" disabled="true"> |
| </fieldset> |
| <script> |
| btn1.disabled = false; |
| btn2.disabled = true; |
| btn3.disabled = true; |
| var pc1,pc2; |
| var localstream; |
| var sdpConstraints = {'mandatory': { |
| 'OfferToReceiveAudio':true, |
| 'OfferToReceiveVideo':true }}; |
| |
| function gotStream(stream){ |
| trace("Received local stream"); |
| // Call the polyfill wrapper to attach the media stream to this element. |
| attachMediaStream(vid1, stream); |
| localstream = stream; |
| btn2.disabled = false; |
| } |
| |
| function start() { |
| trace("Requesting local stream"); |
| btn1.disabled = true; |
| // Call into getUserMedia via the polyfill (adapter.js). |
| getUserMedia({audio:true, video:true}, |
| gotStream, function() {}); |
| } |
| |
| function call() { |
| btn2.disabled = true; |
| btn3.disabled = false; |
| trace("Starting call"); |
| videoTracks = localstream.getVideoTracks(); |
| audioTracks = localstream.getAudioTracks(); |
| if (videoTracks.length > 0) |
| trace('Using Video device: ' + videoTracks[0].label); |
| if (audioTracks.length > 0) |
| trace('Using Audio device: ' + audioTracks[0].label); |
| var servers = null; |
| var pc_constraints = {"optional": []}; |
| |
| pc1 = new RTCPeerConnection(servers,pc_constraints); |
| trace("Created local peer connection object pc1"); |
| document.getElementById("pc1-state").value = pc1.signalingState || |
| pc1.readyState; |
| if (typeof pc1.onsignalingstatechange !== 'undefined') { |
| pc1.onsignalingstatechange = stateCallback1; |
| } else { |
| pc1.onstatechange = stateCallback1; |
| } |
| document.getElementById("pc1-ice-connection-state").value = |
| pc1.iceConnectionState; |
| if (typeof pc1.oniceconnectionstatechange !== 'undefined') { |
| pc1.oniceconnectionstatechange = iceStateCallback1; |
| } else { |
| pc1.onicechange = iceStateCallback1; |
| } |
| pc1.onicecandidate = iceCallback1; |
| |
| pc2 = new RTCPeerConnection(servers,pc_constraints); |
| trace("Created remote peer connection object pc2"); |
| document.getElementById("pc2-state").value = pc2.signalingState || |
| pc2.readyState; |
| if (typeof pc2.onsignalingstatechange !== 'undefined') { |
| pc2.onsignalingstatechange = stateCallback2; |
| } else { |
| pc2.onstatechange = stateCallback2; |
| } |
| document.getElementById("pc2-ice-connection-state").value = |
| pc2.iceConnectionState; |
| if (typeof pc2.oniceconnectionstatechange !== 'undefined') { |
| pc2.oniceconnectionstatechange = iceStateCallback2; |
| } else { |
| pc2.onicechange = iceStateCallback2; |
| } |
| pc2.onicecandidate = iceCallback2; |
| pc2.onaddstream = gotRemoteStream; |
| pc1.addStream(localstream); |
| trace("Adding Local Stream to peer connection"); |
| pc1.createOffer(gotDescription1); |
| } |
| |
| function gotDescription1(desc){ |
| pc1.setLocalDescription(desc); |
| trace("Offer from pc1 \n" + desc.sdp); |
| pc2.setRemoteDescription(desc); |
| pc2.createAnswer(gotDescription2, null, sdpConstraints); |
| } |
| |
| function gotDescription2(desc){ |
| pc2.setLocalDescription(desc); |
| trace("Answer from pc2 \n" + desc.sdp); |
| pc1.setRemoteDescription(desc); |
| } |
| |
| function hangup() { |
| trace("Ending call"); |
| pc1.close(); |
| pc2.close(); |
| document.getElementById("pc1-state").value += "->" + |
| pc1.signalingState || |
| pc1.readyState; |
| document.getElementById("pc2-state").value += "->" + |
| pc2.signalingState || |
| pc2.readyState; |
| document.getElementById("pc1-ice-connection-state").value += "->" + |
| pc1.iceConnectionState; |
| document.getElementById("pc2-ice-connection-state").value += "->" + |
| pc2.iceConnectionState; |
| pc1 = null; |
| pc2 = null; |
| btn3.disabled = true; |
| btn2.disabled = false; |
| } |
| |
| function gotRemoteStream(e){ |
| attachMediaStream(vid2, e.stream); |
| trace("Received remote stream"); |
| } |
| |
| function stateCallback1() { |
| var state; |
| if (pc1) { |
| state = pc1.signalingState || pc1.readyState; |
| trace("pc1 state change callback, state:" + state); |
| document.getElementById("pc1-state").value += "->" + state; |
| } |
| } |
| |
| function stateCallback2() { |
| var state; |
| if (pc2) { |
| state = pc2.signalingState || pc2.readyState; |
| trace("pc2 state change callback, state:" + state); |
| document.getElementById("pc2-state").value += "->" + state; |
| } |
| } |
| |
| function iceStateCallback1() { |
| var iceState; |
| if (pc1) { |
| iceState = pc1.iceConnectionState; |
| trace("pc1 ICE connection state change callback, state:" + iceState); |
| document.getElementById("pc1-ice-connection-state").value += "->" + |
| iceState; |
| } |
| } |
| |
| function iceStateCallback2() { |
| var iceState; |
| if (pc2) { |
| iceState = pc2.iceConnectionState; |
| trace("pc2 ICE connection state change callback, state:" + iceState); |
| document.getElementById("pc2-ice-connection-state").value += "->" + |
| iceState; |
| } |
| } |
| |
| function iceCallback1(event){ |
| if (event.candidate) { |
| pc2.addIceCandidate(new RTCIceCandidate(event.candidate)); |
| trace("Local ICE candidate: \n" + event.candidate.candidate); |
| } else { |
| trace("end of candidates1"); |
| } |
| } |
| |
| function iceCallback2(event){ |
| if (event.candidate) { |
| pc1.addIceCandidate(new RTCIceCandidate(event.candidate)); |
| trace("Remote ICE candidate: \n " + event.candidate.candidate); |
| } else { |
| trace("end of candidates2"); |
| } |
| } |
| </script> |
| </body> |
| </html> |
| |