前回Node.JsとExpressを利用してナンバープレート認識を行う車番認識メモアプリのサンプルをご紹介しましたが、今回はそのサンプルアプリの開発の主要部分の手順と詳細設定について２回に分けてご紹介します。
サンプルアプリのソースコードは随時GitHubにて公開しています。
第１回は端末カメラのブラウザ表示と画像取得方法をご紹介します。
1.事前準備
・Node.js + Expressの環境構築(サンプルアプリではnode:lts-alpine3.16のバージョンを使用しています。)
・カメラを使用するのでカメラが付属しているPCもしくは、外付けカメラをご用意ください。
・SensingAPIへの登録、LPR_APIのトークン発行
LPR APIのAPIトークンの発行がお済みでない方は、「SensingAPI 初めの一歩」の①～③までの記事をご参照ください。
※APIのご利用に応じて利用料金が発生します。あらかじめご了承ください。
2.カメラ画面
まず、端末カメラをブラウザ上に表示してボタンで画像を取得する機能を作っていきます。
新規のejs、htmlファイルを作成して以下のコードを入力します。サンプルアプリではcamera.ejsで作成しています。
<div class="container" style="text-align:center">
<video ref="video" id="video" width="800" height="450" muted autoplay playsinline ></video>
</div>動画埋め込み要素の<Video>を利用してカメラのストリームを表示します。
※幅と高さはお好みで調節していただいて構いません、利用するカメラのスペクトラム比に合わせて調整してください、ただし、LPR_APIで利用できる画像1枚あたりの解像度が1920×1080相当まで（画像のピクセル数が2,400,000ピクセル以内）になっていますので、送る画像のサイズは一度ご確認ください。
以下はJavaScritコードで、端末のカメラを取得し<Video>にストリームを表示するコードです。
<script>
this.video = document.getElementById("video");
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: {facingMode: 'environment',
width:{min:800},
height:{min:450}
}
}).then((stream) => {
this.video.srcObject = stream
this.video.play();
})
}
</script>facingModeで利用するカメラを選択できます。
起動確認を行うため、サーバ側のJSコードを作成します。サンプルアプリではapp.jsで作成しています。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.render('camera.ejs');
});
app.listen(3000);
起動すると、画像のように端末カメラがブラウザ上に表示されます。
3.撮影アクション・画像取得
ボタンアクションで<Video>ストリームからdrawImageで<Canvas>にキャプチャ画像を取得し、toDataURLで<Canvas>からBase64を取得します。
まず、ボタンと、Canvasを追加します。
<div class="container" style="text-align:center;flex-direction: column">
<video ref="video" id="video" width="800" height="450" muted autoplay playsinline ></video>
<div class="container" style="margin-bottom: 10px;">
<button id="submit-button" type="button" width="200" height="30">撮影ボタン</button>
</div>
<canvas ref="canvas" id="canvas" width="0" height="0" name="file1" class="nonedisp"></canvas>
</div>ボタンアクションと画像取得のコードは以下になります。
Base64を取得した後、APIリクエストに渡すためのBlobデータの作成も行っています。
<script>
const SubmitButton = document.getElementById("submit-button");
this.video = document.getElementById("video");
this.canvas = document.getElementById("canvas");
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
~省略~
this.video.play();
})
//キャンバスのサイズ指定
this.canvas.setAttribute( "width" , 800);
this.canvas.setAttribute( "height" ,450);
}
SubmitButton.onclick = () => {
this.canvas = document.getElementById("canvas");
this.canvas.getContext('2d').drawImage(this.video,0,0,
this.video.clientWidth,this.video.clientHeight);
let base64 = this.canvas.toDataURL("image/jpeg");
// base64からBlobデータを作成
let barr, bin, i, len;
bin = atob(base64.split("base64,")[1]);
len = bin.length;
barr = new Uint8Array(len);
i = 0;
while (i < len) {
barr[i] = bin.charCodeAt(i);
i++;
}
this.blob = new Blob([barr], { type: "image/jpeg" });
}起動すると画像のようにボタンアクションで取得した画像がCanvas上に表示され確認することができます。
まとめ
今回はそのサンプルアプリの端末カメラのブラウザ表示と画像取得方法をご紹介しました。次回は取得した画像データを用いてLPR_APIリクエストを送る手順についてご紹介します。
EyeTech Sensing APIは、簡単に無料で会員登録ができる画像認識APIサービスです。最先端のナンバープレート認識API「LPR API」を、Webからメールアドレスで会員登録するだけで、すぐにご利用いただけます。