I use WebRTC to connected 2 Chrome Browsers. I create offer on the first and send it via signalR to second client like this :

function initiate_call() {
callerPeerConn = new RTCPeerConnection(peerConnCfg);
callerPeerConn.ontrack = function (event) {
    console.log('caller recived new stream');
    remoteVideo.srcObject = event.streams[0];
    console.log(event);
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(function (stream) {
        localVideo.srcObject = stream;
        for (const track of stream.getTracks()) {
            callerPeerConn.addTrack(track, stream);
        }
        return callerPeerConn.createOffer();
    })
    .then(
    function (offer) {
        var off = new RTCSessionDescription(offer);
        callerPeerConn.setLocalDescription(
            new RTCSessionDescription(off),
            function () {
                // invite to video chat
                console.log('send offer');
            },
            function (err) {
                console.log(err.message);
            }
        )
    });
}

When my second browser getting offer he use setLocalDescription and try to create answer than send it to caller like that :

function accept_send_answer(){    
calleePeerConn = new RTCPeerConnection(peerConnCfg);
calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}
calleePeerConn.setRemoteDescription(offer)
    .then(function () {
        return navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    })
    .then(function (stream) {
        localVideo.srcObject = stream; 

        for (const track of stream.getTracks()) {
            calleePeerConn.addTrack(track, stream);
        }
        return calleePeerConn.createAnswer();
    })
    .then(function (answer) {
        // sending answer

        console.log("sending ansfer");
        var remote_streams = calleePeerConn.getRemoteStreams();
        var local_streams = calleePeerConn.getLocalStreams();

        console.log("callee remote streams");
        console.log(remote_streams);
        console.log("callee local streams");
        console.log(local_streams);
    })
    .catch(function (err) {
        console.log(err.message);
    });
}

UPD

After I changed my code, following the advice of a respected @jib, my local and remote streams on both sides was successfully added to RTCPeerConnection object. I successfully obtain following messanges in console : caller recived new stream and callee accept offer and got streams as well. Last problem is - why this code not working :

calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}

video not played.

I use WebRTC to connected 2 Chrome Browsers. I create offer on the first and send it via signalR to second client like this :

function initiate_call() {
callerPeerConn = new RTCPeerConnection(peerConnCfg);
callerPeerConn.ontrack = function (event) {
    console.log('caller recived new stream');
    remoteVideo.srcObject = event.streams[0];
    console.log(event);
}
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(function (stream) {
        localVideo.srcObject = stream;
        for (const track of stream.getTracks()) {
            callerPeerConn.addTrack(track, stream);
        }
        return callerPeerConn.createOffer();
    })
    .then(
    function (offer) {
        var off = new RTCSessionDescription(offer);
        callerPeerConn.setLocalDescription(
            new RTCSessionDescription(off),
            function () {
                // invite to video chat
                console.log('send offer');
            },
            function (err) {
                console.log(err.message);
            }
        )
    });
}

When my second browser getting offer he use setLocalDescription and try to create answer than send it to caller like that :

function accept_send_answer(){    
calleePeerConn = new RTCPeerConnection(peerConnCfg);
calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}
calleePeerConn.setRemoteDescription(offer)
    .then(function () {
        return navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    })
    .then(function (stream) {
        localVideo.srcObject = stream; 

        for (const track of stream.getTracks()) {
            calleePeerConn.addTrack(track, stream);
        }
        return calleePeerConn.createAnswer();
    })
    .then(function (answer) {
        // sending answer

        console.log("sending ansfer");
        var remote_streams = calleePeerConn.getRemoteStreams();
        var local_streams = calleePeerConn.getLocalStreams();

        console.log("callee remote streams");
        console.log(remote_streams);
        console.log("callee local streams");
        console.log(local_streams);
    })
    .catch(function (err) {
        console.log(err.message);
    });
}

UPD

After I changed my code, following the advice of a respected @jib, my local and remote streams on both sides was successfully added to RTCPeerConnection object. I successfully obtain following messanges in console : caller recived new stream and callee accept offer and got streams as well. Last problem is - why this code not working :

calleePeerConn.ontrack = function (event) {
    console.log('callee accept offer and got streams');
    remoteVideo.srcObject = event.streams[0];
}

video not played.

• javascript
• webrtc

1 Answer 1

First, addStream and onaddstream are deprecated, and won't work in other browsers. Use addTrack and ontrack instead.

Second, timing.

You're calling peerConn.createOffer() before peerConn.addStream(stream) so tracks are not picked up.

Same with peerConn.createAnswer() before peerConn.addStream(stream).

Lastly, mixing callbacks and promises confuses the order of things here. Try:

const peerConn = new RTCPeerConnection(peerConnCfg);
peerConn.ontrack = function (event) {
  alert('new stream added! ' + event.streams[0]);
}

function initiate_call() {
  navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then(function (stream) {
      localVideo.srcObject = stream;
      for (const track of stream.getTracks()) {
        peerConn.addTrack(track, stream);
      }
     return peerConn.createOffer();
    })
    .then(function (offer) {
      // signaling and invite
      return peerConn.setLocalDescription(off);
    })
    .catch(function (err) {
      console.log(err.message);
    });
}

function accept_send_answer(offer) {
  peerConn.setRemoteDescription(offer)
    .then(function () {
      return navigator.mediaDevices.getUserMedia({audio: true, video: true});
    })
    .then(function (stream) {
      video.srcObject = stream;
      for (const track of stream.getTracks()) {
        peerConn.addTrack(track, stream);
      }
      return peerConn.createAnswer();
    })
    .then(function (answer) {
      //signaling to caller and send answer
      return peerConn.setLocalDescription(answer);
    })
    .catch(function (err) {
      console.log(err.message);
    });
}

Note that your code (and my reply) still lack critical pieces: ice candidate exchange, and you're not showing your setRemoteDescription(answer) code to plete the negotiation loop.

Note that most examples tend to use the same JS on both sides, like e.g. this working fiddle using iframe postMessage for signaling.