Quiero obtener el primer cuadro del video para que este mismo cuadro sea su vista previa. Importante: el marco debe ser exactamente una imagen, así que uso Canvas. El problema es que Canvas on toDataURL() genera una imagen transparente en blanco y no sé qué hacer al respecto. Lo que es importante: no veo este problema en Firefox . ¿Qué debo hacer para que Canvas comience a generar imágenes normalmente en Chrome? Código de generación:

 let canvas = document.createElement("canvas"); let video = document.createElement("video"); video.src = URL.createObjectURL(file); // file = instance of 'File' video.addEventListener("loadeddata", () => { canvas.height = video.videoHeight; canvas.width = video.videoWidth; let canvas_context = canvas.getContext("2d"); canvas_context.drawImage(video, 0, 0); img.src = canvas.toDataURL(); // It doesn't really matter where the result of toDataURL() is assigned, what matters is that it gives an empty image });

También noté que:

• toBlob() con URL.createObjectURL() da exactamente el mismo resultado
• Cuando pasa la cadena "image/jpeg" a toDataURL() , la imagen se llenará de negro