Streams : Create a snapshot

Here is a description of the different steps to create a snapshot from an available stream.

Create your stream

Check our tutorial on Select Media if you need details about media selection and stream creation

Take snapshot :

Check our Stream API reference to takeSnapshot and SnapshotOptions for optional possibilities

        localStream.takeSnapshot(snapshotOptions)
            .then(function (snapshot) {
                console.log("takeSnapshot OK :", snapshot);
            }).catch(function (error) {
                // error
                console.error('takeSnapshot error :', error);
            });
    

Check the sample source code for more details, but for instance, if you need to set a blur on the image, you can set the snapshotOptions as described here :

        var snapshotOptions = {
            filters: {
                blur: '50px'
            }
        };
    

Thanks to snapshotOptions, you can set different filters on the snapshots such as blur, brightness, contrast, grayscale, sepia ... or you can change the output format : Data URI or Blob and also choose the snapshot resolution.

Live Demo