Question

在开发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

Answer 1

您可能需要添加

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />

进入AndroidManifest.xml

我验证了WebRTC在我的Nexus 5上与https://download.01.org/crosswalk/releases/crosswalk/android/beta/7.36.154.12/和https://apprtc.appspot.com/配合使用。

希望它适合你。

Answer 2

我和你有同样的问题，但仅限于一些客户，我探索了你所做的相同途径。最后一件事（可能是我的问题的最终原因）与至少一个客户背后的NAT情况有关。总有可能出现其中一个客户端无法在NAT中打孔的情况，因此STUN服务器将无法工作。在这些情况下，您需要TURN服务器将视频转发到该客户端。

您在peerConnection中为iceServers配置了什么配置？它是否包含您知道可以使用的任何TURN服务器？

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

Answer 3

而不是使用＆＃34; decodeURIComponent＆＃34;为什么不试试＆＃34; JSON.stringify＆＃34;？这将确保平滑转换为字符串，然后您可以使用JSON.parse来获取您发送的对象。根据我使用黑屏WebRTC的经验，我感觉到一个脏的SDP有效载荷。

Answer 4

首先创建Peer连接，然后将MediaStream添加到它。只有在将媒体流添加到peerconnection交换提议，答案后，候选人才应该完成。

WebRTC远程视频显示为黑色

4 个答案: