37

在开发 WebRTC 视频聊天应用程序时，我遇到了接收远程视频流的情况。接收到视频流 blob，但视频只是黑色。

我已经阅读了这些答案，并尝试了几乎所有可以让它工作的东西 https://stackoverflow.com/a/17424224/923109 远程视频流无法与 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获得

4

4 回答 4

1

您可能需要添加

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

进入你的 AndroidManifest.xml

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

希望对你有效。

于 2015-04-01T10:45:44.883 回答
1

我和你有同样的问题，但只针对一些客户，我探索了与你相同的途径。最后一件事（可能是我的问题的最终原因）与至少一个客户端后面的 NAT 情况有关。总会有这样一种情况，即其中一个客户端无法在其 NAT 中打洞，因此 STUN 服务器将无法工作。在这些情况下，您需要一个 TURN 服务器将视频中继到该客户端。

你的 iceServers 有什么配置peerConnection？它是否包含您知道可以工作的任何 TURN 服务器？

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

于 2016-01-26T20:54:12.893 回答
-1

与其使用“decodeURIComponent”，不如试试“JSON.stringify”？这将确保顺利转换为字符串，然后您可以使用 JSON.parse 获取您发送的对象。根据我使用黑屏 WebRTC 的经验，我感觉到 SDP 负载很脏。

于 2015-01-14T11:22:16.013 回答
-1

首先创建 Peer 连接，然后将 MediaStream 添加到它。只有在将媒体流添加到对等连接交换offer、answer、candidates 后才应完成。

于 2015-08-13T05:51:55.710 回答