时间戳

首页 > 解决方案 > 从视频反应中拍摄快照

javascript - 从视频反应中拍摄快照

问题描述

视频反应

捕获帧

我正在尝试使用捕获帧从视频反应中获取快照，但是当我调用函数 captureFrame(video) 时，它会触发下一个。

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

我的代码如下：

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 });
  }

标签： javascripthtmlreactjsvideovideo-reactjs

解决方案

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

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

推荐阅读