How to get KeyFrame in Output.

[MateusNGF]

Hello, I need to render frames on the screen of the conversion output. but a mistake when running. but a thown erro when running:

FataError: Failed to execute 'decode' on 'VideoDecoder': A key frame is required after configure() or flush().

How to know when it is KeyFrame ?

        const input = new Input({
            source: new BlobSource(file),
            formats: ALL_FORMATS,
        });

        const canvasReference = new CanvasRender(canvas);

        const decoder = new VideoDecoder({
            error: (err) => {
                console.error("VideoDecoder error:", err);
                self.close();
            },
            output: canvasReference.getRenderer.bind(canvasReference),
        })

        const videoDecoderConfig: VideoDecoderConfig = {
            codec: "vp09.00.10.08",
            codedWidth: 320,
            codedHeight: 240,
            hardwareAcceleration: "prefer-hardware",
            optimizeForLatency: true
        }

        const { supported: isCodecSupported } = await VideoDecoder.isConfigSupported(videoDecoderConfig);
        if (!isCodecSupported) {
            console.log("Codec not supported");
            self.close();
        }

        decoder.configure(videoDecoderConfig);

        const output = new Output({
            format: new WebMOutputFormat(),
            target: new StreamTarget(
                new WritableStream({
                    write: async (chunk) => {

                      

                        try {

                            decoder.decode(new EncodedVideoChunk({
                                data: chunk.data,
                                timestamp: performance.now(),
                                type: "delta",
                                duration: 1e4
                            }));


                            self.postMessage({ chunkEnconded: chunk });
                        } catch (e) {
                            console.warn(e)
                        }
                    },
                    close: async () => {
                        await output.finalize();
                        decoder.close();
                    },
                })
            ),
        });

        const conversion = await Conversion.init({
            input,
            output,
            video: {
                width: 320,
                codec: "vp9",
                bitrate: QUALITY_VERY_LOW,
                fit: "contain",
            },
            audio: {
                bitrate: 32e3,
            },
        });

[Vanilagy]

What you're trying will not work. The StreamTarget emits chunks of the output file, not of the output codec. Even if you're used type: 'key', you'd be running into decoder errors.

What you're trying to do isn't possible yet in Mediabunny using the Conversion API. I agree this should be possible though, so could you describe exactly what you want to do in more detail? Do you want to preview the video while it's exporting?

So I know what kind of feature we're looking for here.

[MateusNGF]

Hello, Vanilagy. Yes, I would like to generate a preview of the output as the data is finish convertion
.

[Vanilagy]

Got it. Yes, this isn't possible just yet with the Conversion API. For now, you'll need to show a simple progress bar. But noted, I'm adding this to my to-do list, this is important.