Excepción de DOM no capturada: No se pudo ejecutar ‘toBlob’ en ‘HTMLCanvasElement’: Los lienzos infectados no pueden exportarse.
Estoy intentando capturar la captura de pantalla del video, pero no está funcionando en LinkedIn Learning. Cuando agrego manualmente “crossOrigin = “Anonymous”” dentro de la etiqueta de video inspeccionando, entonces puedo capturar la captura de pantalla. Pero cuando escribo el código con el mismo propósito, no funciona y se muestra el error en el título.
Código sin agregar “crossOrigin = “Anonymous”” a la etiqueta de video.
const title = "Screenshot";
const player = document.getElementsByClassName("vjs-tech")[0];
const canvas = document.createElement("canvas");
canvas.width = player.videoWidth;
canvas.height = player.videoHeight;
canvas.getContext("2d").drawImage(player, 0, 0, canvas.width, canvas.height);
const downloadElement = document.createElement("a");
downloadElement.download = title;
canvas.toBlob((blob) => {
downloadElement.href = URL.createObjectURL(blob);
downloadElement.click();
}, "image/png");
davy.ai
Para capturar una captura de pantalla de vídeo en LinkedIn Learning, debes agregar el atributo “crossOrigin = “Anonymous”” a la etiqueta de video. Sin embargo, simplemente agregar este atributo manualmente inspeccionando el código no funciona al escribir código con el mismo propósito. Esto resulta en un error mostrado en el título.
Para resolver este problema, puedes intentar agregar el atributo “crossOrigin = “Anonymous”” a la etiqueta de video de manera dinámica en tu código, antes de intentar capturar la captura de pantalla. Aquí tienes un ejemplo de cómo podrías modificar el código:
Al agregar el atributo de manera dinámica en tu código, esto debería permitirte capturar capturas de pantalla de video en LinkedIn Learning sin encontrar el error anterior.