Skip to content

Changed the camera constraint for QRcode scanning #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cynnij wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Changed the camera constraint for QRcode scanning #28

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c24932
Changed the camera constraint for QRcode scanning, use back camera in…
cynnij May 8, 2018
0bb6237
Remove unnecessary changes
cynnij May 8, 2018
8d1dd1a
Improve performance
cynnij May 8, 2018
779c211
remove require
cynnij May 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 79 additions & 75 deletions qr-scanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,88 @@
if (require){
if (!angular) var angular = require('angular');
if (!qrcode) var qrcode = require('jsqrcode');
}

(function() {
'use strict';
'use strict';

angular.module('qrScanner', ["ng"]).directive('qrScanner', ['$interval', '$window', function($interval, $window) {
return {
restrict: 'E',
scope: {
ngSuccess: '&ngSuccess',
ngError: '&ngError',
ngVideoError: '&ngVideoError'
},
link: function(scope, element, attrs) {

window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var height = attrs.height || 300;
var width = attrs.width || 250;

var video = $window.document.createElement('video');
video.setAttribute('width', width);
video.setAttribute('height', height);
video.setAttribute('style', '-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);');
var canvas = $window.document.createElement('canvas');
canvas.setAttribute('id', 'qr-canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvas.setAttribute('style', 'display:none;');

angular.element(element).append(video);
angular.element(element).append(canvas);
var context = canvas.getContext('2d');
var stopScan;

var scan = function() {
if ($window.localMediaStream) {
context.drawImage(video, 0, 0, 307,250);
try {
qrcode.decode();
} catch(e) {
scope.ngError({error: e});
}
}
}
angular.module('qrScanner', ["ng"]).directive('qrScanner', ['$interval', '$window', function($interval, $window) {
return {
restrict: 'E',
scope: {
ngSuccess: '&ngSuccess',
ngError: '&ngError',
ngVideoError: '&ngVideoError'
},
link: function(scope, element, attrs) {

var successCallback = function(stream) {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
$window.localMediaStream = stream;
window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

scope.video = video;
video.play();
stopScan = $interval(scan, 500);
}
var height = attrs.height || 300;
var width = attrs.width || 250;

// Call the getUserMedia method with our callback functions
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, successCallback, function(e) {
scope.ngVideoError({error: e});
});
} else {
scope.ngVideoError({error: 'Native web camera streaming (getUserMedia) not supported in this browser.'});
}
var video = $window.document.createElement('video');
video.setAttribute('width', width);
video.setAttribute('height', height);
video.setAttribute('autoplay', true);
video.setAttribute('style', '-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);');

qrcode.callback = function(data) {
scope.ngSuccess({data: data});
};
var canvas = $window.document.createElement('canvas');
canvas.setAttribute('id', 'qr-canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvas.setAttribute('style', 'display:none;');

element.bind('$destroy', function() {
if ($window.localMediaStream) {
$window.localMediaStream.stop();
}
if (stopScan) {
$interval.cancel(stopScan);
angular.element(element).append(video);
angular.element(element).append(canvas);
var context = canvas.getContext('2d');
var stopScan;

var scan = function() {
if ($window.localMediaStream) {
context.drawImage(video, 0, 0, 307,250);
try {
qrcode.decode();
} catch(e) {
scope.ngError({error: e});
}
}
}

var successCallback = function(stream) {
video.srcObject = stream;
$window.localMediaStream = stream;

scope.video = video;

video.play();
stopScan = $interval(scan, 500);
}

// Call the getUserMedia method with our callback functions
if (navigator.getUserMedia) {
var constraint = {
video: {
facingMode: { ideal: "environment" }
}
};

navigator.getUserMedia(constraint, successCallback, function(e) {
scope.ngVideoError({error: e});
});
} else {
scope.ngVideoError({error: 'Native web camera streaming (getUserMedia) not supported in this browser.'});
}

qrcode.callback = function(data) {
scope.ngSuccess({data: data});
};

element.bind('$destroy', function() {
if ($window.localMediaStream) {
$window.localMediaStream.getVideoTracks()[0].stop();
}
if (stopScan) {
$interval.cancel(stopScan);
}
});
}
}
});
}
}
}]);
}]);
})();