barcode-reader - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

package.json

 {
   "name": "barcode-reader",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "A Barcode scanner capapable of reading Code128, Code93, Code39, Standard/Industrial 2 of 5, Interleaved 2 of 5, Codabar and EAN-13 barcodes in javascript.",
@@ -5,0 +5,0 @@ "main": "src/BarcodeReader.js",

README.md

@@ -16,1 +16,10 @@ BarcodeReader
 Version 1.6 is up with a completely reworked localization process and also added a BarcodeReader object to facilitate more ease of use. Just reference BarcodeReader.js, always execute a call to BarcodeReader.Init() in the beginning and then for decoding of images set callback function using BarcodeReader.SetImageCallback(callback) and then call BarcodeReader.DecodeImage(img). Also added functionality in BarcodeReader to decode a video stream for use with getUserMedia, which was the original idea. Hopefully this localization will be a significant improvement and I will in the (hopefully) near future do a rework of the decoding algorithm to make it a bit faster and more accurate.
+
+## Change Log
+
+### v1.6.1
+
+- Added video support to the jQuery plugin
+- Fire event when barcode is decoded
+- Refactored jQuery elements allowing support for your own
+- Flipped video to make it easier to position the barcode

src/barcode-reader.jquery.js

 (function ( $ ) {
-    $.fn.barcodeReader = function(options) {
-      var settings = $.extend({}, $.fn.barcodeReader.defaults, options);
+  $.fn.barcodeReader = function(options) {
+    console.log(options);
 
-      var $mainEl = $(this);
-      var $canvasEl = $('<canvas id="barcode-reader__picture"></canvas>');
-      var $inputEl = $('<input id="barcode-reader__picture__input" type="file" accept="image/*;capture=camera" />');
-      var $resultEl = $('<p id="barcode-reader__result"></p>');
-      var $imgEl = $('<img id="barcode-reader__image" />');
+    var settings = $.extend({}, $.fn.barcodeReader.defaults, options);
+    var debug = settings.debug;
 
-      var mainEl = $mainEl[0];
-      var canvasEl = $canvasEl[0];
-      var inputEl = $inputEl[0];
-      var resultEl = $resultEl[0];
-      var imgEl = $imgEl[0];
+    var $userVideoCanvasEl = $(settings.videoCanvasTo);
+    var $userCanvasEl = $(settings.canvasTo);
+    var $userInputEl = $(settings.inputTo);
+    var $userResultEl = $(settings.outputTo);
+    var $userImgEl = $(settings.imageTo);
 
-      var ctx = canvasEl.getContext("2d");
+    var $mainEl = $(this);
+    var $videoCanvasEl = ($userVideoCanvasEl.length > 0) ? $userVideoCanvasEl : $('<canvas id="barcode-reader__video" width="320" height="240"></canvas>');
+    var $canvasEl = ($userCanvasEl.length > 0) ? $userCanvasEl : $('<canvas id="barcode-reader__picture"></canvas>');
+    var $inputEl = ($userInputEl.length > 0) ? $userInputEl : $('<input id="barcode-reader__picture__input" type="file" accept="image/*;capture=camera" />');
+    var $resultEl = ($userResultEl.length > 0) ? $userResultEl : $('<p id="barcode-reader__result"></p>');
+    var $imgEl = ($userImgEl.length > 0) ? $userImgEl : $('<img id="barcode-reader__image" />');
 
-      BarcodeReader.Init();
+    var mainEl = $mainEl[0];
+    var videoCanvasEl = $videoCanvasEl[0];
+    var canvasEl = $canvasEl[0];
+    var inputEl = $inputEl[0];
+    var resultEl = $resultEl[0];
+    var imgEl = $imgEl[0];
 
+    var localized = [];
+    var isStreaming = false;
+
+    var ctx = videoCanvasEl.getContext("2d");
+
+    var video = document.createElement("video");
+
+    var localStream;
+
+    // set video dimensions
+    video.width = 640;
+    video.height = 360;
+
+    if(!settings.video){
+      ctx = canvasEl.getContext("2d");
+    }
+
+    BarcodeReader.Init();
+
+    navigator.getUserMedia = checkVideoCapability();
+
+    BarcodeReader.SwitchLocalizationFeedback(true);
+
+    if(settings.video){
+      BarcodeReader.SetLocalizationCallback(function(result) {
+        localized = result;
+      });
+
+      BarcodeReader.StreamCallback = function(result) {
+        if (result.length > 0) {
+          var tempArray = [];
+          for (var i = 0; i < result.length; i++) {
+            tempArray.push(result[i].Format + " : " + result[i].Value);
+          }
+          $resultEl.append(tempArray.join("<br />"));
+
+          BarcodeReader.StopStreamDecode();
+
+          $(document).trigger("barcodeReader:decoded", [ result[0] ]);
+        }
+      };
+
+      // create the dom elements needed
+      $mainEl.append([ $videoCanvasEl, $resultEl ]);
+    }
+    else{
       BarcodeReader.SetImageCallback(function(result) {
@@ -26,5 +79,5 @@ var tempArray = [];
         if (result.length > 0) {
-          for (i = 0; i < result.length; i++) {
-            tempArray.push(result[i].Format + " : " + result[i].Value);
-          }
+          result.forEach(function(resultItem, index){
+            tempArray.push(resultItem.Format + " : " + resultItem.Value);
+          });
           $resultEl.append(tempArray.join("<br />"));
@@ -55,4 +108,2 @@ } else {
 
-      BarcodeReader.SwitchLocalizationFeedback(true);
-
       BarcodeReader.SetLocalizationCallback(function(result) {
@@ -104,7 +155,86 @@ ctx.beginPath();
       $mainEl.append([ $canvasEl, $inputEl, $resultEl ]);
+    }
 
-      return this;
+    this.startVideo = function startVideo(){
+      localized = []; // reset the array
+
+      if (navigator.getUserMedia) {
+        navigator.getUserMedia({
+            "video": true,
+            "audio": false
+          },
+          function(localMediaStream) {
+            video.src = window.URL.createObjectURL(localMediaStream);
+            video.play();
+            ctx.translate($videoCanvasEl.outerWidth(), 0);
+            ctx.scale(-1, 1);
+            draw();
+            isStreaming = true;
+            localStream = localMediaStream;
+
+            // start the streaming
+            BarcodeReader.DecodeStream(video);
+          },
+          function(err) {
+            if(debug){
+              console.log("The following error occured: " + err);
+            }
+          }
+        );
+      } else {
+        if(debug){
+          console.log("getUserMedia not supported");
+        }
+      }
     };
 
-    $.fn.barcodeReader.defaults = {};
+    this.stopVideo = function stopVideo(){
+      BarcodeReader.StopStreamDecode();
+
+      localStream.stop();
+      isStreaming = false;
+    };
+
+    // drawing function for video capture
+    function draw() {
+      try {
+        ctx.drawImage(video, 0, 0, videoCanvasEl.width, videoCanvasEl.height);
+        if (localized.length > 0) {
+          ctx.beginPath();
+          ctx.lineWIdth = "2";
+          ctx.strokeStyle = "red";
+          for (var i = 0; i < localized.length; i++) {
+            ctx.rect(localized[i].x, localized[i].y, localized[i].width, localized[i].height);
+          }
+          ctx.stroke();
+        }
+        setTimeout(draw, 20);
+      } catch (e) {
+        if (e.name == "NS_ERROR_NOT_AVAILABLE") {
+          setTimeout(draw, 20);
+        } else {
+          throw e;
+        }
+      }
+    }
+
+    return this;
+  };
+
+  function checkVideoCapability(){
+    return navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia ||
+      navigator.msGetUserMedia;
+  }
 }( jQuery ));
+
+$.fn.barcodeReader.defaults = {
+  'debug': false,
+  'video': true,
+  'videoCanvasTo': '',
+  'canvasTo': '',
+  'outputTo': '',
+  'imageTo': '',
+  'inputFrom': ''
+};

No alert changes

Improved metrics

Total package byte prevSize

15437664

increased by0.03%

Lines of code

4144

increased by2.75%

Number of lines in readme file

25

increased by56.25%

No dependency changes