How to fix the black screen with canvas.toDataURL() on Safari browser?

I have a video player (video.js) in my application, and a function which takes a snapshot of the video.

The function create a canvas which draws the snapshot and convert the canvas into a DataURL.

But this doesn’t work in Safari.

I’m getting a black screen on Safari.

the video tag looks like:

<video crossorigin="anonymous" playsinline="playsinline" id="player_2140_html5_api" class="vjs-tech" data-setup="{ &quot;inactivityTimeout&quot;: 0 }" tabindex="-1" autoplay="autoplay" loop="loop"></video>

This is the function which creates the snapshot:

var canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
var ctx = canvas.getContext('2d');
var video = document.querySelector('video');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
this.snapshotVideo = canvas.toDataURL('image/jpeg', 2.0);

The generated dataUrl in Chrome is an image.
The generated dataUrl in Safari browser is a black rectangle.

In Safari the output is black instead of an image of the taken snapshot via the video, how can I solve this?