CODEWITHSUNDEEP
google-chromegoogle-chrome-extensionffmpegmediarecorderwebm
Black-Hole
Black-Hole

Reputation: 943

How do I generate a lossless video file with chrome.tabCapture.capture?

Problem Description:

chrome.tabCapture.capture will generate a stream, I use MediaRecorder to operate. But MediaRecorder only supports webm video format. Webm video format will compress my recorded video

If I recorded the tab page, nothing changed for 10 seconds (including no mouse movement, no sound), the entire web page is still. Then the final webm video file will have only one frame, not even one second.

Is there any way to solve this problem? Because I don't want compressed video

Core Code:

let mediaRecorder = '';

chrome.tabCapture.capture(captureConfig, stream => {
  if (stream === null) {
    chrome.tabs.sendMessage(id, {
      error: chrome.runtime.lastError
    });
    return false;
  }

  const recordedBlobs: BlobPart[] = [];
  mediaRecorder = new MediaRecorder(stream, {
    videoBitsPerSecond: 2500000,
    mimeType: 'video/webm;codecs=vp9'
  });

  mediaRecorder.ondataavailable = event => {
    if (event.data && event.data.size > 0) {
      recordedBlobs.push(event.data);
    }
  };

  mediaRecorder.onstop = () => {
    const superBuffer = new Blob(recordedBlobs, {
      type: 'video/webm'
    });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(superBuffer);
    link.setAttribute('download', `${filename}.webm`);
    link.click();
  };

  mediaRecorder.start();
});

const stop = () => {
  mediaRecorder.stop();
  mediaRecorder.stream.getTracks().forEach(track => {
    track.stop();
  });
}

I am using chromium, can be replaced by chrome, as long as it can solve this problem. I also tried ffmpeg, but still can't, those lost frames seem to be unable to recover.

Upvotes: 2

Views: 672

Answers (1)

Davit Mkrtchyan
Davit Mkrtchyan

Reputation: 469

I had a similar issue, adding videoConstraints helped. If this solution won't work for you, please, just let me know, I will try to figure it out.

P.S. startStream is a callback function.

chrome.tabCapture.capture({
            audio: false,
            video: true,
            videoConstraints: {
                mandatory: {
                    chromeMediaSource: 'tab',
                    minWidth: 640,
                    maxWidth: 640,
                    minHeight: 420,
                    maxHeight: 420
                }
            }
        }, startStream )

Upvotes: 0

Related Questions