Using WebRTC to view video in a remote browser, local browser never gets ontrack event

Question

I'm trying to place a webRTC "call" from a browser that doesn't have an active video stream to a browser that does. The idea is to allow the originating browser to view the webcam of the receiving browser.

Edit: My particular application calls only for one way video. Audio streams are not involved.

By call I mean a point-to-point connection with just two endpoints.

The call gets set up properly; the offer / answer and candidate-exchange protocols function correctly.

But the originating browser's RTCPeerConnection.ontrack event handler never gets called to announce the video track from the browser receiving the call.

Flipping originator and receiver works: If I originate the call from the browser with the video track -- that is, get that browser's RTCPeerConnection object to generate the offer object -- he browser without the local video stream DOES get the ontrack event.

This happens with all combinations of Google Chrome and Firefox on the two ends of the connection. (Chrome 58.0.3029.110 64-bit, Firefox 53.0.2)

Sone older documentation mentions OfferToREceiveVideo as an option for the pc.createOffer() method. But I'm not sure that works. Newer documentation doesn't mention it. At any rate, including or omitting it doesn't seem to matter.

var offerOptions = {OfferToReceiveVideo: true, 
                    mandatory: {OfferToReceiveVideo: true}};

localPeerConnection.createOffer ( offerOptions )
    .then(
        function ( offer ) {
          localPeerConnection.setLocalDescription( offer );
          // send the offer to the far end via signaling server

        } )
    .catch(
        function ( error ) {
          trace( "error in createOffer", error );
        } );

Edit I have also tried this version of the options object, with the same (negative) result.

var offerOptions = {offerToReceiveVideo: true};

and

var offerOptions = {offerToReceiveVideo: true, offerToReceiveAudio: false};

without success.

Is there some limitation about asymmetric video-only webRTC connections that I don't understand? Is there something I have to do to trick an originating RTCPeerConnection object into recognizing an incoming video stream?

I have a workaround: adding a "request" transaction to signaling, to allow the videoless browser to say "call me" to the video-capable browser. But I'm hoping for something more elegant.

Answer 1

There's a bug in code you're not showing us. This should work fine (use https fiddle in Chrome):

var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

var haveGum = navigator.mediaDevices.getUserMedia({video: true, audio: true});

pc1.ontrack = e => video1.srcObject = e.streams[0];
pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate).catch(log);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate).catch(log);
pc1.oniceconnectionstatechange = e => log(pc1.iceConnectionState);

pc1.createOffer({offerToReceiveAudio: true, offerToReceiveVideo: true})
  .then(d => pc1.setLocalDescription(d))
  .then(() => pc2.setRemoteDescription(pc1.localDescription))
  .then(() => haveGum)
  .then(stream => pc2.addStream(video2.srcObject = stream))
  .then(() => pc2.createAnswer()).then(d => pc2.setLocalDescription(d))
  .then(() => pc1.setRemoteDescription(pc2.localDescription))
  .catch(log);

var log = msg => div.innerHTML += "<br>" + msg;

<video id="video1" width="160" height="120" autoplay></video>
<video id="video2" width="160" height="120" autoplay muted></video><br>
<div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Warning! Run code snippet appears to crash Chrome!