I have a web app with a photo capturing feature via webcam. This functionality always behaved very well in Chrome and Mozilla Firefox, but since yesterday the following bug is appearing in the Mozilla console when I click on "Allow access to the webcam" and the camera image is simply not displayed.
TheJavascriptcodeforcameraactivationandphotocaptureisasfollows:
varvideo=document.getElementById("video"),
canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
photo = document.getElementById("photo"),
vendorUrl = window.URL || window.webkitURL;
function abrirModalFoto() {
$("#modalFoto").show();
navigator.getMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
video.src = vendorUrl.createObjectURL(stream);
video.play();
},
function(error) {
console.log(error);
}
);
}
var baseImage = "";
function capturarFoto() {
$("#btn-cancelar-foto").show();
$("#btn-capturar-foto").hide();
$("#btn-salvar-foto").show();
$("#video").hide();
context.drawImage(video, 0, 0, 500, 400);
baseImage = canvas.toDataURL("image/png");
photo.setAttribute("src", baseImage);
}
Obs. 1: The curious fact is that the browser behaves as if the webcam was active (because the light is on)
Obs2: In Chrome everything works perfectly