【JavaScript】カメラをブラウザ上で動かす方法【再生・停止・一時停止】

本記事ではHTMLとJavaScriptを使用して、USBカメラからの映像をブラウザに画面表示する方法を紹介します。映像表示だけでなく再生・停止・一時停止ボタンも実装します。

USBカメラの映像をブラウザ表示させる方法
1. HTML
2. JavaScript(再生・停止・一時停止操作)
さいごに

USBカメラの映像をブラウザ表示させる方法

以下のようなサンプルをHTMLとJavaScriptで作成しました。
両ファイルは同じフォルダに配置してください。

カメラは、ロジクール製のUSBカメラを使用しました(特殊なカメラでなければなんでもよいです)。

リンク

HTML

USBカメラ映像表示用のvideoタグと、開始・終了・一時停止のボタン3つを配置します。
ボタンにはそれぞれonClickを設定します。

またJavaScriptファイルの読み込みもします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USBカメラ映像表示</title>
</head>
<body>
    <video id="videoElement" autoplay ></video>

    <div>
        <button id="offButton" onclick="cameraOff()">終了</button>
        <button id="onButton" onclick="cameraOn()">開始</button>
        <button id="pauseButton" onclick="cameraPause()">一時停止・再開</button>
    </div>

    <!-- JavaScriptファイル読み込み -->
    <script src="script.js"></script>
</body>
</html>

JavaScript(再生・停止・一時停止操作)

HTMLからvideoタグのUIを取得します。

// ビデオ要素とカメラストリームを取得
const videoElement = document.getElementById('videoElement');

let stream = null;

// 終了(OFF)ボタンイベント
function cameraOff() {
    if(stream){
        const tracks = videoElement.srcObject.getTracks();
        tracks.forEach(track =>{
            track.stop();
        });
    videoElement.srcObject = null;
    stream = null;
    // 一時停止フラグも停止(true)に
    isPause = true;
    }
}

// 開始(ON)ボタンイベント
function cameraOn() {
    // カメラへのアクセスを要求
    navigator.mediaDevices.getUserMedia({ video: true })
    .then(function (cameraStream) {
        stream = cameraStream
        // カメラの映像をビデオ要素に設定
        videoElement.srcObject = cameraStream;
    })
    .catch(function (error) {
        console.error('カメラへのアクセスに失敗しました:', error);
    });
}

// 一時停止(Pause)ボタンイベント
let isPause = true;
function cameraPause() {

    if(stream){
        console.log("stream is truethy")
        const tracks = stream.getTracks();
        tracks.forEach(function (track) {
            track.enabled = !isPause;
        });
        isPause = !isPause;
    }
}