Tengo un reproductor de video (video.js) en mi aplicación y una función que toma una instantánea del video.
La función crea un lienzo que dibuja la instantánea y convierte el lienzo en un DataURL.
Pero esto no funciona en Safari.
Aparece una pantalla negra en Safari.
la etiqueta de video se parece a:
<video crossorigin="anonymous" playsinline="playsinline" id="player_2140_html5_api" class="vjs-tech" data-setup="{ "inactivityTimeout": 0 }" tabindex="-1" autoplay="autoplay" loop="loop"></video>Esta es la función que crea la instantánea:
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');El dataUrl generado en Chrome es una imagen. El dataUrl generado en el navegador Safari es un rectángulo negro.
En Safari, la salida es negra en lugar de una imagen de la instantánea tomada a través del video, ¿cómo puedo solucionar esto?
Tengo el mismo problema. Llamar a DataURL en safari 15 en adelante (mac, iPad o iPhone) parece devolver ocasionalmente "" una cadena en blanco. Las versiones anteriores de safari funcionan bien. Verifiqué que no exceda los límites de tamaño del lienzo del navegador que devolverían "datos:", pero eso no está causando el problema y está devolviendo una cadena en blanco.
Resolví este problema en iOS... Usé la función setTimeout:
setTimeout(() => { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob(() => { this.snapshotVideo = canvas.toDataURL('image/jpeg'); }); },100);Igual aquí. El problema se vio por primera vez en Safari 15. Antes funcionaba bien con el código cortado.
Vea los últimos comentarios aquí: https://bugs.webkit.org/show_bug.cgi?id=181663 o aquí: https://bugs.webkit.org/show_bug.cgi?id=229611