reactjshtml5-videoscreenshotmediastream

Failed to convert value to MediaStream


I am trying to implement Screen Capture API https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture#capturing_screen_contents

I am building the same code in React JS,

when I place the following code I am getting an error "Failed to set the 'srcObject' property on 'HTMLMediaElement': Failed to convert value to 'MediaStream'."

<video id="video"></video>
video = document.getElementById("video");
video.srcObject = navigator.mediaDevices.getDisplayMedia(displayMediaOptions);```


Please someone help in resolving this issue

Solution

  • HTML

    <video id="video"></video>
    

    JS

    video = document.getElementById("video");
     
    async function startCapture() {
      
    
      try {
        video.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
      } catch(err) {
        console.error("Error: " + err);
      }
      return captureStream;
    }
    startCapture()