getSnapshot Player API function returns blank (webp/png) or black(jpeg)

Support
, ,
1

Manage to get the snapshot with these settings on Safari:

Now the returned base64 images are black (jpeg) or blank (set to webp, got png).

API works fine on other browsers.

Safari 16.2 on Mac mini M1 2020, MacOS 12.6.2 - NOT WORKING
Safari 16.1 on MacBook Air 2019, MacOS 13 - WORKING

Tried to set directly base64 to the lower-canvas element, tried to set the video element in the same canvas with drawImage, and set background-image CSS prop until realized that getSnapshot is not returning a valid snapshots in above mentioned case.

2

Hi,

As you already know from the thread you linked, browsers can prevent access to the video frames (e.g. in the default setup of Safari, we’re getting The operation is insecure reject message from the browser).

I can’t really reproduce the problem with the black or blank image though (using Safari 16.3 on macOS 13.2). Could you please let me know if you see this problem also on Bitmovin Player Demo? Thanks!

Regarding you comment

set to webp, got png

The player depends on browser support. While Safari supports WebP images in general, it doesn’t support WebP in Canvas-related methods (which are used to create the snapshot).

3

Hi Daniel,
Thank you for your response. This is the result with your sample.

image
image1817×825 192 KB

4

Another setup:

image (7)
image (7)1920×1063 127 KB

5

Sorry, I ended up uploading the wrong version of that page :man_facepalming: sorry for the confusion. Can you please try again (same link)?

6

By the way, this isn’t a very widely used feature (for example, because it doesn’t work with DRM protected content) so I’m really curious to learn more about your use case for this!

7

Hi Daniel, thank you for the updates.
The first configuration with mac mini is not displaying frame. The console outputs the img element and the img element is present in HTML. But the base64 set as the src is transparent PNG.

The use case is capturing a frame from video so it can be edited/annotated by a user in a canvas element (drawing arrows, writing text on the image, etc…)

8

Thanks for sharing this with me.

After further looking into this, I’m afraid there’s not much we can do. It seems that some system/browser configurations don’t allow this use case. I haven’t seen the transparent PNG myself though, in my tests it either works, or the browser throws an error at us.