feat(*): support transparent webm

src/backends/beamcoder.ts

@@ -22,13 +22,24 @@ const createDecoder = ({
     streamIndex: number;
     threadCount: number;
 }): Decoder => {
-    return beamcoder.decoder({
-        demuxer: demuxer,
+    const commonParams = {
         width: demuxer.streams[streamIndex].codecpar.width,
         height: demuxer.streams[streamIndex].codecpar.height,
-        stream_index: streamIndex,
         pix_fmt: demuxer.streams[streamIndex].codecpar.format,
         thread_count: threadCount,
+    };
+
+    if (demuxer.streams[streamIndex].codecpar.name === 'vp8') {
+        return beamcoder.decoder({
+            ...commonParams,
+            name: 'libvpx',
+        });
+    }
+
+    return beamcoder.decoder({
+        ...commonParams,
+        demuxer: demuxer,
+        stream_index: streamIndex,
     });
 };
 

test/framefusion.test.ts

@@ -145,6 +145,27 @@ describe('FrameFusion', () => {
         await extractor.dispose();
     });
 
+    it.only('can get frame from webm with alpha', async() => {
+        // Arrange
+        const extractor = await BeamcoderExtractor.create({
+            inputFileOrUrl: './test/samples/webm-with-alpha.webm',
+            threadCount: 8,
+        });
+
+        // Act and Assert
+        const imageData = await extractor.getImageDataAtTime(100);
+        const canvasImageData = createImageData(imageData.data, imageData.width, imageData.height);
+
+        const canvas = createCanvas(imageData.width, imageData.height);
+        const ctx = canvas.getContext('2d', { alpha: true });
+
+        ctx.putImageData(canvasImageData, 0, 0);
+        expect(canvas.toBuffer('image/png')).toMatchImageSnapshot();
+
+        // Cleanup
+        await extractor.dispose();
+    });
+
     it('can get the same frame multiple times', async() => {
         // When smaller increments are requested, the same frame can be returned multiple times. This happens when the
         // caller plays the video at a lower playback rate than the source video.