Available in Chrome 87+ | View on GitHub | Browse Samples
The ImageCapture Web API allows web developers to change the zoom setting of the camera.
navigator.mediaDevices.getUserMedia({video: { zoom: true }})
.then(mediaStream => {
document.querySelector('video').srcObject = mediaStream;
const [track] = mediaStream.getVideoTracks();
const capabilities = track.getCapabilities();
const settings = track.getSettings();
const input = document.querySelector('input[type="range"]');
// Check whether zoom is supported or not.
if (!('zoom' in settings)) {
return Promise.reject('Zoom is not supported by ' + track.label);
}
// Map zoom to a slider element.
input.min = capabilities.zoom.min;
input.max = capabilities.zoom.max;
input.step = capabilities.zoom.step;
input.value = settings.zoom;
input.oninput = function(event) {
track.applyConstraints({advanced: [ {zoom: event.target.value} ]});
}
input.hidden = false;
})
.catch(error => ChromeSamples.log('Argh!', error.name || error));