webrtc onRemote Stream null

时间:2017-06-10 15:03:21

标签: webrtc

我是webRTC发现文档问题的新手。我无法弄清楚为什么joiner不接收来自发起者的流,因为控制台上的消息对我很正常。此外,我收到有关弃用方法的警告但不确定要纠正的方法。

html:

 navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||      navigator.mediaDevices.getUserMedia ||
        navigator.msGetUserMedia;

var isInitiator = false
    , isChannelReady = false
    , isStarted = false;


//Send 'create' or 'join' message to singnalling server
console.log('Create or join room', room);
socket.emit('create or join', room);


//Handle 'created' message coming back from server:
//this peer is the initiator
socket.on('created', function (room){
    console.log('Created room ' + room);
    isInitiator = true;
    var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");

});

//Handle 'join' message coming back from server:
//another peer is joining the channel
socket.on('join', function (room){
    console.log('Another peer made a request to join room ' + room);
    console.log('This peer is the initiator of room ' + room + '!');
    isChannelReady = true;
    var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");

});

//Handle 'joined' message coming back from server:
//this is the second peer joining the channel

socket.on('joined', function (room){
    console.log('This peer has joined room ' + room);
    isChannelReady = true;

    var video = $('#sidebar').append("<video class='student' autoplay='true'></video>");

    navigator.getUserMedia({ video: true, audio: true },
        function (stream) {          

            $('#sidebar').children().last().attr('src', window.URL.createObjectURL(stream))

            if(!isStarted && typeof stream!= 'undefined' && isChannelReady) {                   
                createPeerConnectionInit(stream);
                isStarted = true;
            } else{

            }

    }, function (error) {
        console.log('error'+error);
        });
});

socket.on('message', function (message){

    if (message === 'got user media') {
    }
    else if (message.type === 'offer') {
        if(isChannelReady){
            console.log('Im the initiator. Channel is ready!!!');
            createPeerConnectionNotInit(message);
            isStarted = true;
        }
    }
    else if (message.type === 'answer' && isStarted) {
        peer.addAnswerSDP(message);
        console.log('addAnswerSDP:', message);
    }
    else if (message.type === 'candidate' && isStarted) {
        console.log("im adding candidate!!!");
        var candidate = new RTCIceCandidate({sdpMLineIndex:message.label,
            candidate:message.candidate});
        peer.addICE(candidate);// εδω ο initiator προσθέτει στο ice τον candidate
    }
    else if (message === 'bye' && isStarted) {
    }
});



function createPeerConnectionInit(stream){

    peer = RTCPeerConnection({
        attachStream    : stream,
        onICE   : function (candidate) {
            if (candidate) {
                sendMessage({
                    type: 'candidate',
                    label: candidate.sdpMLineIndex,
                    id: candidate.sdpMid,
                    candidate: candidate.candidate});
            } else {
                console.log('End of candidates.');
            }
        },
        onRemoteStream      : function (stream) {
            console.log('onRemoteStream Init = yes');
            document.getElementById('video').src = stream;
        },
        onOfferSDP      : function(sdp) {
            console.log('sdp ='+JSON.stringify(sdp));
            sendMessage(sdp);
        }
    });
}

function createPeerConnectionNotInit(offer_sdp){


    peer = RTCPeerConnection({
        onICE   : function (candidate) {
            if (candidate) {
                sendMessage({
                    type: 'candidate',
                    label: candidate.sdpMLineIndex,
                    id: candidate.sdpMid,
                    candidate: candidate.candidate});
            } else {
                console.log('End of candidates.');
            }
        },
        onRemoteStream  : function (stream) {
            console.log('onRemoteStream Not Init = yes');
            document.getElementById('video').src = URL.createObjectURL(stream);;
        },
        // see below two additions ↓
        offerSDP        : offer_sdp,
        onAnswerSDP     : function(sdp) {
            sendMessage(sdp);
        }
    });
}

来自发起人视图的控制台日志:

sdp ={"type":"offer","sdp":"v=0\r\no=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=fingerprint:sha-256 
Sending message:  Object { type: "candidate", label: 0, id: "sdparta_0", candidate: "candidate:0 1 UDP 2122187007 2a02:5…" }  boardWithD3.js.html:798:13
Many same messages following..
addAnswerSDP: Object { type: "answer", sdp: "v=0 o=mozilla...THIS_IS_SDPARTA-53.…" }  boardWithD3.js.html:727:17
adding-ice candidate:0 1 UDP 2122187007 2a02:582:1096:a500:f03d:34da:c0a:75b0 50729 typ host  RTCPeerConnection-v1.5.js:264:13
A couple similar messages following…..

来自加入者视图的控制台日志:

offer_sdp:{"type":"offer","sdp":"v=0\r\no=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0\r\ns=-\r\nt=0 0\r\na=fingerprint:sha-256 ………
ice-servers [{"url": "stun:23.21.150.121"   },
    {"url": "stun:stun.services.mozilla.com"    }]  
sdp-constraints {
    "OfferToReceiveAudio": true,
    "OfferToReceiveVideo": true
}  RTCPeerConnection-v1.5.js:123:5
offer-sdp v=0  o=mozilla...THIS_IS_SDPARTA-53.0.3 8347568228516099874 0 IN IP4 0.0.0.0
……
WebRTC interfaces with the “moz” prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated.  RTCPeerConnection-v1.5.js:79:15
RTCIceServer.url is deprecated! Use urls instead. RTCPeerConnection-v1.5.js:79
onaddstream is deprecated! Use peerConnection.ontrack instead.  RTCPeerConnection-v1.5.js:101
onRemoteStream Not Init = yes  boardWithD3.js.html:784:21
Sending message:  Object { type: "answer", sdp: "v=0 o=mozilla...THIS_IS_SDPARTA-53.…" }  boardWithD3.js.html:798:13……

adding-ice candidate:0 1 UDP 2122187007 2a02:582:1096:a500:f03d:34da:c0a:75b0 50006 typ host  RTCPeerConnection-v1.5.js:264:13

**Uncaught TypeError: Cannot set property 'src' of null
at Object.onRemoteStream (boardWithD3.js.html?andora:785)
at RTCPeerConnection.peer.onaddstream (RTCPeerConnection-v1.5.js:110)
 **  

adding-ice candidate:3 1 UDP 2122252543 2a02:582:1096:a500:7de6:9361:ecf4:476a 50007 typ host  RTCPeerConnection-v1.5.js:264:13
followed by many similar messages…..
Sending message:  Object { type: "candidate", label: 0, id: "sdparta_0", candidate: "candidate:0 1 UDP 2122187007 2a02:5…" }  boardWithD3.js.html:798:13
followed by many similar messages…..

提前致谢

1 个答案:

答案 0 :(得分:2)

按照以下日志

Uncaught TypeError: Cannot set property 'src' of null
at Object.onRemoteStream (boardWithD3.js.html?andora:785)
at RTCPeerConnection.peer.onaddstream (RTCPeerConnection-v1.5.js:110)

问题出现在下面的视频元素方法中。

onRemoteStream : function (stream) {
      console.log('onRemoteStream stream', stream);
      //document.getElementById('video').src = stream; // Issue could be here, add a video element with id="video" in html body.
      document.getElementById('video').srcObject = stream; //As per latest API use srcObject instead of src
}

正如@jib所提到的,你使用旧的API。

请参阅samplesdemo了解最新的API