如何在React中连续流式播放画布上的视频？

import React, { useEffect, useRef } from 'react';
import videojs from 'video.js';

const VideoPlayer = () => {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  let animationFrameId = null;

  useEffect(() => {
    const videoElement = videoRef.current;
    const canvasElement = canvasRef.current;
    const videoPlayer = videojs(videoElement);

    const context = canvasElement.getContext('2d');
    const renderFrame = () => {
      context.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
      animationFrameId = requestAnimationFrame(renderFrame);
    };

    videoPlayer.on('play', () => {
      animationFrameId = requestAnimationFrame(renderFrame);
    });

    videoPlayer.on('pause', () => {
      cancelAnimationFrame(animationFrameId);
    });

    return () => {
      videoPlayer.dispose();
      cancelAnimationFrame(animationFrameId);
    };
  }, []);

  return (
    <div>
      <video ref={videoRef} className="video-js"></video>
      <canvas ref={canvasRef}></canvas>
    </div>
  );
};

export default VideoPlayer;