0

I am trying to record a video from a canvas, even when the user navigates from the tab (either by clicking another tab or minimizing the window). I am using a timer that runs even when the user has the tab blurred to render the canvas (I know this timer fires when the tab is blurred because I've tested it). But when I attach the MediaStream from canvas.captureStream() to the MediaRecorder object, the BlobEvent from the ondataavailable callback has length 0.

Below is an example of what I'm trying to do.

let canvas = document.getElementById('canvas');

// ...Assume that I'm rendering some kind of video/animation to the canvas here...

let stream = canvas.captureStream();

let mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs="opus,vp8"' });
mediaRecorder.start();

mediaRecorder.ondataavailable = (event) => {
  // This event's data is length 0 when the tab is blurred
  console.log(event);
}

I understand that ondataavailable does not normally fire when the tab is backgrounded, I've gotten it to by using the requestData function on MediaRecorder, please assume that it does.

Jacob Greenway
  • 461
  • 2
  • 8
  • 15
  • But there are so much things that happens with optimizer that even though we can hack our script to fire at normal rate when blurred, the canvas may not get painted anyway, and the recorder has nothing to chew on (that's the case for current FF at least). – Kaiido Jun 29 '19 at 22:14
  • @Kaiido So there's no way to actually grab the data from the canvas when the tab is blurred? Also this is not a duplicate, the other question you linked talks specifically about `requestAnimationFrame` and rendering. I am trying to record the media stream from `captureCanvas`. – Jacob Greenway Jun 29 '19 at 22:16
  • Well you can grab the data of canvas (e.g getImageData would work), but iit's not passed to the mediastream, so neither to the MediaRecorder... There is an open bug for FF though I can't find it rn. – Kaiido Jun 29 '19 at 22:19
  • How would I go about using `getImageData` though, isn't that specifically to render part of the canvas to another part? Edit: If you use an offscreen canvas you can use the `transferToImageBitmap` function and get a full bitmap image from the canvas. – Jacob Greenway Jun 29 '19 at 22:23
  • No you don't get me. We can fire a js event even when blurred as shown in the liked answer. We can this draw on the canvas too, and use its methods to grab the frame, like getImageData, whoch retirns an ImageData with all the pixels info, or toBlob and toDataURL which will generate an image file. However the internal mechanics of feeding the MediaStream won't work. And thus you won't have anything recorded either. The gap is in somwhere we have no control: between the canvas and the MediaStream. – Kaiido Jun 29 '19 at 22:47

0 Answers0