html5 camera is blurry - getuserMedia autofocus not working - html

Question

Did somebody try HTML5 video for capturing image from camera on mobile and have problem with blurry image? I try it on Samsung phone where image was sharp, and on LG G4 where image was blurry (android browser and Chrome on both mobile phones).
Has somebody this experience or can explain solution? Can some phones has these problems?
There is snippet of code which I use:
function startCamera(newSource) {
if (newSource) {
var constraints = {
audio: false,
video: {
optional: [
{ sourceId: newSource },
]
}
};
addVideoAndCanvas();
navigator.getUserMedia(constraints, onMediaSuccess, onMediaError);
}
}
function addVideoAndCanvas() {
self.video = $('<video muted autoplay>');
self.canvas = $('<canvas id="qr-canvas" class="hide">');
$('.modal-body .video-container', self.root).append(self.video).append(self.canvas);
}
function onMediaSuccess(stream) {
self.stream = stream;
self.video[0].src = (window.URL && window.URL.createObjectURL(stream)) || stream;
self.video[0].onloadeddata = function () {
self.canvas[0].height = self.video[0].videoHeight;
self.canvas[0].width = self.video[0].videoWidth;
scan();
}
}
function onMediaError(error) {
}
function scan() {
if (self.stream) {
try {
var ctx = self.canvas[0].getContext('2d');
ctx.drawImage(self.video[0], 0, 0);
} catch (e) {
setTimeout(scan, 20);
}
} else {
setTimeout(scan, 20);
}
}

Answer 1

Probably waiting on folowing spec: https://w3c.github.io/mediacapture-image/index.html#FocusMode