Tengo este fragmento de código para dibujar los cuadros de video en un lienzo cada 42 milisegundos. Funciona bien en cualquier plataforma/navegador excepto iOS. En iOS, ningún navegador puede dibujar los cuadros de video en el lienzo, hasta donde lo probamos. No pude entender por qué. ¿Alguien puede ayudar?
// Get React hooks. // https://meta.stackoverflow.com/a/338538/3405291 const {useRef} = React; const {useEffect} = React; function VideoPreview() { const canvasEl = useRef(null); useEffect(()=>{ const timerID = setInterval( () => tick(), 42 // 1000/42 ~ 24 fps. Standard for TV shows? ); return () => { clearInterval(timerID); } }) // Ref: React clock example: // https://reactjs.org/docs/state-and-lifecycle.html function tick() { const v_id = "video"; // https://stackoverflow.com/q/71449615/3405291 const v = document.querySelector(`video#${v_id}, #${v_id} video`); const canvas = canvasEl.current; if (!v || !canvas) { return; } const context = canvas.getContext('2d'); let w = Math.floor(canvas.clientWidth); let h = Math.floor(canvas.clientHeight); canvas.width = w; canvas.height = h; context.drawImage(v, 0, 0, w, h); } return ( <div> <div>Above video frames are drawn on canvas below every 42 msec:</div> <canvas ref={canvasEl}></canvas> </div> ); } ReactDOM.render( < VideoPreview / > , document.querySelector('.react')); @import url("https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video-js.min.css"); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video.min.js"></script> <video class="video-js vjs-theme-fantasy" vjs-big-play-centered muted controls id="video" data-setup="{}" style="width: 16rem; height: 9rem"> <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"> </video> <div class='react'></div>No es compatible con iOS
dibujar imagen:
The image object can be an img element, a canvas element, or a video element. Use of the video element is not supported in Safari on iOS, however.Fuente: https://developer.apple.com/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage