How to automatically stream remote cam in WebRTC?

Question

So far I have successfully established (running node.js server) an RTC connection between two peers with a datachannel. I can send data back and forth.

I have also successfully streamed the webcam from one peer to another and vice versa. How exactly am I doing this?

Both peers do this:

function handleRemoteStreamAdded(event) {
  console.log('Remote stream added.');
  remoteStream = event.stream;
  remoteVideo.srcObject = remoteStream;
}

function gotStream(stream){
 ...
 pc.addStream(stream);
 ...
}

navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(err);
 ...
pc = new RTCPeerConnection();
 ...
pc.onaddstream = handleRemoteStreamAdded;

So I basically say that whenever I add my own stream (pc.addStream) then go to handleRemoteStreamAdded. It all works fine.

But what I really want to do as a next step is to add a button to each client and give each of them the option whether or not they want to stream their cam to the other side. If they want to, then the stream should start automatically on the other end. Unfortunately, I just can't figure out how to.

Theoretically, what I thought is to add an Eventlistener to a button and then the event triggers:

navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(err);

By doing this I basically also did pc.addStream(stream); via function gotStream. Then I send a message to the other end like "display my cam" and by receiving this message on the other end, that other peer should somehow trigger handleRemoteStreamAdded. But within this function there is the pre-defined event that I can only "access" locally via pc.onaddstream = handleRemoteStreamAdded;

How can I automatically start streaming the other side's cam as soon as I either get a message like "display my cam" or by some event?

I am not really fond in the RTC part, but would starting your pc with [dummy MediaStreams](https://stackoverflow.com/questions/49187162/rtcmulticonnection-initiator-no-camera/49187298#49187298) kind of workaround your issue? As I imagine it, you would send a silent stream from the begining, and only replace the MediaStream when the user accepts it, this way, no need to renegotiate anything. — Kaiido, Apr 19 '18 at 02:08
you mean like: localstream = SilentStream(); pc.addStream = localstream; ? — AlgoDan, Apr 19 '18 at 03:08
`pc.addStream(localstream)` yes, and then `localstream.removeTrack(silentVidTrack)`, `localstream.addTrack(gUMVideoTrack)` — Kaiido, Apr 19 '18 at 03:12
somehow `pc.addStream(..)` doesn't do anything with a dummystream. `myVidObj.srcObject = dummyStream` ==>this works. The other one does not :-/ — AlgoDan, Apr 19 '18 at 03:18
Ah weird... You should be able to send this dummy stream. I don't know what might be happening, and as I said, my knowledge is very limited once it leaves the js engine.... Anwyay, here is [a fiddle](https://jsfiddle.net/yydmvqb9/) still only using `srcObject` that demonstrate what I had in mind. — Kaiido, Apr 19 '18 at 03:21

score 2 · Answer 1 · answered Apr 19 '18 at 05:01

are you creating another offer and doing a new signaling exchange after calling pc.addStream? (which fwiw is deprecated; prefer addTrack and ontrack)

See https://webrtc.github.io/samples/src/content/peerconnection/upgrade/ for a similar thing adding video to an audio-only call.

How to automatically stream remote cam in WebRTC?

1 Answers1