Screen recordings in JavaScript with navigator.mediaDevices.getDisplayMedia aren't seekable

Question

We are trying to Record the Screen in ReatJS with navigator.mediaDevices.getDisplayMedia API and downloading the video locally after converting the Stream into Blob.

To download the video I am converting the Stream into Blob and then used URL.createObjectURL() to get the url and created the tag Programmatically and clicking it Programmatically to download the video locally.

I am able to download and play the video, but not able to seek the video with seek-bar in any video player.

When I checked the Properties of Downloaded video I could not see length. I think thats the problem but I am not sure how should I set the length while creating the blob.

   function startRecording(stream) {

  let options = {mimeType:'video/webm;codecs=vp8'};

  let recorder = new MediaRecorder(stream,options);

  
  let data = [];
 
  recorder.ondataavailable = event => data.push(event.data);
  recorder.start(1000);
  let stopped = new Promise((resolve, reject) => {
    recorder.onstop = resolve;
    recorder.onerror = event => reject(event.name);
  });
  return Promise.all([
    stopped
  ])
  .then(() => data);

}

export async function startCapture(displayMediaOptions) {
  let captureStream = null;

  try {
    captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
  } catch(err) {
    console.error("Error: " + err);
  }
  console.log("captureStream >>",captureStream)
  if(captureStream ==null){
    console.log("recording cancel")
    return -1;
  }
  startRecording(captureStream).then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
    console.log(captureStream)
    const href =  URL.createObjectURL(recordedBlob);
    console.log(href);
    const link = document.createElement('a');
    link.href = href;
    link.download = "RecordedVideo";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  return captureStream;
}

Here is the Link of Video which was downloaded with above code:

https://drive.google.com/file/d/1rtniknYlhsYVX3oEV6V7SWoV3RsNupqK/view?usp=sharing

P.S. Please play the video after downloading it as it play well in brwser.

If you think I can record and download the video with other approach plese share the details

score 0 · Answer 1 · answered Aug 07 '20 at 09:16

Use the FileReader for the link.href.

Try this approach. This should work. (I didn't test it though).

startRecording(captureStream).then (recordedChunks => {
    let recordedBlob = new Blob(recordedChunks, { type: "video/webm;codecs=vp8" });
    const reader = new FileReader();
    reader.readAsDataURL(recordedBlob);
    reader.onload = e => {
        const link = document.createElement('a');
        link.href = e.target.result;
        link.download = "RecordedVideo.webm";
        link.click();   
    }   
}

Tried this code still getting the same result I still not able seek the video. — Kashif Ali, Aug 07 '20 at 10:42

score 0 · Answer 2 · answered Aug 28 '20 at 20:12

I am able to download and play the video, but not able to seek the video with seek-bar

The MediaRecorder API unfortunately does not create seekable recording files.

That's because it's a live recorder that generates data continuously and incrementally returns it to JS.

This makes it hard to produce a seekable WebM file, which would require mutating the start of the file with seekable cues after the fact.

The workaround is to remux the files afterwards, either using ffmpeg or js libraries.

Screen recordings in JavaScript with navigator.mediaDevices.getDisplayMedia aren't seekable

2 Answers2