search
LoginSignup
10

More than 5 years have passed since last update.

posted at

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);
}

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
10