"InvalidStateError: Canvas has no frame" when rendering in Safari

[billnye2]

Hello,

First off really great library. I'm sure this took a load of time to make and it's super cool to render videos in the browser. I've run into an issue when running the render function in Safari 17.3.1 macOS 14.3.1.

The error is: export error InvalidStateError: Canvas has no frame and it appears to occur from a VideoFrame object.

Any idea what could be causing the issue? Does it only work in super up-to-date versions of Safari or macOS?

Thank you for your time.

EDIT: I believe it's this line of code where the error stems from

core/src/encoders/webcodecs.video.ts

Line 92 in 04032f1

const videoFrame = new VideoFrame(renderer.canvas, {

[k9p5]

Hey, thanks for the kind words! Glad you’re enjoying the library.

The InvalidStateError: Canvas has no frame error likely stems from an issue with VideoFrame, which might be caused by an unsupported codec in Safari. Safari has stricter codec support compared to Chrome, so certain video formats may not work as expected.

Can you try rendering with different video files (e.g., H.264-encoded MP4s) and see if the issue persists?

Let me know what you find, and we can dig deeper if needed.