我是webRTC发现文档问题的新手。我无法弄清楚为什么joiner不接收来自发起者的流,因为控制台上的消息对我很正常。此外,我收到有关弃用方法的警告但不确定要纠正的方法。
html:
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.mediaDevices.getUserMedia ||
navigator.msGetUserMedia;
var isInitiator = false
, isChannelReady = false
, isStarted = false;
//Send 'create' or 'join' message to singnalling server
console.log('Create or join room', room);
socket.emit('create or join', room);
//Handle 'created' message coming back from server:
//this peer is the initiator
socket.on('created', function (room){
console.log('Created room ' + room);
isInitiator = true;
var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");
});
//Handle 'join' message coming back from server:
//another peer is joining the channel
socket.on('join', function (room){
console.log('Another peer made a request to join room ' + room);
console.log('This peer is the initiator of room ' + room + '!');
isChannelReady = true;
var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");
});
//Handle 'joined' message coming back from server:
//this is the second peer joining the channel
socket.on('joined', function (room){
console.log('This peer has joined room ' + room);
isChannelReady = true;
var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");
navigator.getUserMedia({ video: true, audio: true },
function (stream) {
$('#sidebar').children().last().attr('src', window.URL.createObjectURL(stream))
if(!isStarted && typeof stream!= 'undefined' && isChannelReady) {
createPeerConnectionInit(stream);
isStarted = true;
} else{
}
}, function (error) {
console.log('error'+error);
});
});
socket.on('message', function (message){
if (message === 'got user media') {
}
else if (message.type === 'offer') {
if(isChannelReady){
console.log('Im the initiator. Channel is ready!!!');
createPeerConnectionNotInit(message);
isStarted = true;
}
}
else if (message.type === 'answer' && isStarted) {
peer.addAnswerSDP(message);
console.log('addAnswerSDP:', message);
}
else if (message.type === 'candidate' && isStarted) {
console.log("im adding candidate!!!");
var candidate = new RTCIceCandidate({sdpMLineIndex:message.label,
candidate:message.candidate});
peer.addICE(candidate);// εδω ο initiator προσθέτει στο ice τον candidate
}
else if (message === 'bye' && isStarted) {
}
});
function createPeerConnectionInit(stream){
peer = RTCPeerConnection({
attachStream : stream,
onICE : function (candidate) {
if (candidate) {
sendMessage({
type: 'candidate',
label: candidate.sdpMLineIndex,
id: candidate.sdpMid,
candidate: candidate.candidate});
} else {
console.log('End of candidates.');
}
},
onRemoteStream : function (stream) {
console.log('onRemoteStream Init = yes');
document.getElementById('video').src = stream;
},
onOfferSDP : function(sdp) {
console.log('sdp ='+JSON.stringify(sdp));
sendMessage(sdp);
}
});
}
function createPeerConnectionNotInit(offer_sdp){
peer = RTCPeerConnection({
onICE : function (candidate) {
if (candidate) {
sendMessage({
type: 'candidate',
label: candidate.sdpMLineIndex,
id: candidate.sdpMid,
candidate: candidate.candidate});
} else {
console.log('End of candidates.');
}
},
onRemoteStream : function (stream) {
console.log('onRemoteStream Not Init = yes');
document.getElementById('video').src = URL.createObjectURL(stream);;
},
// see below two additions ↓
offerSDP : offer_sdp,
onAnswerSDP : function(sdp) {
sendMessage(sdp);
}
});
}
来自发起人视图的控制台日志:
sdp ={"type":"offer","sdp":"v=0\r\no=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=fingerprint:sha-256
Sending message: Object { type: "candidate", label: 0, id: "sdparta_0", candidate: "candidate:0 1 UDP 2122187007 2a02:5…" } boardWithD3.js.html:798:13
Many same messages following..
addAnswerSDP: Object { type: "answer", sdp: "v=0 o=mozilla...THIS_IS_SDPARTA-53.…" } boardWithD3.js.html:727:17
adding-ice candidate:0 1 UDP 2122187007 2a02:582:1096:a500:f03d:34da:c0a:75b0 50729 typ host RTCPeerConnection-v1.5.js:264:13
A couple similar messages following…..
来自加入者视图的控制台日志:
offer_sdp:{"type":"offer","sdp":"v=0\r\no=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=fingerprint:sha-256 ………
ice-servers [{"url": "stun:23.21.150.121" },
{"url": "stun:stun.services.mozilla.com" }]
sdp-constraints {
"OfferToReceiveAudio": true,
"OfferToReceiveVideo": true
} RTCPeerConnection-v1.5.js:123:5
offer-sdp v=0 o=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0
……
WebRTC interfaces with the “moz” prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated. RTCPeerConnection-v1.5.js:79:15
RTCIceServer.url is deprecated! Use urls instead. RTCPeerConnection-v1.5.js:79
onaddstream is deprecated! Use peerConnection.ontrack instead. RTCPeerConnection-v1.5.js:101
onRemoteStream Not Init = yes boardWithD3.js.html:784:21
Sending message: Object { type: "answer", sdp: "v=0 o=mozilla...THIS_IS_SDPARTA-53.…" } boardWithD3.js.html:798:13……
adding-ice candidate:0 1 UDP 2122187007 2a02:582:1096:a500:f03d:34da:c0a:75b0 50006 typ host RTCPeerConnection-v1.5.js:264:13
**Uncaught TypeError: Cannot set property 'src' of null
at Object.onRemoteStream (boardWithD3.js.html?andora:785)
at RTCPeerConnection.peer.onaddstream (RTCPeerConnection-v1.5.js:110)
**
adding-ice candidate:3 1 UDP 2122252543 2a02:582:1096:a500:7de6:9361:ecf4:476a 50007 typ host RTCPeerConnection-v1.5.js:264:13
followed by many similar messages…..
Sending message: Object { type: "candidate", label: 0, id: "sdparta_0", candidate: "candidate:0 1 UDP 2122187007 2a02:5…" } boardWithD3.js.html:798:13
followed by many similar messages…..
提前致谢
答案 0 :(得分:2)
按照以下日志
Uncaught TypeError: Cannot set property 'src' of null
at Object.onRemoteStream (boardWithD3.js.html?andora:785)
at RTCPeerConnection.peer.onaddstream (RTCPeerConnection-v1.5.js:110)
问题出现在下面的视频元素方法中。
onRemoteStream : function (stream) {
console.log('onRemoteStream stream', stream);
//document.getElementById('video').src = stream; // Issue could be here, add a video element with id="video" in html body.
document.getElementById('video').srcObject = stream; //As per latest API use srcObject instead of src
}
正如@jib所提到的,你使用旧的API。