Good day!
We have small project for get and view screenshots from camera, and after upgrading to 50.0 we have some problems:
1) How it works:
User open web-application and give permissions to use camera. Next he can use camera to get a screenshot. If he do it he get image on screen.
2) Code
// get user media
if(navigator.mozGetUserMedia)
{
moz=true;
navigator.mozGetUserMedia({video: {optional: [{sourceId: idcam}]}, audio: false}, success, error);
}
';
// camera stream to view
function success(stream) {
v=document.getElementById("v");
if(moz)
{
v.mozSrcObject = stream;
v.play();
console.log("Success in moz")
}
}
// function to capture image from camera to canvas and insert it to
$scope.getScreenshot = function(){
var video = document.getElementById("v");
var canvas = document.getElementById("qr-canvas");
var gc = canvas.getContext("2d");
gc.drawImage(video, 0, 0, canvas.width, canvas.height);
$scope.outputImg = canvas.toDataURL();
};
<canvas id="qr-canvas" style="width:100vw;height:100vh;position: fixed;display:none;"></canvas>
3) Problem:
All work good in firefox 49 at all devices, and in firefox 50 at all devices except Lenovo B8080-H on Android 4.4.2. At this device we get green square instead screenshot. I think that something wrong in drawImage method on this device.
Also in browser i get warning that "navigator.mozGetUserMedia is change to navigator.mediaDevices.getUserMedia", but if I try to use navigator.mediaDevices.getUserMedia I don't get notification to allow permissions to camera
Good day!
We have small project for get and view screenshots from camera, and after upgrading to 50.0 we have some problems:
1) How it works:
User open web-application and give permissions to use camera. Next he can use camera to get a screenshot. If he do it he get image on screen.
2) Code
// get user media
if(navigator.mozGetUserMedia)
{
moz=true;
navigator.mozGetUserMedia({video: {optional: [{sourceId: idcam}]}, audio: false}, success, error);
}
<!-- html5 tag with our video stream -->
<video id="v" autoplay style="width:100vw;height:100vh;position: fixed;left:0px;bottom:0px;background-color: black;z-index:10"></video>';
// camera stream to view
function success(stream) {
v=document.getElementById("v");
if(moz)
{
v.mozSrcObject = stream;
v.play();
console.log("Success in moz")
}
}
// function to capture image from camera to canvas and insert it to <img>
$scope.getScreenshot = function(){
var video = document.getElementById("v");
var canvas = document.getElementById("qr-canvas");
var gc = canvas.getContext("2d");
gc.drawImage(video, 0, 0, canvas.width, canvas.height);
$scope.outputImg = canvas.toDataURL();
};
<canvas id="qr-canvas" style="width:100vw;height:100vh;position: fixed;display:none;"></canvas>
<img ng-src="{{ outputImg }}" style="width:100vw;height:100vh;position: fixed;z-index:10;display: block;left: 0px;top:0px">
3) Problem:
All work good in firefox 49 at all devices, and in firefox 50 at all devices except Lenovo B8080-H on Android 4.4.2. At this device we get green square instead screenshot. I think that something wrong in drawImage method on this device.
Also in browser i get warning that "navigator.mozGetUserMedia is change to navigator.mediaDevices.getUserMedia", but if I try to use navigator.mediaDevices.getUserMedia I don't get notification to allow permissions to camera