After being searching in google and here. I can't figure out how to get a picture from my video camera. My web app has a canvas and a camera button where the user clicks and open a video screen with a button ready to shot and keep a picture on the canvas. The videocamera Works preatty fine. Here is the code:
$("#camara").on("click",function(){
var constraints={ video: true };
var video = $("#video")[0];
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onended = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
}).catch(function(error) {
if (error.name === 'ConstraintNotSatisfiedError') {
errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
constraints.video.width.exact + ' px is not supported by your device.');
} else if (error.name === 'PermissionDeniedError') {
errorMsg('Permissions have not been granted to use your camera and ' +
'microphone, you need to allow the page access to your devices in ' +
'order for the demo to work.');
}
errorMsg('getUserMedia error: ' + error.name, error);
});
The code above Works fine. The problem comes when I shot the camera and I try to keep the picture on canvas. This is the code I am using:
$("#snap").on("click", function(){
var ctx=canvas.getContext('2d');
var video=$("#video")[0];
ctx.drawImage(video,0,0,canvas.width,canvas.height);
});
The variable canvas is a global variable which I also use for others porpuses. The problem here is that I don't know how to get a picture from the video camera. I have also tried to use an Image Object and load the picture in the src attribute, but it didn't work either. Any idea would be grateful.
