Mi proyecto requiere que obtenga una captura de pantalla del video por marcos aleatorios.

 let oVideo = document.createElement("video"); oVideo.setAttribute("src", this.localVideoURL); oVideo.setAttribute("controls", "controls"); oVideo.currentTime = this.randomSecond; //Set the first second frame oVideo.load(); oVideo.addEventListener("canplay", function (event) { let oCanvas = document.createElement("canvas"); oCanvas.width = oVideo.videoWidth; oCanvas.height = oVideo.videoHeight; oCanvas.getContext("2d").drawImage(oVideo, 0, 0, oCanvas.width, oCanvas.height); let base64 = oCanvas.toDataURL("image/png"); let frameCoverDom = document.getElementById("frameCoverDom"); frameCoverDom.src = base64; });

Este código funciona muy bien en Windows y Android excepto iOS. Algunos de los iPhone XR de mi amigo también funcionan perfectamente. La mayoría de los iPhone que probé tenían una imagen en blanco. Después de comparar el teléfono de mi amigo y el mío, descubrí que había una diferencia en let base64 = oCanvas.toDataURL("image/png") .

toDataURL devuelve:

 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAI4CAYAAAAbCTCbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAABQKADAAQAAAABAAACOAAAAAAtaf5UAAAMfElEQVR4Ae3QMQEAAADCoPVPbQZ/iEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwI....

Este código base64 contiene muchos "ABAwYMGDBgwI", y cuando lo abro en el navegador, es una imagen en blanco con el ancho y la altura adecuados.