Quisiera poner el video sobre la foto para que el usuario pueda visualizarse en el mismo cuadro
var constraints;
var imageCapture;
var mediaStream;
var grabFrameButton = document.querySelector('button#grabFrame');
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;
videoSelect.onchange = getStream;
zoomInput.oninput = setZoom;
navigator.mediaDevices.enumerateDevices()
.then(gotDevices)
.catch(error => {
console.log('enumerateDevices() error: ', error);
})
.then(getStream);
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);
}
}
}
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();
}
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);
});
}
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
});
}
.hidden {
display: none;
}
video {
width: 159px;
height: 100px;
}
canvas {
width: 259px;
height: 200px;
}
<div class="contenedor">
<button id="grabFrame">Tomar Foto</button>
<div class="select">
<label for="videoSource">Resolucion de la imagen: </label>
<select id="videoSource"></select>
</div>
<input class="hidden" id="zoom" type="range" step="20">
<video autoplay class="hidden"></video>
<img>
<canvas class="hidden"></canvas>
</div>
Asi es como esta
Asi es como deberia verse