从视频反应中拍摄快照

Question

视频反应

捕获帧

我正在尝试使用 捕获帧 从 视频反应 中获取快照，但是我将其称为captureFrame（video）函数，将其转换为下一个。

错误：未捕获的DOMException：无法在上执行'toDataURL' “ HTMLCanvasElement”：可能无法导出污染的画布。

我的代码如下：

captureSnapshot = () => {
    const video = this.player_video.video.video;
    video.setAttribute('crossOrigin', 'anonymous');
    console.log(video);
    
    const buf = captureFrame(video);
    const image = document.createElement('img');
    image.setAttribute('crossOrigin', 'anonymous');
    image.setAttribute('src', window.URL.createObjectURL(new window.Blob([buf])));
    
    
    console.log('captured frame src', image);
    this.setState({ image: image.src });
  }

Answer 1

基本上是在 video-react 播放器的道具中解决包括 crossOrigin 的错误，如下所示：

<Player
   ref={player => { this.player_video = player }}
   crossOrigin={'anonymous'}
/>