React-player: How to capture the video frame when video is paused?

[johnking]

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

[johnking]

thanks @CookPete !

[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?

[pegasus1982]

@Pieterism , yeah, I have faced such issue.
After searching, I found this repository
https://github.com/ilkkao/capture-video-frame/blob/master/capture-video-frame.js

Once I use this, I could resolve this issue.
Actual code is below:

    function captureVideoFrame(video, format, quality) {
        if (typeof video === 'string') {
            video = document.getElementById(video);
        }

        format = format || 'jpeg';
        quality = quality || 0.92;

        if (!video || (format !== 'png' && format !== 'jpeg')) {
            return false;
        }

        var canvas = document.createElement("CANVAS");

        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;

        canvas.getContext('2d').drawImage(video, 0, 0);

        var dataUri = canvas.toDataURL('image/' + format, quality);
        var data = dataUri.split(',')[1];
        var mimeType = dataUri.split(';')[0].slice(5)

        var bytes = window.atob(data);
        var buf = new ArrayBuffer(bytes.length);
        var arr = new Uint8Array(buf);

        for (var i = 0; i < bytes.length; i++) {
            arr[i] = bytes.charCodeAt(i);
        }

        var blob = new Blob([ arr ], { type: mimeType });
        return { blob: blob, dataUri: dataUri, format: format };
    };