add exportImage

[ghost]

Is there a way to programmatically get a frame of the recorded video data to send to a server & use as a thumbnail? I apologize if this question has been answered elsewhere. It looks like videojs or videojs-record does this for you to set the thumbnail of the video in the browser once you've finished recording. But I couldn't tell how from looking at the source

[thijstriemstra]

@kylemadkins you can take a snapshot of the video element at any time, e.g.

// create new canvas
var canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.getElementsByTagName('body')[0].appendChild(canvas);

// draw video frame
var context = canvas.getContext('2d');
context.drawImage(player.record().mediaElement, 0, 0, canvas.width, canvas.height);

// download image
canvas.toBlob(function(blob){
    console.log(blob);
    // send to server here..
  },'image/png');

videojs-wavesurfer (used for audio-only in videojs-record) has an exportImage method to save image of the waveform, guess that would be useful in videojs-record as well to grab a frame of the video instead.

[ghost]

Thank you so much! I didn't know that mediaElement existed. And yeah I think that would be useful. Is there any way I could help out with that?

[thijstriemstra]

@kylemadkins add an exportImage method in videojs.record.js and use a switch statement to handle the various cases (audio-only, video-only, audio-video) etc. Then open a pull request we can review.