📷

HTML+Javascriptでカメラを利用する

2021/08/05に公開

HTML

背景

HTML+Javascriptでカメラを利用する場合が多くなったので、このあたりのコードをまとめて見ました。

利用方法

コード

navigatorというものを利用して、有効なカメラデバイスを取得して、htmlのvideo要素に付与しplayを実行すると再生が開始される。

index.html

<video id="video" width="640" height="480" autoplay></video>
<script>
var video = document.getElementById('video');
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
    video.srcObject = stream;
    video.play();
});
}
</script>

`navigator`って？

Navigator インターフェイスは、ユーザーエージェントの状態や身元情報を表します。これにより、スクリプトがこれらの問い合わせを行ったり、アクティビティを実行するために自分自身を登録したりすることができます。

下記から抜粋

このオブジェクトのmediaDevicesを利用して有効なハードデバイスを参照し、getUserMedia()で有効なカメラデバイスを取得します。
getUserMedia()には有効としたいデバイスを引数に指定します。
{ audio: true, video: true }
こんな感じです。

このときに、取得する解像度なども指定できるらしい。
詳しくは下記を参照のこと

`video`要素って？

基本的にはHTMLMediaElementのインターフェイスを継承しているらしいので、こちらのドキュメントを参考にしたほうが分かりやすい。

video要素のsrcObjectプロパティにメディアを入れています。
ここには、再生するオブジェクトやメディアソースなどを入れるようです。
play()で実際の再生を始めます。

イベント

基本的にはHTMLMediaElementに記載されているイベントが有効です。
少し調べましたが、基本的にvideoが更新されるたびに発火するイベントは存在しない様子…

タイマーイベントで特定のタイミングでフレームを取得して処理する感じで良いと思います。
※または、progressなどでもいいですが1秒程度に1回ほどしか発生しません。

下記はprogressで別のキャンバスにコピーしていますが、カクカクします。

index.html

    <video id="video" width="640" height="480" autoplay></video>
    <canvas id="canvas" width="640" height="480"></canvas>
  <script>
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            video.srcObject = stream;
            video.play();
        });
    }
    video.addEventListener('progress',()=>{
      console.log("test")
      context.drawImage(video, 0, 0, 640, 480);
    })
  </script>

以上、USBカメラについて少しわかった。

背景

利用方法

コード

navigatorって？

video要素って？

イベント

Discussion

`navigator`って？

`video`要素って？