0

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

Thanks in advance

nick314
  • 55
  • 8
  • Maybe fix the `TypeError`? Regarding warnings, use [urls](https://stackoverflow.com/a/37260021/918910), lower-case o in [offerToReceiveVideo](https://stackoverflow.com/a/30982333/918910), and [ontrack](https://stackoverflow.com/a/37928856/918910) if you can. – jib Jun 10 '17 at 22:10
  • Also, are you using some sort of library? I don't recognize this RTCPeerConnection constructor... – jib Jun 10 '17 at 22:35
  • Sorry. I edited the answer so you can see that error is about null source trying to attach stream to video element. Also i use https://www.webrtc-experiment.com/docs/how-to-use-rtcpeerconnection-js-v1.1.html – nick314 Jun 11 '17 at 07:35

1 Answers1

2

As per below log

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
}

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

See the samples and demo for latest API's

Ajay
  • 2,483
  • 2
  • 16
  • 27