WebRTC video is not displaying

Solution 1:

It's outdated code. It contains 6 problems that track the evolution of the WebRTC API.

TL;DR: It doesn't work because you're not checking for errors and you've only tested one browser.

1) Old vendor prefixes (remove them):

yourConnection = new RTCPeerConnection(configuration);
theirConnection = new webkitRTCPeerConnection(configuration); // <-- wrong

webkit-names won't work in Firefox or Edge. These haven't been needed in years. Provided you switch to navigator.mediaDevices.getUserMedia, you can skip your 10 lines of prefix-mangling preamble entirely.

2) Uses old url (use urls)

This is technically wrong, though I suspect most browsers allow it:

iceServers: [{url: "stun:stun.1.google.com:19302"}] // <-- wrong

Instead use:

iceServers: [{urls: "stun:stun.1.google.com:19302"}]

...because an ICE server may technically be reachable at multiple urls.

3) Using old callback APIs without error checking (use promises instead):

This is wrong:

navigator.getUserMedia({video: true, audio: true}, function(stream) { /* ... */ });

...because a 3rd failure callback argument is required. Edge says TypeError: Argument not optional.

Legacy bugs in Chrome and Safari allow this, but it won't work in Firefox or Edge. Ignoring errors deprives you of learning why things don't work. If the user denies camera access, you wanna know.

All modern browsers support the promise version of the API on mediaDevices. Use that instead:

navigator.mediaDevices.getUserMedia({video: true, audio: true})
  .then(stream => { /* use stream here */ })
  .catch(error => console.log(error));

4) You fell in RTCPeerConnection's "promise/callback mix-up trap":

I've answered this before, but in short, this is similar to #2 above, but with a twist. This is wrong:

yourConnection.createOffer(function(offer) { /* ... */ }); 

You think you're calling the old callback API, but you're not. Those required two arguments:

yourConnection.createOffer(successCallback, failureCallback /*, optionsObject */);

Instead, you're actually calling the same-named modern promise API, because a function is an object in JS:

const promise = yourConnection.createOffer(optionsObject);

This is where your code stops working. Your callback function is never called, being interpreted as an empty options object instead. You ignore the returned promise. Use the promise API instead.

5) createObjectURL(stream) is deprecated, gone.

It was removed in Firefox and Chrome 71 (the warning you received). This is wrong:

theirVideo.src = URL.createObjectURL(stream);

Instead use this:

theirVideo.srcObject = stream;

6) For extra points: The whole stream API is deprecated (use tracks).

addStream() & onaddstream are no longer in the spec, and only work in some browsers:

yourConnection.addStream(stream);
theirConnection.onaddstream = e => theirVideo.srcObject = e.stream;

Instead, peer connections are now entirely track-based. Use this instead:

for (const track of stream.getTracks()) {
  yourConnection.addTrack(track, stream);
}
theirConnection.ontrack = e => theirVideo.srcObject = e.streams[0];

For more on these differences, see my blog.

Working example

The following should work in all browsers:

const yourVideo = document.querySelector("#face_cam_vid");
const theirVideo = document.querySelector("#thevid");

(async () => {
  if (!("mediaDevices" in navigator) || !("RTCPeerConnection" in window)) {
    alert("Sorry, your browser does not support WebRTC.");
    return;
  }
  const stream = await navigator.mediaDevices.getUserMedia({video:true, audio:true});
  yourVideo.srcObject = stream;

  const configuration = {
    iceServers: [{urls: "stun:stun.1.google.com:19302"}]
  };
  const yours = new RTCPeerConnection(configuration);
  const theirs = new RTCPeerConnection(configuration);

  for (const track of stream.getTracks()) {
    yours.addTrack(track, stream);
  }
  theirs.ontrack = e => theirVideo.srcObject = e.streams[0];

  yours.onicecandidate = e => theirs.addIceCandidate(e.candidate);
  theirs.onicecandidate = e => yours.addIceCandidate(e.candidate);

  const offer = await yours.createOffer();
  await yours.setLocalDescription(offer);
  await theirs.setRemoteDescription(offer);

  const answer = await theirs.createAnswer();
  await theirs.setLocalDescription(answer);
  await yours.setRemoteDescription(answer);
})();