From d52fd061b3824f768a9a9fe28253a4d78c1690fb Mon Sep 17 00:00:00 2001 From: mborges Date: Fri, 3 Jul 2015 00:07:37 +0200 Subject: [PATCH 1/5] Set the property autoplay to activate the video on chrome for anroid (maybe others) --- qr-scanner.js | 1 + 1 file changed, 1 insertion(+) diff --git a/qr-scanner.js b/qr-scanner.js index 6f3a309..e4d5fa0 100644 --- a/qr-scanner.js +++ b/qr-scanner.js @@ -23,6 +23,7 @@ angular.module('qrScanner', ["ng"]).directive('qrScanner', ['$interval', '$windo var width = attrs.width || 250; var video = $window.document.createElement('video'); + video.setAttribute('autoplay', true); video.setAttribute('width', width); video.setAttribute('height', height); video.setAttribute('style', '-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);'); From 62bfe0fb3c9740d7566dda27aaebb555776058a3 Mon Sep 17 00:00:00 2001 From: mborges Date: Fri, 3 Jul 2015 13:17:19 +0200 Subject: [PATCH 2/5] Can select anothe source using the ng-video-source parameter --- qr-scanner.js | 175 +++++++++++++++++++++++++++++--------------------- 1 file changed, 101 insertions(+), 74 deletions(-) diff --git a/qr-scanner.js b/qr-scanner.js index e4d5fa0..b991b77 100644 --- a/qr-scanner.js +++ b/qr-scanner.js @@ -1,85 +1,112 @@ -if (require){ - if (!angular) var angular = require('angular'); - if (!qrcode) var qrcode = require('jsqrcode'); -} - (function() { '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('autoplay', true); - 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', []) + .directive('qrScanner', ['$interval', '$window', function($interval, $window) { + return { + restrict: 'E', + scope: { + ngSuccess: '&ngSuccess', + ngError: '&ngError', + ngVideoError: '&ngVideoError', + ngVideoSource: '=ngVideoSource' + }, + 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('autoplay', true); + video.setAttribute('width', width); + video.setAttribute('height', height); + 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, angular.element(video)[0].videoWidth, angular.element(video)[0].videoHeight); + try { + qrcode.decode(); + } catch(e) { + scope.ngError({error: e}); + } } - } - } + }; - var successCallback = function(stream) { - video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; - $window.localMediaStream = stream; + var successCallback = function(stream) { + video.src = (window.URL && window.URL.createObjectURL(stream)) || stream; + $window.localMediaStream = stream; - scope.video = video; - video.play(); - stopScan = $interval(scan, 500); - } + scope.video = video; + video.play(); + stopScan = $interval(scan, 500); + }; - // 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 startVideo = function(source) { + var option; + if (!source) option = true; + else option = { + optional: [{ + sourceId: source + }] + }; - qrcode.callback = function(data) { - scope.ngSuccess({data: data}); - }; + // Call the getUserMedia method with our callback functions + if (navigator.getUserMedia) { + navigator.getUserMedia({video: option}, 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}); + }; + }; + startVideo(null); + + scope.$watch('ngVideoSource', function(newValue, oldValue) { + if (typeof MediaStreamTrack === 'undefined' || + typeof MediaStreamTrack.getSources === 'undefined') { + console.log('This browser does not support MediaStreamTrack') + } else { + MediaStreamTrack.getSources(function(sources) { + var videoSources = []; + for (var i = 0, len = sources.length; i Date: Fri, 3 Jul 2015 14:20:53 +0200 Subject: [PATCH 3/5] update version --- bower.json | 5 +++-- package.json | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index bc0e1d2..7525562 100644 --- a/bower.json +++ b/bower.json @@ -1,9 +1,10 @@ { "name": "angular-qr-scanner", - "version": "0.1.0", + "version": "0.2.0", "homepage": "https://github.com/sembrestels/angular-qr-scanner", "authors": [ - "Sem " + "Sem ", + "Maxaille " ], "description": "QR scanner angular directive", "main": "./qr-scanner.js", diff --git a/package.json b/package.json index fb4392e..36d68ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-qr-scanner", - "version": "0.1.0", + "version": "0.2.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-uglify": "~0.9.1", From 2b4d17e0806e651b8bf7b26e89e8736018d97c71 Mon Sep 17 00:00:00 2001 From: mborges Date: Fri, 3 Jul 2015 14:59:37 +0200 Subject: [PATCH 4/5] Fix dimensions of the canvas --- qr-scanner.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/qr-scanner.js b/qr-scanner.js index b991b77..cff862c 100644 --- a/qr-scanner.js +++ b/qr-scanner.js @@ -25,8 +25,6 @@ angular.module('qrScanner', []) video.setAttribute('height', height); 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); @@ -36,6 +34,8 @@ angular.module('qrScanner', []) var scan = function() { if ($window.localMediaStream) { + canvas.setAttribute('width', angular.element(video)[0].videoWidth); + canvas.setAttribute('height', angular.element(video)[0].videoHeight); context.drawImage(video, 0, 0, angular.element(video)[0].videoWidth, angular.element(video)[0].videoHeight); try { qrcode.decode(); From 5aa01aa74fa72b4547e1e497e66e6edd5f585f57 Mon Sep 17 00:00:00 2001 From: mborges Date: Mon, 6 Jul 2015 02:52:39 +0200 Subject: [PATCH 5/5] Start camera if there is no source specified --- qr-scanner.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/qr-scanner.js b/qr-scanner.js index cff862c..2575960 100644 --- a/qr-scanner.js +++ b/qr-scanner.js @@ -76,7 +76,9 @@ angular.module('qrScanner', []) scope.ngSuccess({data: data}); }; }; - startVideo(null); + if(typeof scope.ngVideoSource == 'undefined') { + startVideo(null); + } scope.$watch('ngVideoSource', function(newValue, oldValue) { if (typeof MediaStreamTrack === 'undefined' ||