JavaScript、HTML、HTML5 ビデオを使ってウェブカムストリームを停止/閉じる方法
2024-07-02
このチュートリアルでは、JavaScript、HTML、HTML5 ビデオを使用して、navigator.mediaDevices.getUserMedia APIで開いたウェブカムストリームを停止/閉じる方法を詳しく説明します。
必要なもの
- ウェブブラウザ (Chrome、Firefox、Edge など)
- ウェブカメラ
手順
- HTML と JavaScript を準備する
まず、HTML ファイルを作成し、ウェブカメラストリームを表示するためのビデオ要素を追加します。
<!DOCTYPE html>
<html>
<head>
<title>Webcam Stream</title>
</head>
<body>
<video id="webcamVideo"></video>
<script src="script.js"></script>
</body>
</html>
次に、JavaScript ファイルを作成し、navigator.mediaDevices.getUserMedia APIを使用してウェブカムストリームを取得します。
const webcamVideo = document.getElementById('webcamVideo');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
webcamVideo.srcObject = stream;
})
.catch(error => {
console.error('Error obtaining webcam stream:', error);
});
- ストリームを停止/閉じる
ウェブカムストリームを停止/閉じるには、stream.stop() メソッドを使用します。これは、getUserMedia APIによって返されるストリームオブジェクトに対して呼び出されます。
const stopButton = document.getElementById('stopButton');
stopButton.addEventListener('click', () => {
if (webcamVideo.srcObject) {
webcamVideo.srcObject.getTracks().forEach(track => track.stop());
webcamVideo.srcObject = null;
}
});
このコードは、stopButton 要素をクリックすると、ウェブカムストリームが停止/閉じられ、ビデオ要素のソースが null に設定されます。
完全な例
以下のコードは、ウェブカムストリームの開始、停止、閉じる機能を備えた完全な例です。
<!DOCTYPE html>
<html>
<head>
<title>Webcam Stream</title>
</head>
<body>
<video id="webcamVideo"></video>
<button id="startButton">Start Webcam</button>
<button id="stopButton">Stop Webcam</button>
<script src="script.js"></script>
</body>
</html>
const webcamVideo = document.getElementById('webcamVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
let stream = null;
startButton.addEventListener('click', () => {
if (!stream) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(newStream => {
stream = newStream;
webcamVideo.srcObject = stream;
startButton.disabled = true;
stopButton.disabled = false;
})
.catch(error => {
console.error('Error obtaining webcam stream:', error);
});
}
});
stopButton.addEventListener('click', () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
webcamVideo.srcObject = null;
stream = null;
startButton.disabled = false;
stopButton.disabled = true;
}
});
補足
- この例では、
stopButtonをクリックするとウェブカムストリームが停止/閉じられますが、getUserMediaAPIによって返されるストリームオブジェクトは保持されます。ストリームを再起動するには、startButtonをクリックする必要があります。 - ストリームを完全に解放するには、
stream.stop()メソッドを呼び出した後にstream = null;と設定する必要があります。 - この例では、ビデオ要素を使用してウェブカムストリームを表示していますが、キャンバス要素やその他のグラフィック要素を使用することもできます。
JavaScript、HTML、HTML5 ビデオを使って navigator.mediaDevices.getUserMedia で開いたウェブカムストリームを停止/閉じる サンプルコード
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<title>Webcam Stream</title>
</head>
<body>
<video id="webcamVideo"></video>
<button id="startButton">Start Webcam</button>
<button id="stopButton">Stop Webcam</button>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
const webcamVideo = document.getElementById('webcamVideo');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
let stream = null;
startButton.addEventListener('click', () => {
if (!stream) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(newStream => {
stream = newStream;
webcamVideo.srcObject = stream;
startButton.disabled = true;
stopButton.disabled = false;
})
.catch(error => {
console.error('Error obtaining webcam stream:', error);
});
}
});
stopButton.addEventListener('click', () => {
if (stream) {
stream.getTracks().forEach(track => track.stop());
webcamVideo.srcObject = null;
stream = null;
startButton.disabled = false;
stopButton.disabled = true;
}
});
説明
- HTML ファイル:
startButtonとstopButton要素でストリームの開始と停止を制御します。script.jsファイルを JavaScript コードの読み込みに使用します。
- JavaScript ファイル:
webcamVideo、startButton、stopButton変数で HTML 要素を取得します。stream変数でウェブカメーストリームを保持します。startButtonのクリックイベントハンドラ:- ストリームが取得されると、
webcamVideo要素のソースオブジェクトとして設定します。 startButtonを無効化し、stopButtonを有効化します。
- ストリームが取得されると、
stopButtonのクリックイベントハンドラ:streamが存在する場合、ストリームのすべてのトラックを停止します。webcamVideo要素のソースオブジェクトをnullに設定します。stream変数をnullに設定します。
使い方
index.htmlファイルとscript.jsファイルを同じディレクトリに保存します。- Web ブラウザで
index.htmlファイルを開きます。 Start Webcamボタンをクリックしてウェブカメーストリームを開始します。
- このコードは、Chrome、Firefox、Edge などの最新の Web ブラウザで動作します。
- ウェブカメラへのアクセス許可をユーザーに求めるプロンプトが表示される場合があります。
- このサンプルコードは基本的な機能のみを提供します。必要に応じて、エラー処理、UI の強化、追加機能などを実装できます。
ウェブカムストリームを停止/閉じるその他の方法
MediaRecorder API を使用してウェブカムストリームを録画し、その後録画を停止してストリームを解放することができます。この方法は、ストリームを停止するだけでなく、録画されたビデオデータを保存するのにも役立ちます。
const recorder = new MediaRecorder(stream);
recorder.ondataavailable = (event) => {
// 録画されたビデオデータを処理
};
recorder.start();
// ...
// ストリームを停止/閉じる
recorder.stop();
RTCPeerConnection API を使用してウェブカムストリームをピアツーピア接続に送信し、その後接続を切断してストリームを解放することができます。この方法は、ウェブカムストリームを別のデバイスにリアルタイムで送信する必要がある場合に役立ちます。
const peerConnection = new RTCPeerConnection();
peerConnection.onicecandidate = (event) => {
// ICE 候補を処理
};
peerConnection.onaddstream = (event) => {
// 送信されたウェブカムストリームを処理
};
const streamTrack = stream.getTracks()[0];
const sender = peerConnection.addTrack(streamTrack);
// ...
// ストリームを停止/閉じる
peerConnection.close();
カスタムトラックオブジェクトを使用する
ブラウザによっては、カスタムトラックオブジェクトを使用してウェブカムストリームを制御できる場合があります。この方法は、ブラウザ固有の機能に依存するため、すべてのブラウザで動作するとは限りません。
const customTrack = stream.getTracks()[0];
// ...
// ストリームを停止/閉じる
customTrack.stop();
注意事項
- 上記に記載された方法は、すべて実験的な機能であり、すべてのブラウザで動作するとは限りません。
- ウェブカムストリームを停止/閉じる前に、必ずユーザーの許可を得るようにしてください。
- セキュリティ上の理由から、ウェブカメラへのアクセスを許可する際には注意が必要です。
ウェブカムストリームを停止/閉じるには、さまざまな方法があります。最適な方法は、アプリケーションの要件とブラウザの互換性によって異なります。上記のサンプルコードと参考資料を参考に、ニーズに合った方法を選択してください。
javascript html html5-video
