我是WEBRTC的新手。我有两个html页面，分别应该捕获和显示webcamera。我的期望是“webcamerasrc.html”页面应该捕获webcamera并通过“WEBCAMERAVew.html”页面，可以查看相机。第一页是捕捉视频，但第二页没有显示。我认为webrtc握手没有完成。任何关于使事情有效或理解webrtc握手或两个不同页面之间的sdp交换的建议将不胜感激。
以下是摘录。
webcamerasrc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>WEB CAMERA SOURCE</title>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://webrtcexperiment-webrtc.netdna-ssl.com/RTCPeerConnection-v1.5.js"> </script>
</head>
<body>
<h1>WEB CAMERA SOURCE</h1>
<div id="container">
<video autoplay="true" id="localVideo">
</video>
<video autoplay="true" id="rVideo">
</video>
</div>
<script>
var socket = new WebSocket('ws://localhost:8080/IntegrateIntoWebTest/websocket');
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
var isChrome = !!navigator.webkitGetUserMedia;
var STUN = {url: isChrome ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121' };
var TURN = {url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo'};
var iceServers = {iceServers: [STUN, TURN] };
var DtlsSrtpKeyAgreement = {DtlsSrtpKeyAgreement: true};
var optional = {optional: [DtlsSrtpKeyAgreement]};
var video = document.getElementById('localVideo');
var offerer = new RTCPeerConnection(iceServers);
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, VideoSuccess, VideoError);
}
function VideoSuccess(stream) {
video.src = window.URL.createObjectURL(stream);
offerer.addStream(stream);
offerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
var o_icecandidate = event.candidate;
socket.send(JSON.stringify({o_icecandidate}));
socket.onmessage = function(event) {
var iceData = JSON.parse(event.data);
console.log(iceData);
offerer.addIceCandidate(iceData);
};
};
offerer.onaddstream = function (stream) {
//alert(stream.stream);
video.src = window.URL.createObjectURL(stream.stream);
};
}
offerer.createOffer(function (offerSdp) {
offerer.setLocalDescription(offerSdp);
socket.send(JSON.stringify({offerSdp}));
}, function(e) {console.log(e);}, mediaConstraints);
socket.onmessage = function(event)
{
//alert(JSON.parse(event.data.answerSdp));
// alert(answerSdp);
//if(answerSdp='answer'){var remoteDescription = new RTCSessionDescription(answerSdp);offerer.setRemoteDescription(remoteDescription);}
var actualData = JSON.parse(event.data);
console.log(actualData);
if(actualData.answerSdp.type='answer')
{
console.log(event.data);
var sd = JSON.parse(event.data);
console.log(sd.answerSdp);
var sd1 = new RTCSessionDescription(sd.answerSdp);
console.log(sd1);
offerer.setRemoteDescription(sd1);
}
}
function VideoError(e) {
console.log(e);
}
</script>
</body>
</html>
WEBCAMERAVew.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>REMOTE WEB CAMERA VIEW</title>
</head>
<body>
<h1>REMOTE WEB CAMERA VIEW</h1>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="//cdn.webrtc-experiment.com/RTCPeerConnection-v1.5.js"> </script>
<div id="container">
<video autoplay="true" id="localVideo">
</video>
<video autoplay="true" id="rVideo">
</video>
</div>
<script>
var myDataRef = new WebSocket('ws://localhost:8080/wsTest/websocket');
myDataRef.onmessage = function(event) {
var actualData = JSON.parse(event.data);
if(actualData.offerSdp.type='offer')
{ answererPeer(event);}
};
var mediaConstraints = {
optional: [],
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
window.RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
window.RTCSessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
window.RTCIceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
var isChrome = !!navigator.webkitGetUserMedia;
var STUN = {url: isChrome ? 'stun:stun.l.google.com:19302' : 'stun:23.21.150.121' };
var TURN = {url: 'turn:homeo@turn.bistri.com:80', credential: 'homeo'};
var iceServers = {iceServers: [STUN, TURN] };
var DtlsSrtpKeyAgreement = {DtlsSrtpKeyAgreement: true};
var optional = {optional: [DtlsSrtpKeyAgreement]};
var answerer = new RTCPeerConnection(iceServers);
var video = document.getElementById('localVideo');
var remoteVideo = document.getElementById('rVideo');
function answererPeer(event) {
//window.alert(offer.sdp);
//window.alert(video_stream);
var sd = JSON.parse(event.data);
var rd = new RTCSessionDescription(sd.offerSdp);
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, VideoSuccess, VideoError);
}
function VideoSuccess(mediaStream)
{
//answerer.addIceCandidate(icecandicate.candidate);
answerer.addStream(mediaStream);
answerer.setRemoteDescription(rd);
answerer.createAnswer(function (answerSdp) {
answerer.setLocalDescription(answerSdp);
myDataRef.send(JSON.stringify({answerSdp}));
}, function() {}, mediaConstraints);
answerer.onicecandidate = function (event) {
if (!event || !event.candidate) return;
var a_icecandidate = event.candidate;
myDataRef.send(JSON.stringify({a_icecandidate}));
myDataRef.onmessage = function(event) {
var iceData = JSON.parse(event.data);
console.log('over here : '+iceData);
};
};
answerer.onaddstream = function (mediaStream) {
alert(mediaStream);
remoteVideo.src = URL.createObjectURL(mediaStream);
remoteVideo.play();
};
}
function VideoError(e) {
console.log(e);
}
}
</script>
</body>
</html>