1
    function startWebcam(){
        navigator.mediaDevices.getUserMedia({video:true,audio:true}).then(localMediaStream=>{
            //console.log(localMediaStream);
            let textFileAsBlob = new Blob([localMediaStream],{"type":"video/mp4"});
            video.src=URL.createObjectURL(textFileAsBlob);
            //console.log(textFileAsBlob);
            video.crossOrigin = 'anonymous';
            video.load(); 
           // console.log(video);
        });
    }
    startWebcam();

I am not able to render the webcam video on my screen with js code Whenever I run code video.play() it is showing me that The element has no supported sources by any browser could anyone help me??

KOHINOOR KHAN
  • 11
  • 2

1 Answers1

0

All I understand from your question is that, You want to access and start WebCam using this code snippet. Your code is working fine for me. There is nothing wrong with code.

But you could also give try this code below.

<body>
    <div id="container">
      <video autoplay="true" id="videoElement"></video>
    </div>
    <button onclick="startCam()">Start WebCam</button>

    <script>
    </script>

  </body>

Now inside the <script> tags write below code:

      function startCam() {
        var video = document.querySelector("#videoElement");

        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia({ video: true })
            .then(function (stream) {
              video.srcObject = stream;
            })
            .catch(function (err) {
              console.log(err);
            });
        }
      }

Hope, it's help!

kartik tyagi
  • 6,256
  • 2
  • 14
  • 31
  • thanks! Yes, sir, it helps a lot. your code is working fine but I am confused that why I am unable to render the video from pseudo-file (Blob file). – KOHINOOR KHAN Aug 27 '21 at 12:24
  • The video format (type) you're trying to convert into Blob isn't supported by browsers. Try with `type: "video/webm"`, that might work. – kartik tyagi Aug 27 '21 at 13:04