webm-writer-js icon indicating copy to clipboard operation
webm-writer-js copied to clipboard

Support for OffscreenCanvas

Open nahkd123 opened this issue 4 years ago • 2 comments

It would be nice if webm writer support OffscreenCanvas, because I'm trying to do render stuffs inside web worker. As far I know, you can get the WebP blob by using OffscreenCanvas#convertToBlob({type: "image/webp"})

nahkd123 avatar Apr 30 '20 08:04 nahkd123

You can pass the Blob from convertToBlob() to FileReader or FileReaderSync readAsDataURL(), then pass the data URL to addFrame()

(async _ => {
  const osc = new OffscreenCanvas(1,1);
  const osctx = osc.getContext('2d');
  const blob = await osc.convertToBlob({type:'image/webp'});
  const frs = new FileReaderSync();
  const canvas = frs.readAsDataURL(blob);
  videoWriter.addFrame(canvas);
})();

guest271314 avatar Jul 25 '20 16:07 guest271314

I use the WebMWriter with an OffscreenCanvas inside a WebWorker and came across the exception:

Failed to find VP8 keyframe in WebP image, is this image mistakenly encoded in the Lossless WebP format?

To solve the issue I changed the quality of the conversion to

const blob = await osc.convertToBlob({type:'image/webp', quality: 0.9999});

dayaftereh avatar Jan 27 '22 10:01 dayaftereh