| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>PeerConnection Demo 1</title> |
| <!-- Load the polyfill to switch-hit between Chrome and Firefox --> |
| <script src="../../base/adapter.js"></script> |
| <script src="../js/videopipe.js"></script> |
| <style> |
| video { |
| border:5px solid black; |
| width:480px; |
| height:360px; |
| } |
| button { |
| font: 18px sans-serif; |
| padding: 8px; |
| } |
| textarea { |
| font-family: monospace; |
| margin: 2px; |
| width:480px; |
| height:640px; |
| } |
| </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="addrelay()">Insert relay</button> |
| <button id="btn4" onclick="hangup()">Hang Up</button> |
| <br> |
| <xtextarea id="ta1"></textarea> |
| <script> |
| btn1.disabled = false; |
| btn2.disabled = true; |
| btn3.disabled = true; |
| btn4.disabled = true; |
| var pipes = new Array(); |
| |
| var localstream; |
| var remotestream; |
| |
| function gotStream(stream){ |
| trace("Received local stream"); |
| attachMediaStream(vid1, stream); |
| localstream = stream; |
| btn2.disabled = false; |
| } |
| |
| function gotRemoteStream(stream){ |
| remotestream = stream; |
| attachMediaStream(vid2, stream); |
| trace("Received remote stream"); |
| trace(pipes.length + ' elements in chain'); |
| ta1.textContent = pipes.length + ' elements in chain'; |
| btn3.disabled = false; |
| } |
| |
| function start() { |
| trace("Requesting local stream"); |
| btn1.disabled = true; |
| getUserMedia({audio:false, video:true}, |
| gotStream, |
| function() { |
| alert('getUserMedia failed'); |
| }); |
| } |
| |
| function call() { |
| btn2.disabled = true; |
| btn3.disabled = false; |
| btn4.disabled = false; |
| trace("Starting call"); |
| pipes.push(new VideoPipe(localstream, gotRemoteStream)); |
| } |
| |
| function addrelay() { |
| pipes.push(new VideoPipe(remotestream, gotRemoteStream)); |
| btn3.disabled = true; |
| } |
| |
| function hangup() { |
| trace("Ending call"); |
| while (pipes.length > 0) { |
| var pipe = pipes.pop() |
| pipe.close(); |
| } |
| btn3.disabled = true; |
| btn4.disabled = true; |
| btn2.disabled = false; |
| } |
| |
| </script> |
| </body> |
| </html> |
