var constraints;
var imageCapture;
var mediaStream;
var grabFrameButton = document.querySelector('button#grabFrame');
var takePhotoButton = document.querySelector('button#takePhoto');
var canvas = document.querySelector('canvas');
var img = document.querySelector('img');
var video = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
var zoomInput = document.querySelector('input#zoom');
grabFrameButton.onclick = grabFrame;
takePhotoButton.onclick = takePhoto;
videoSelect.onchange = getStream;
zoomInput.oninput = setZoom;
// Get a list of available media input (and output) devices
// then get a MediaStream for the currently selected input device
navigator.mediaDevices.enumerateDevices()
.then(gotDevices)
.catch(error => {
console.log('enumerateDevices() error: ', error);
})
.then(getStream);
// From the list of media devices available, set up the camera source <select>,
// then get a video stream from the default camera source.
function gotDevices(deviceInfos) {
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
console.log('Found media input or output device: ', deviceInfo);
var option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || 'Camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
}
}
}
// Get a video stream from the currently selected camera source.
function getStream() {
if (mediaStream) {
mediaStream.getTracks().forEach(track => {
track.stop();
});
}
var videoSource = videoSelect.value;
constraints = {
video: {
deviceId: videoSource ? {
exact: videoSource
} : undefined
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(gotStream)
.catch(error => {
console.log('getUserMedia error: ', error);
});
}
// Display the stream from the currently selected camera source, and then
// create an ImageCapture object, using the video from the stream.
function gotStream(stream) {
console.log('getUserMedia() got stream: ', stream);
mediaStream = stream;
video.srcObject = stream;
video.classList.remove('hidden');
imageCapture = new ImageCapture(stream.getVideoTracks()[0]);
getCapabilities();
}
// Get the PhotoCapabilities for the currently selected camera source.
function getCapabilities() {
imageCapture.getPhotoCapabilities().then(function(capabilities) {
console.log('Camera capabilities:', capabilities);
if (capabilities.zoom.max > 0) {
zoomInput.min = capabilities.zoom.min;
zoomInput.max = capabilities.zoom.max;
zoomInput.value = capabilities.zoom.current;
zoomInput.classList.remove('hidden');
}
}).catch(function(error) {
console.log('getCapabilities() error: ', error);
});
}
// Get an ImageBitmap from the currently selected camera source and
// display this with a canvas element.
function grabFrame() {
imageCapture.grabFrame().then(function(imageBitmap) {
console.log('Grabbed frame:', imageBitmap);
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
canvas.classList.remove('hidden');
}).catch(function(error) {
console.log('grabFrame() error: ', error);
});
}
function setZoom() {
imageCapture.setOptions({
zoom: zoomInput.value
});
}
// Get a Blob from the currently selected camera source and
// display this with an img element.
function takePhoto() {
imageCapture.takePhoto().then(function(blob) {
console.log('Took photo:', blob);
img.classList.remove('hidden');
img.src = URL.createObjectURL(blob);
}).catch(function(error) {
console.log('takePhoto() error: ', error);
});
}
.hidden {
display: none;
}
button {
margin: 0 10px 20px 0;
width: 99px;
}
button:last-of-type {
margin: 0;
}
canvas {
display: block;
margin: 0 0 20px 0;
}
img {
display: block;
margin: 0 0 20px 0;
}
input#zoom {
margin: 0 0 20px 0;
width: 100%;
}
.borderBelow {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
}
video {
margin: 0 12px 20px 0;
vertical-align: top;
}
@media (max-width: 500px) {
button {
font-size: 0.8em;
width: calc(33% - 5px);
}
}
@media (max-width: 720px) {
video {
margin: 0 10px 10px 0;
}
}
<div id="container">
<div>
<button id="grabFrame">Grab Frame</button>
<button id="takePhoto">Take Photo</button>
<div class="select">
<label for="videoSource">Video source: </label>
<select id="videoSource"></select>
</div>
<input class="hidden" id="zoom" type="range" step="20">
</div>
<video autoplay class="hidden"></video>
<img>
<canvas class="hidden"></canvas>
</div>