Can select anothe source using the ng-video-source parameter

sembrestels · Jul 3, 2015 · 62bfe0f · 62bfe0f
1 parent d52fd06
commit 62bfe0f
Showing 1 changed file with 101 additions and 74 deletions.
diff --git 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<len; i++)
+                if (sources[i].id == newValue) {
+                  video.pause();
+                  $interval.cancel(stopScan);
+                  startVideo(newValue);
+                  break;
+                }
+            });
+          }
+        });
 
-      element.bind('$destroy', function() {
-        if ($window.localMediaStream) {
-          $window.localMediaStream.stop();
-        }
-        if (stopScan) {
-          $interval.cancel(stopScan);
-        }
-      });
+        element.bind('$destroy', function() {
+          if ($window.localMediaStream) {
+            $window.localMediaStream.stop();
+          }
+          if (stopScan) {
+            $interval.cancel(stopScan);
+          }
+        });
+      }
     }
+
   }
-}]);
-})();
+]);
+})();