Our JavaScript webcam API's "onPreviewAvailable" option lets you submit a preview/still image together with the user generated video. You can use such a preview image to display in your media library and/or on your website to show visitors what the video contains - similar to how YouTube and other video platforms display a still image as a placeholder for a video before it plays back.

"onPreviewAvailable" provides a callback function that we can call with the preview image, once it becomes available. Here is an example of how this works:

$('.some-selector').clipchamp({
     // other options go here (see https://clipchamp.com/en/documentation/getting-started)
     onPreviewAvailable: function(previewImageBlob) {
     // your code to process, show, upload... the preview image goes here
   }
}); 


That is to say, the Clipchamp API passes an instance of a JavaScript "Blob" object to you, which contains the preview image (in JPEG format). You are then free to use that preview for a variety of purposes, including to show it on a website:

onPreviewAvailable: function(previewImageBlob) { 
    $('.some-other-selector').append('<img src="'+URL.createObjectURL(previewImageBlob)+'"></img>');  
}  

You will have to upload that file to the same (or optionally another) folder in your cloud storage, for instance a bucket in AWS S3. We do not currently support uploading it alongside the video on our end.

Did this answer your question?