javascriptでバーコードを読み取る(zbarjs

はじめに

javascriptでクライアントサイドからバーコードを読み取る機能を実装しようと、このサイトを参考にしたが、このサイトのindex.htmlをそのままコピーしただけでは動作しなかったので、なんとか動かせるようにしたものをまとめる。(ブラウザーはfirefox推奨)

事前準備

1. 作業フォルダーを作る
2. zbarjsからzipファイルをダウンロードするなり、クローンを取ってくるなりしてzbar-processer.jsを取ってきて、作業フォルダーに置く
3. このページにあるindex.htmlを自分の作業フォルダーにそのままコピーして、作業フォルダーに置く

やったこと

参考にしたサイトではjavascriptのWeb worker APIを使ってzbar-processar.jsを動かしているので、zbar-processer.jsの方にonmessageで、データを受け取った時の処理を追加してやる必要がある。

index.html

<script type="text/javascript">
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    var list = document.querySelector('ul#decoded');

    var worker = new Worker('zbar-processor.js');
    worker.onmessage = function (event) {
      if (event.data.length == 0) return;
      var d = event.data[0];
      var entry = document.createElement('li');
      entry.appendChild(document.createTextNode(d[2] + ' (' + d[0] + ')'));
      list.appendChild(entry);
    };

    function snapshot() {
      if (localMediaStream === null) return;
      var k = (320 + 240) / (video.videoWidth + video.videoHeight);
      canvas.width = Math.ceil(video.videoWidth * k);
      canvas.height = Math.ceil(video.videoHeight * k);
      var ctx = canvas.getContext('2d');
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
        0, 0, canvas.width, canvas.height);

      var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
      worker.postMessage(data);
    }

    setInterval(snapshot, 500);

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

    if (navigator.getUserMedia) {
      navigator.getUserMedia({ video: true },
        function (stream) { // success callback
          if (video.mozSrcObject !== undefined) {
            video.mozSrcObject = stream;
          } else {
            video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
          }
          localMediaStream = true;
        },
        function (error) {
          console.error(error);
        });
    }
    else {
    }
  </script>

1. まず、index.htmlの上記部分の function snapshot(){... の中にあるworker.postMessage(data); を見つける
2. worker.postMessage(data); を worker.postMessage(data.data); に書き換える
3. 次にzbar-processer.jsを開いて、一番最後の行に以下のコードを追加する

zbar-processer.js

onmessage = function(e){
  var catch_img = new ImageData(e.data,320,240); //送られたデータを使って、画像を生成する
  var code = zbarProcessImageData(catch_img); //画像を解析する
  postMessage(code);
}

これでバーコードを読み取れるはずです。

参考