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

Black-Hole

unread,

Feb 21, 2019, 1:15:13 AM2/21/19

to Chromium Extensions

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();
  });
}

Black-Hole

unread,

Feb 21, 2019, 1:21:00 AM2/21/19

to Chromium Extensions

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.

在 2019年2月21日星期四 UTC+8下午2:15:13，Black-Hole写道：

Simeon Vincent

unread,

Feb 21, 2019, 10:16:32 PM2/21/19

to Chromium Extensions

I'm not aware of a good way to achieve what you're looking for using either web APIs or extension APIs.

The best solution I can think of (and it's not great) is to capture raw frame data as described here and to manually assemble a series of frames as a lossless video in either JS (😖) or using other software (😶).

Simeon

Chrome Developer Advocate

Black-Hole

unread,

Feb 22, 2019, 12:25:45 AM2/22/19

to Chromium Extensions

Thank you very much for your answer, but it didn't help me.

I went to the documentation of the webm project and found that they provide a lossless api. I wonder if the Chromium team will integrate this api into the extension api?

Webm documentation on lossless api: https://www.webmproject.org/docs/encoder-parameters/