forked from sembrestels/angular-qr-scanner
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (93 loc) · 3.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html ng-app="App">
<body ng-controller="qrCrtl">
<qr-scanner width="400" height="300" ng-success="onSuccess(data)" ng-error="onError(error)" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<script src="src/jsqrcode/src/grid.js"></script>
<script src="src/jsqrcode/src/version.js"></script>
<script src="src/jsqrcode/src/detector.js"></script>
<script src="src/jsqrcode/src/formatinf.js"></script>
<script src="src/jsqrcode/src/errorlevel.js"></script>
<script src="src/jsqrcode/src/bitmat.js"></script>
<script src="src/jsqrcode/src/datablock.js"></script>
<script src="src/jsqrcode/src/bmparser.js"></script>
<script src="src/jsqrcode/src/datamask.js"></script>
<script src="src/jsqrcode/src/rsdecoder.js"></script>
<script src="src/jsqrcode/src/gf256poly.js"></script>
<script src="src/jsqrcode/src/gf256.js"></script>
<script src="src/jsqrcode/src/decoder.js"></script>
<script src="src/jsqrcode/src/qrcode.js"></script>
<script src="src/jsqrcode/src/findpat.js"></script>
<script src="src/jsqrcode/src/alignpat.js"></script>
<script src="src/jsqrcode/src/databr.js"></script>
<script>
var App = angular.module('App', []);
App.controller('qrCrtl', ['$scope', function($scope) {
$scope.onSuccess = function(data) {
console.log(data);
};
$scope.onError = function(error) {
console.log(error);
};
$scope.onVideoError = function(error) {
console.log(error);
};
}]);
App.directive('qrScanner', ['$timeout', function($timeout) {
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 localMediaStream;
var video = document.createElement('video');
video.setAttribute('width', width);
video.setAttribute('height', height);
var canvas = 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 scan = function() {
if (localMediaStream) {
context.drawImage(video, 0, 0, 307,250);
try {
qrcode.decode();
} catch(e) {
scope.ngError({error: e});
}
}
$timeout(scan, 500);
}
var successCallback = function(stream) {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
localMediaStream = stream;
video.play();
$timeout(scan, 1000);
}
// 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.'});
}
qrcode.callback = function(data) {
scope.ngSuccess({data: data});
};
}
}
}]);
</script>
</body>
</html>