How to capture the video frame when video is paused?

There is a simple tool capture-video-frame.

I can use this tool to capture the HTML5 video frame easily with native video tag.

but I don’t know how to capture video frame with react-player.

May you please give me a few hints or suggestions?

thanks

[cookpete]

Hey @johnking, you can get the <video> element using the getInternalPlayer() method.

Given a ReactPlayer component like this:

<ReactPlayer 
  ref={player => { this.player = player }}
  url="https://cdn.rawgit.com/mediaelement/mediaelement-files/4d21a042/big_buck_bunny.mp4" 
  config={{ file: { attributes: {
    crossorigin: 'anonymous'
  }}}}
/>

You can use captureVideoFrame like so:

const frame = captureVideoFrame(this.player.getInternalPlayer())

See working example on jsFiddle.

Notice the extra config to add the crossorigin attribute to the <video>. Your video server will also need to support CORS correctly otherwise you will see an error:

Failed to load http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://fiddle.jshell.net' is therefore not allowed access.

For more info: http://overengineer.net/enabling-cors-for-html5-video-element-screenshots

[Pieterism]

When I try this solution i always get following message:

captureVideoFrame is not defined no-undef

any suggestions what causes this and how to solve?