1

video-react

capture-frame

I'm trying to get a snapshot from a video-react using capture-frame but when I call the function captureFrame(video) it trhows the next.

error:Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

My code is the following:

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 });
  }
Community
  • 1
  • 1
Aldair Bernal Betancur
  • 21
  • 2
  • 4

1 Answers1

1

Basically was solve the error including the crossOrigin in the props of the video-react player just like this:

<Player
   ref={player => { this.player_video = player }}
   crossOrigin={'anonymous'}
/>
Aldair Bernal Betancur
  • 21
  • 2
  • 4