WebRTC video is not displaying

javascript html webrtc

13,659

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);
})();

13,659

Author by

iLiA

Updated on June 27, 2022

Comments

iLiA almost 2 years

i am creating one-to-one webrtc video chatroom and this code does not working and i wanna know why

function hasUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
return !!navigator.getUserMedia; 
}

function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || 
window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
return !!window.RTCPeerConnection;
}



 function startPeerConnection(stream) {
 var configuration = {

    "iceServers": [{ "url": "stun:stun.1.google.com:19302" }]
 };
 yourConnection = new RTCPeerConnection(configuration);
 theirConnection = new webkitRTCPeerConnection(configuration);

 yourConnection.addStream(stream);
 theirConnection.onaddstream = function (e) {
     theirVideo.src = window.URL.createObjectURL(e.stream);
 };


 yourConnection.onicecandidate = function (event) {
    if (event.candidate){

   theirConnection.addIceCandidate(newRTCIceCandidate(event.candidate));
    }
  };

 theirConnection.onicecandidate = function (event) {
    if (event.candidate) {
        yourConnection.addIceCandidate(new 
  RTCIceCandidate(event.candidate));
    }
  };

    yourConnection.createOffer(function (offer) {
    yourConnection.setLocalDescription(offer);
    theirConnection.setRemoteDescription(offer);

    theirConnection.createAnswer(function (offer) {
        theirConnection.setLocalDescription(offer);
        yourConnection.setRemoteDescription(offer);
    });
    });
     }


    var yourVideo = document.querySelector("#face_cam_vid"),
    theirVideo = document.querySelector("#thevid"),
   yourConnection, theirConnection;

   if (hasUserMedia()) {
      navigator.getUserMedia({ video: true, audio: true }, function(stream) 
 {
        yourVideo.src = window.URL.createObjectURL(stream);
        if (hasRTCPeerConnection()) {
            startPeerConnection(stream);
        } else {
            alert("Sorry, your browser does not support WebRTC.");
        }
         }, function (error) {
         console.log(error);
        }
               );
     } else {
      alert("Sorry, your browser does not support WebRTC.");
    }

and this code is giving me a errors like thiserrors and as u see video is not displaying , i tried to create div (where video tag is) but it did not work anyway

if u can help my i will be glad here is my html

 <!DOCTYPE html>
 <html>

 <head>
 <title>
  Video Call
 </title>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" media="screen" href="vidd.css" />
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="/videof.js"></script>

 <script>var width = Math.max(window.screen.width, window.innerWidth);

    if(width <= 414){
        var faceCam = document.getElementById("face_cam");
        faceCam.style.width = "15%";
    }

    function smaller(){
        if(width <= 414){
            var size = document.getElementById("face_cam").style.width;
            if(size == "15%"){
                faceCam.style.width = "3%";
                faceCam.style.height = "3%";
                faceCam.style.borderRadius = "0px"
            }
            else if(size == "3%"){
                faceCam.style.width = "15%";
                faceCam.style.height = "30%";
                faceCam.style.borderRadius = "10px"
            }
        }

        else{
            var size = document.getElementById("face_cam").style.width;
            if(size == "30%"){
                faceCam.style.width = "3%";
                faceCam.style.height = "3%";
                faceCam.style.borderRadius = "0px"
            }
            else if(size == "3%"){
                faceCam.style.width = "30%";
                faceCam.style.height = "30%";
                faceCam.style.borderRadius = "10px";
            }
         }
        }


     var width = Math.max(window.screen.width, window.innerWidth);

     function smaller(){
        var size = document.getElementById("face_cam").style.height;
        if (size == "30%"){
            var frame = document.getElementById("face_cam");
            frame.style.height = "3%";
            frame.style.width = "4%";
            frame.borderRadius = "0px";
        }

        else{
            var frame = document.getElementById("face_cam");
            frame.style.height = "30%";
            frame.style.width = "30%";
        }
        }
         function BACKT(){ 
              window.location.href = "http://localhost:8000/"
        }

       </script>
       </head>

       <body>
      <div class="test_vc_field">
      <video id="thevid" autoplay></video>
     <div id="face_cam" onclick="smaller()" style="height: 30%; width: 30%">
     <video id="face_cam_vid" autoplay></video>
    </div>
    </div>
    <div class="nav">
   <button class="next">შემდეგი</button>
   <img src="next.png" class="next_icon">
    <button class="off" id="off">გათიშვა</button>
   <img src="shutdown.png" class="shd_icon">
  <button class="goto_main" id="WTfu" onclick="BACKT();">მთავარი 
  გვერდი</button>
  <img src="home.png" class="home_icon" onclick="main()">
  </div>
  </body>

   </html>

#thevid id vid where second user displays face_cam_vid is video where i display