thenickdude / webm-writer-js

JavaScript-based WebM video encoder for Google Chrome
272 stars 43 forks source link

Support for OffscreenCanvas #11

Open nahkd123 opened 4 years ago

nahkd123 commented 4 years ago

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"})

guest271314 commented 4 years ago

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);
})();
dayaftereh commented 2 years ago

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