WebRTC远程视频显示为黑色 [英] WebRTC remote video is shown as black

问题描述

在开发WebRTC视频聊天应用程序时，我遇到了远程接收视频流的问题.接收到视频流Blob，但视频仅为黑色.

While developing a WebRTC video chat application I have encountered receiving remote the video stream. The video stream blob is received, but the video is just black.

我已经仔细研究了这些答案，并尝试了几乎所有可以使它正常工作的方法 https://stackoverflow.com/a/17424224/923109 远程VideoStream无法与WebRTC一起使用

I have gone through these answers and tried almost everything I could to get it to work 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-c​​lient和 https://bitbucket.org/ajaybc/meetchat-server

推荐答案

我遇到了与您相同的问题，但仅针对某些客户，并且我探索了与您相同的方法.最后一件事(可能是造成我问题的最终原因)与至少一个客户端后面的NAT情况有关.总是有一种情况，其中一个客户端无法在其NAT中打孔，因此STUN服务器将无法工作.在这种情况下，您需要使用TURN服务器将视频中继到该客户端.

I had the same issues as you, but only for some clients, and I explored the same avenues that you did. The last thing (and probably the ultimate cause of my issues) was related to the NAT situation behind at least one of the clients. There will always be the possibility of a situation where one of the clients cannot get a hole punched in their NAT, and therefore a STUN server will not work. In these cases, you need a TURN server to relay the video to that client.

peerConnection中的iceServer有什么配置?它是否包含您知道可以使用的TURN服务器?

What configuration do you have for your iceServers in your peerConnection? Does it contain any TURN servers that you know to work?

您可以在此站点 http://xirsys.com/simplewebrtc/上创建免费帐户，以及请按照有关在其托管服务器上获取TURN服务器的凭据的简单说明进行操作，然后可以使用它们来测试这是否是问题所在.

You can create a free account on this site http://xirsys.com/simplewebrtc/, and follow the simple instructions on getting credentials for a TURN server on their hosting, which you can then use to test if this is the issue.

这篇关于WebRTC远程视频显示为黑色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！