ホームページ > 記事 > ウェブフロントエンド > JavaScript とブラウザ API を使用したビデオの録画
JavaScript とブラウザ API を使用したビデオの録画
- DDDオリジナル
- 2024-10-18 22:43:30507ブラウズ
現代の Web 開発環境では、さまざまなブラウザ API の出現により、ユーザー ハードウェア (カメラやマイクなど) との対話がはるかに簡単になりました。このような便利な API の 1 つが MediaRecorder API です。これを使用すると、開発者はブラウザからオーディオやビデオを直接録音できます。
この投稿では、JavaScript を使用してユーザーの Web カメラにアクセスし、ビデオ ストリームを録画し、録画したビデオをダウンロード用に提供する方法をすべてブラウザ API を通じて説明します。 MediaRecorder API を使用する理由
従来、ユーザーからのメディア コンテンツを記録するには、外部ツールまたはプラグイン (Flash など) が必要でした。ただし、
WebRTCスタックを使用すると、サードパーティ ツールを必要とせずに、簡単にビデオを録画したり、ピアツーピア接続を作成したり、カメラ、マイク、画面などのメディア デバイスを操作したりできます。 MediaRecorder API はこのスタックの一部であり、ブラウザでのビデオ録画をシームレスなプロセスにします。
ブラウザでビデオを録画する手順
ビデオを録画するには、次のことを行います:
- navigator.mediaDevices インターフェースから getUserMedia() メソッドを使用して、Web カメラにアクセスします
- 。 MediaRecorder API を使用して、ストリームを記録します 。
- ダウンロード リンクを提供します 。これにより、ユーザーは録画したビデオを保存できます。
- コードの実装を見てみましょう。
コードを分解する:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder using JavaScript</h1>
<video id="video" autoplay></video>
<button id="start-btn">Start Recording</button>
<button id="stop-btn" disabled>Stop Recording</button>
<video id="recorded-video" controls></video>
<a id="download-link" download="recorded-video.webm">Download Recorded Video</a>
<script>
const videoElement = document.getElementById('video');
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const recordedVideoElement = document.getElementById('recorded-video');
const downloadLink = document.getElementById('download-link');
let mediaRecorder;
let recordedChunks = [];
// Access webcam
async function startVideoStream() {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
// Set up MediaRecorder to record the stream
mediaRecorder = new MediaRecorder(stream);
// When data becomes available, store it
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// When recording stops, create a video blob and show it
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
}
// Start recording
startButton.addEventListener('click', () => {
recordedChunks = [];
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Stop recording
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
// Initialize the video stream
startVideoStream();
</script>
</body>
</html>
1.ユーザーのウェブカメラへのアクセス
navigator.mediaDevices.getUserMedia() メソッドを使用して、ユーザーのカメラとマイクへのアクセスをリクエストします。
このメソッドは、ユーザーのカメラからのライブビデオとオーディオを含む MediaStream オブジェクトに解決される Promise を返します。ビデオは
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
2. ビデオストリームの録画
ライブ ストリームを取得したら、ビデオを記録するための MediaRecorder のインスタンスを作成できます。
MediaRecorder はストリームをチャンクでキャプチャし、データが利用可能になるたびに、ondataavailable イベントが発生します。これらのチャンクは、recordedChunks という配列に保存します。
mediaRecorder = new MediaRecorder(stream);
3.
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
録画が停止されると、チャンクが BLOB に結合され、ビデオをダウンロードするための URL が作成されます。
ビデオは <ビデオ> で再生できるようになりました。要素を使用するか、 を使用してダウンロードします。要素。
ボタンとユーザーの操作
録音を制御するために 2 つのボタンを追加しました:
- 開始ボタン: mediaRecorder.start() を呼び出して録音を開始します。
- 停止ボタン: mediaRecorder.stop() を呼び出して録音を停止します。
プロセス中の不要な対話を防ぐために、ボタンもそれに応じて無効または有効になります。
追加できる追加機能
- 録画の一時停止/再開: mediaRecorder.pause() メソッドと mediaRecorder.resume() メソッドを使用して、一時停止ボタンと再開ボタンを追加できます。
- ビデオ形式: デフォルトでは、録画は .webm ファイルとして保存されますが、ブラウザのサポートに応じて MIME タイプを変更できます (video/mp4 など)。
- ビデオのアップロード: 機能を拡張して、録画したビデオをサーバーにアップロードして、さらなる処理や分析を行うことができます。
結論
JavaScript を使用してブラウザでビデオを直接録画することは、MediaRecorder API と getUserMedia() メソッドを使用することで非常に簡単になりました。これらのツールを使用すると、外部ソフトウェアを必要とせずに、ブラウザ内で強力なメディアリッチなアプリケーションを構築できます。
上記の例に従うことで、Web アプリケーションにビデオ録画機能を簡単に実装でき、ユーザーはブラウザからビデオを直接録画、プレビュー、ダウンロードできるようになります。
コーディングを楽しんでください!
以上がJavaScript とブラウザ API を使用したビデオの録画の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。