webrtc onRemote Stream null [英] webrtc onRemote Stream null

查看:24
本文介绍了webrtc onRemote Stream null的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是 webRTC 的新手,发现它的文档有问题.我无法弄清楚为什么加入者没有从发起者接收流,因为控制台上的消息在我看来很正常.我还收到有关已弃用方法的警告,但不确定要纠正什么.

I am fairly new in webRTC finding problems with its documentation. I cannot figure out why joiner does not receive stream from initiator since the messages on console look to me quite normal. Also i receive warnings about deprecated methods but not sure what to correct.

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);
        }
    });
}

发起者视图中的控制台日志:

Console log from initiator view:

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…..

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

Console log from joiner view:

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…..

提前致谢

推荐答案

根据下面的日志

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)

问题在于视频元素的以下方法.

Issue is in below method with video element.

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.

As @jib mentioned, you using old API's.

查看示例演示 最新 API

See the samples and demo for latest API's

这篇关于webrtc onRemote Stream null的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆