【发布时间】：2013-09-25 14:59:27
【问题描述】：
在开发 WebRTC 视频聊天应用程序时，我遇到了接收远程视频流的情况。接收到视频流 blob，但视频只是黑色。
我已经阅读了这些答案，并尝试了几乎所有我可以让它工作的方法https://stackoverflow.com/a/17424224/923109 Remote VideoStream not working with WebRTC
......
Globalvars.socket.on('call', function (signal) {
if(!Globalvars.pc){
Methods.startCall(false, signal);
}
if(signal.sdp){
temp = new RTCSessionDescription({"sdp" : decodeURIComponent(signal.sdp), "type" : signal.type});
Globalvars.pc.setRemoteDescription(temp);
for(i = 0; i < Globalvars.iceCandidateArray.length; i++){
Globalvars.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex),
candidate: decodeURIComponent(signal.candidate)
}));
}
Globalvars.iceCandidateArray = [];
}
else{
if(Globalvars.pc.remoteDescription){
Globalvars.pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex),
candidate: decodeURIComponent(signal.candidate)
}));
console.log("remot");
}
else{
Globalvars.iceCandidateArray.push(new RTCIceCandidate({
sdpMLineIndex: decodeURIComponent(signal.sdpMLineIndex),
candidate: decodeURIComponent(signal.candidate)
}));
console.log("ice candidate to temp array");
}
}
});
$("#roster-wrap").on("click", ".roster-list-item", function(e){
//Globalvars.socket.emit('call', {"receiver_id" : $(this).attr("data-id"), "caller_id" : Globalvars.me.id});
params = {"receiver_id" : $(this).attr("data-id"), "caller_id" : Globalvars.me.id};
Methods.startCall(true, params);
e.preventDefault();
});
.....
.....
// run start(true) to initiate a call
"startCall" : function (isCaller, params) {
var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};
Globalvars.pc = new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
Globalvars.pc.onicecandidate = function (evt) {
//alert("ice candidate");
if (!Globalvars.pc || !evt || !evt.candidate) return;
var candidate = evt.candidate;
Globalvars.socket.emit("call",{ "candidate": encodeURIComponent(candidate.candidate), "sdpMLineIndex" : encodeURIComponent(candidate.sdpMLineIndex), "receiver_id" : params.receiver_id, "caller_id" : params.caller_id});
};
// once remote stream arrives, show it in the remote video element
Globalvars.pc.onaddstream = function (evt) {
console.log("add stream");
if (!event) return;
$("#remote-video").attr("src",URL.createObjectURL(evt.stream));
Methods.waitUntilRemoteStreamStartsFlowing();
};
// get the local stream, show it in the local video element and send it
navigator.getUserMedia({ "audio": false, "video": true }, function (stream) {
$("#my-video").attr("src", URL.createObjectURL(stream));
Globalvars.pc.addStream(stream);
if (isCaller){
Globalvars.pc.createOffer(getDescription, null, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } });
}
else{
console.log("Got Remote Description");
console.log(Globalvars.pc.remoteDescription);
//Globalvars.pc.createAnswer(Globalvars.pc.remoteDescription, getDescription);
Globalvars.pc.createAnswer(getDescription, null, { 'mandatory': { 'OfferToReceiveAudio': true, 'OfferToReceiveVideo': true } });
}
function getDescription(desc) {
Globalvars.pc.setLocalDescription(desc);
console.log("my desc");
console.log(desc);
Globalvars.socket.emit("call", {"sdp": encodeURIComponent(desc.sdp), "type": desc.type, "receiver_id" : params.receiver_id, "caller_id" : params.caller_id});
//signalingChannel.send(JSON.stringify({ "sdp": desc }));
}
});
},
......
完整代码可在https://bitbucket.org/ajaybc/meetchat-client 和https://bitbucket.org/ajaybc/meetchat-server 获得
【问题讨论】：
-
您是否尝试过从 chrome 获取更多调试信息？只需在 Chrome 浏览器中转到“chrome://webrtc-internals/”，然后查看所有 webrtc 步骤是否成功完成。你也可以在这里发布信息，我可以看看有没有什么突出的......
-
@Awalias 是的，我搞定了。这实际上是由于我使用的信号机制中的一个错误
-
你可能想用你为后代所做的事情来回答你自己的问题。
-
@RTB 他可能会使用此链接解决信号机制Signaling: session control, network and media information
-
@RTB 远程黑屏通常表示未设置远程 SDP。也许这对你有帮助。
标签： javascript html webrtc