jsでバーコードリーダー

ブラウザで動作するバーコードリーダーを実装した際の覚書

使用したライブラリ

ZXing for JS
細かいことはドキュメントとか読んでね。

• とりあえずインストールして

# npm　　install
npm i @zxing/library
npm i @zxing/browser

• 表示用のhtml用意して

<!-- カメラ描画用 -->
<video
  id="player"
  controls
  autoplay
  playsinline
  style="width:320px; height:240px;"
></video>
<!-- 読み込み結果表示 -->
<input type="text" id="read_result">

• リーダーを起動する

import { BrowserMultiFormatOneDReader, BrowserQRCodeReader } from '@zxing/browser';
import { BrowserMultiFormatReader, NotFoundException, Result } from '@zxing/library';

const codeReader = new BrowserMultiFormatReader()
codeReader.decodeFromConstraints({
    audio: false,
    video: {
      width: {max: 640},
      height: {max: 640},
      focusMode: "continuous",     // オートフォーカス有効にしたい
      facingMode: "environment", 　　　　// 背面カメラ使う
      aspectRatio: 4/3,
    },
  },
  "player",
  (result, err) => {
    if (result) {
      // 読取結果を表示
      const textbox = document.getElementById("read_result")
      textbox.value = result.text
    }
  })
</script>

最低限はこんな感じで。

余談

カメラが使えるかチェックする

const is_camera_enabled = !!navigator.mediaDevices
```