JavaScriptを使ってブラウザ上にリアルタイムカメラプレビューを実装する方法

JavaScript

今回はJavaScriptのgetUserMedia()を使用して、ブラウザ上にリアルタイムカメラプレビューを実装していきます。

使用ブラウザ:Google Chrome
ファイル:index.html

※以下はHTMLファイルに直接JavaScriptを記述しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>プレビュー表示</h1>
    <video id="video" style="display: none;"></video>
    <canvas id="canvas"></canvas>
</body>

<script>
    const video = document.getElementById('video');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    // カメラの設定
    const constraints = {
        video: {
            facingMode: 'user' // フロントカメラを使用
        },
        audio: false // 今回は音声は不使用とする明記(通常は明記不要)
    };

    // ブラウザのカメラ機能にアクセス
    navigator.mediaDevices.getUserMedia(constraints)
    // カメラ機能からの映像ストリームを取得
    .then(function(stream) {
        // ビデオ要素に映像ストリームを設定することで、映像の再生が可能になる
        video.srcObject = stream;

        // ビデオの再生を開始 -> video.onplayイベントが発火
        // 同時に映像ストリームのデコードを開始(各フレームの画像データとなる)
        video.play();

        // ビデオのメタデータが読み込まれたらキャンバスのサイズをビデオのサイズに合わせて設定
        video.onloadeddata = function () {
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        };

        // ビデオフレームをキャンバスに描画
        function drawFrame() {
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            requestAnimationFrame(drawFrame);
        }

        // ビデオの再生が開始されたらフレーム描画を開始
        video.onplay = function () {
            drawFrame();
        };
        })

    .catch(function (err) {
        console.log("エラーが発生しました:" + err);
    });
</script>
</html>

補足情報

以下はいくつかの用語に関する補足事項をまとめています。

1.ビデオのメタデータとは?
ビデオのメタデータには、ビデオの幅、高さ、デュレーションなどの情報が含まれます。onloadedmetadataイベントは、これらのメタデータが読み込まれたときに発火します。

2.ビデオフレームとは?
ビデオフレームは、ビデオストリームの1つの静止画像です。ビデオは連続したフレームの急速な表示によって動画として認識されます。

以上となります。

コメント

タイトルとURLをコピーしました