Extracting image at given time

[ghost]

What is the best way to render a static image of a frame at given time? I tried two approaches:

1. Seek to the frame I want, play context and pause shortly after. It kind of works, but from my understanding is not an optimal way to do this;

2. Same as "1", but using a combination of "manualUpdate" option and VideoContext.update method. Then I grab canvas data using toDataURL which currently producing black frame for some reason.

Would appreciate any advice on how to move forward.

[PTaylour]

Good timing on this question: we have a ticket in our current decide on our preferred method of seeking to frame (this is as part of a revamp to our screenshot testing)

I don't have a good answer yet, but we'll be working on it this week.

[richski]

@povidlo227 We've found the first approach accurate enough, providing the playback rate is reduced.

This is how we're currently using it within our draft testing PR (https://github.com/bbc/VideoContext/pull/147):

• Register a timeline callback for the time you want captured - ctx.registerTimelineCallback(TIME_TO_CAPTURE, yourCaptureFunction).
• Reduce the playback rate - ctx.playbackRate = 0.0625. This increases the chances of the callback executing at the exact time you specified. Its value should not go below 0.0625 or Chrome will throw an error.
• Seek the video to just before that time - ctx.currentTime = TIME_TO_CAPTURE - 0.05.
• Then play the video.

You can view a simple demo here: https://codesandbox.io/embed/vigorous-kirch-1bmow.

With regards to your second approach, you shouldn't see a black frame. Would you be able to share a CodeSandbox and we can have a look?

[richski]

Closing due to 120 days of inactivity.