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