JavaScriptでビデオ映像からバーコードを読み取る

    https://serratus.github.io/quaggaJS/

    view source

    JavaScript

    /*
Quagga.init({
  inputStream: {
      name : 'Live',
      type : 'LiveStream',
      target: document.querySelector('#target'),
    },
    decoder: {
      readers: ["ean_reader"]
    },
  }, (err) => {
    if(!err) {
      Quagga.start();
    }
});


Quagga.onProcessed(function(result) {
  console.log(result);
});

Quagga.onDetected((result) => {
  var code = result.codeResult.code;
  console.log(code);

  canvas = Quagga.canvas.dom.image;
  var src = canvas.toDataURL();
  var $img = $('<img>', {src:src});
  var $p = $('<p>').text(code);
  $("#target").after($img).after($p);
});
*/

    CSS

    .overlay__content {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-height: 90%;
    max-width: 800px;
}

.overlay__close {
    position: absolute;
    right: 0;
    padding: 0.5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background-color: white;
    cursor: pointer;
    border: 3px solid black;
    font-size: 1.5rem;
    margin: -1rem;
    border-radius: 2rem;
    z-index: 100;
    box-sizing: content-box;
}

.overlay__content video {
    width: 100%;
    height: 100%;
}

.overlay__content canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#interactive.viewport {
    position: relative;
}

#interactive.viewport > canvas, #interactive.viewport > video {
    max-width: 100%;
    width: 100%;
}

canvas.drawing, canvas.drawingBuffer {
    position: absolute;
    left: 0;
    top: 0;
}
#interactive canvas{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

    HTML

    ページのソースを表示 : Ctrl+U , DevTools : F12

    view-source:https://hi0a.com/demo/-js/js-camera-barcode-read/

    ABOUT

    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    必要な機能の関数をコピペ利用したり勉強に活用できます。

    プログラムの動作サンプル結果は画面上部に出力表示されています。

    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。