CODEWITHSUNDEEP
javascripthtmliosreactjshtml5-canvas
Megidd
Megidd

Reputation: 7938

React component to draw video frames continuously to canvas: doesn't work on iOS

I have this code snippet to draw the video frames on a canvas every 42 milliseconds. It works fine on any platform/browser except iOS. On iOS, no browser is able to draw the video frames on canvas, as far as we test. I couldn't figure out why. Can anybody help?

// 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>

Upvotes: 2

Views: 1559

Answers (1)

nwparker
nwparker

Reputation: 82

It's not supported for iOS

drawimage:

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.

Source: https://developer.apple.com/documentation/webkitjs/canvasrenderingcontext2d/1630282-drawimage

Upvotes: 2

Related Questions