Search code examples
javascripthtmlcssvideowebcam

Webcam not working because the video not showing up?

How come my video does not show up but there is a recording image at the top?

    <h1 style="margin-bottom:10px;">Access WebCam using JavaScript</h1>
    <video id="video" autoplay>Not supported in your browser</video>
    </center>
  <script>
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
    if(navigator.getUserMedia){
      navigator.getUserMedia({video:true},handleVideo,videoError);
    }

    function handleVideo(stream){
      document.querySelector('#video').src = window.URL.createObjectURL(stream);
    }

    function videoError(e){
      alert('Something is wrong');
    }
  </script>
Solution

  • Inside handleVideo function change to this:

    document.querySelector('#video').srcObject  = stream;

    It worked for me.