This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The MediaSettingsRange
interface of the the MediaStream Image Capture API provides the possible range and value size of PhotoCapabilities.imageHeight
and PhotoCapabilities.imageWidth
. A PhotoCapabilities
object can be retrieved by calling ImageCapture.PhotoCapabilities()
.
MediaSettingsRange.max
MediaSettingsRange.min
MediaSettingsRange.step
The following example, extracted from Chrome's Image Capture / Photo Resolution Sample, uses the results from getPhotoCapabilities().imageWidth
to modify the size of an input range.
const input = document.querySelector('input[type="range"]'); var imageCapture; navigator.mediaDevices.getUserMedia({video: true}) .then(mediaStream => { document.querySelector('video').srcObject = mediaStream; const track = mediaStream.getVideoTracks()[0]; imageCapture = new ImageCapture(track); return imageCapture.getPhotoCapabilities(); }) .then(photoCapabilities => { const settings = imageCapture.track.getSettings(); input.min = photoCapabilities.imageWidth.min; input.max = photoCapabilities.imageWidth.max; input.step = photoCapabilities.imageWidth.step; return imageCapture.getPhotoSettings(); }) .then(photoSettings => { input.value = photoSettings.imageWidth; }) .catch(error => console.log('Argh!', error.name || error));
Specification | Status | Comment |
---|---|---|
MediaStream Image Capture The definition of 'MediaSettingsRange' in that specification. | Working Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 59 | ? | ? | ? | 46 | ? |
max
|
59 | ? | ? | ? | 46 | ? |
min
|
59 | ? | ? | ? | 46 | ? |
step
|
59 | ? | ? | ? | 46 | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 59 | 59 | ? | ? | 46 | ? | ? |
max
|
59 | 59 | ? | ? | 46 | ? | ? |
min
|
59 | 59 | ? | ? | 46 | ? | ? |
step
|
59 | 59 | ? | ? | 46 | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaSettingsRange