Подтвердить что ты не робот

Удаленное видео WebRTC отображается как черный

При разработке приложения для видеочата WebRTC я столкнулся с удалением видеопотока. Получается видеопоток видеопотока, но видео просто черное.

Я прошел через эти ответы и попробовал почти все, что мог, чтобы заставить его работать qaru.site/info/156121/... Удаленный видеопоток не работает с 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 и < а3 >

4b9b3361

Ответ 2

У меня были те же проблемы, что и вы, но только для некоторых клиентов, и я исследовал те же возможности, что и вы. Последнее (и, вероятно, конечная причина моих проблем) было связано с ситуацией NAT по крайней мере одного из клиентов. Всегда будет возможность ситуации, когда один из клиентов не может получить дыру, пробитую в своем NAT, и поэтому сервер STUN не будет работать. В этих случаях вам нужен сервер TURN для передачи видео этому клиенту.

Какую конфигурацию вы используете для своих ледовых серверов в peerConnection? Он содержит все серверы TURN, которые, как вы знаете, работают?

Вы можете создать бесплатную учетную запись на этом сайте http://xirsys.com/simplewebrtc/ и следовать простым инструкциям по получению учетных данных для сервера TURN на их хостинге, который затем можно использовать для проверки, если это проблема.

Ответ 3

Вместо использования "decodeURIComponent", почему бы вам не попробовать "JSON.stringify"? Это обеспечит плавное преобразование строки, и вы сможете использовать JSON.parse для удаления отправленного вами объекта. Из моего опыта работы с черным экраном WebRTC я ощущаю грязную полезную нагрузку SDP.

Ответ 4

Сначала создайте одноранговое соединение, а затем добавьте к нему MediaStream. Только после того, как вы добавите медиа-поток для обмена мнениями, ответьте, кандидаты должны быть сделаны.