118 строки
3.0 KiB
HTML
118 строки
3.0 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Simple PeerConnection Video Test</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Simple PeerConnection Video Test</h1>
|
||
|
|
|
||
|
|
<div><video id="pc1video" width="640" height="480" controls></video></div><br/>
|
||
|
|
<div><video id="pc2video" width="640" height="480" controls></video></div><br/>
|
||
|
|
|
||
|
|
<div><button id="tehbutton" onClick="start();">Start!</button></div><br/>
|
||
|
|
<div id="log"></div>
|
||
|
|
|
||
|
|
<div><video id="localvideo" width="640" height="480" controls></video></div><br/>
|
||
|
|
|
||
|
|
<script type="application/javascript;version=1.8">
|
||
|
|
function log(msg) {
|
||
|
|
let div = document.getElementById("log");
|
||
|
|
div.innerHTML = div.innerHTML + "<p>" + msg + "</p>";
|
||
|
|
}
|
||
|
|
|
||
|
|
let pc1video = document.getElementById("pc1video");
|
||
|
|
let pc2video = document.getElementById("pc2video");
|
||
|
|
|
||
|
|
let button = document.getElementById("tehbutton");
|
||
|
|
let localvideo = document.getElementById("localvideo");
|
||
|
|
|
||
|
|
let pc1;
|
||
|
|
let pc2;
|
||
|
|
|
||
|
|
let pc1_offer;
|
||
|
|
let pc2_answer;
|
||
|
|
|
||
|
|
function failed(code) {
|
||
|
|
log("Failure callback: " + code);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pc1.createOffer finished, call pc1.setLocal
|
||
|
|
function step1(offer) {
|
||
|
|
pc1_offer = offer;
|
||
|
|
pc1.setLocalDescription(offer, step2, failed);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pc1.setLocal finished, call pc2.setRemote
|
||
|
|
function step2() {
|
||
|
|
pc2.setRemoteDescription(pc1_offer, step3, failed);
|
||
|
|
};
|
||
|
|
|
||
|
|
// pc2.setRemote finished, call pc2.createAnswer
|
||
|
|
function step3() {
|
||
|
|
pc2.createAnswer(step4, failed);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pc2.createAnswer finished, call pc2.setLocal
|
||
|
|
function step4(answer) {
|
||
|
|
pc2_answer = answer;
|
||
|
|
pc2.setLocalDescription(answer, step5, failed);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pc2.setLocal finished, call pc1.setRemote
|
||
|
|
function step5() {
|
||
|
|
pc1.setRemoteDescription(pc2_answer, step6, failed);
|
||
|
|
}
|
||
|
|
|
||
|
|
// pc1.setRemote finished, media should be running!
|
||
|
|
function step6() {
|
||
|
|
log("HIP HIP HOORAY");
|
||
|
|
}
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
button.innerHTML = "Stop!";
|
||
|
|
button.onclick = stop;
|
||
|
|
|
||
|
|
pc1 = new mozRTCPeerConnection();
|
||
|
|
pc2 = new mozRTCPeerConnection();
|
||
|
|
|
||
|
|
pc1.onaddstream = function(obj) {
|
||
|
|
log("pc1 got remote stream from pc2 " + obj.type);
|
||
|
|
pc2video.mozSrcObject = obj.stream;
|
||
|
|
pc2video.play();
|
||
|
|
}
|
||
|
|
pc2.onaddstream = function(obj) {
|
||
|
|
log("pc2 got remote stream from pc1 " + obj.type);
|
||
|
|
pc1video.mozSrcObject = obj.stream;
|
||
|
|
pc1video.play();
|
||
|
|
}
|
||
|
|
|
||
|
|
navigator.mozGetUserMedia({video:true}, function(video1) {
|
||
|
|
// Add stream obtained from gUM to <video> to start media flow.
|
||
|
|
localvideo.mozSrcObject = video1;
|
||
|
|
localvideo.play();
|
||
|
|
pc1.addStream(video1);
|
||
|
|
|
||
|
|
navigator.mozGetUserMedia({audio:true, fake:true}, function(audio1) {
|
||
|
|
pc1.addStream(audio1);
|
||
|
|
pc2.addStream(audio1);
|
||
|
|
|
||
|
|
navigator.mozGetUserMedia({video:true, fake:true}, function(video2) {
|
||
|
|
pc2.addStream(video2);
|
||
|
|
// Start the signaling.
|
||
|
|
pc1.createOffer(step1, failed);
|
||
|
|
}, failed);
|
||
|
|
}, failed);
|
||
|
|
}, failed);
|
||
|
|
}
|
||
|
|
|
||
|
|
function stop() {
|
||
|
|
pc1.close();
|
||
|
|
pc2.close();
|
||
|
|
|
||
|
|
button.innerHTML = "Start!";
|
||
|
|
button.onclick = start;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|