99 lines
2.1 KiB
HTML
99 lines
2.1 KiB
HTML
|
<!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>
|