Webカメラの映像の録画。ダウンロードリンクが表示され、MP4形式で動画をダウンロードできます。
説明:
Webカメラの映像取得: navigator.mediaDevices.getUserMediaを使って、ユーザーのWebカメラとマイクから映像と音声を取得しています。
録画の開始と停止: 録画はMediaRecorder APIを使用して実装されています。startButtonを押すと録画を開始し、stopButtonを押すと録画が停止します。
録画データの保存: 録画が終了すると、録画されたデータはBlob形式に変換され、それをダウンロードリンクとして提供します。
ダウンロードリンク: 録画が終了すると、ダウンロードリンクが表示され、MP4形式で動画をダウンロードできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webカメラ録画とダウンロード</title>
<style>
body {
font-family: Arial, sans-serif; /* フォントの設定 */
display: flex;
flex-direction: column; /* 縦に並べる */
align-items: center; /* 中央揃え */
justify-content: center; /* 垂直方向の中央揃え */
height: 100vh; /* ビューポートの高さを100% */
margin: 0; /* デフォルトのマージンを削除 */
}
video {
border: 2px solid black; /* 動画の周りに黒い枠を追加 */
}
button {
margin-top: 10px; /* ボタンの上部に余白を追加 */
padding: 10px 20px; /* ボタンの内側の余白を設定 */
font-size: 16px; /* フォントサイズを設定 */
}
</style>
</head>
<body>
<h1>Webカメラからの映像を録画してダウンロード</h1>
<video id="video" autoplay muted playsinline></video> <!-- 録画する動画を表示する要素 -->
<button id="startButton">録画開始</button> <!-- 録画開始ボタン -->
<button id="stopButton" disabled>録画停止</button> <!-- 録画停止ボタン（初めは無効） -->
<a id="downloadLink" style="display:none;">ダウンロード</a> <!-- ダウンロードリンク（初めは非表示） -->
<script>
const video = document.getElementById('video'); // video要素を取得
const startButton = document.getElementById('startButton'); // 録画開始ボタンを取得
const stopButton = document.getElementById('stopButton'); // 録画停止ボタンを取得
const downloadLink = document.getElementById('downloadLink'); // ダウンロードリンクを取得
let mediaRecorder; // MediaRecorderインスタンスを格納する変数
let recordedChunks = []; // 録画されたデータのチャンクを格納する配列
// Webカメラの映像と音声を取得
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
video.srcObject = stream; // 取得したストリームをvideo要素に設定
mediaRecorder = new MediaRecorder(stream); // MediaRecorderインスタンスを作成
// 録画データが利用可能になったときの処理
mediaRecorder.ondataavailable = function(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data); // データがある場合、配列に追加
}
};
// 録画が停止したときの処理
mediaRecorder.onstop = function() {
const blob = new Blob(recordedChunks, { type: 'video/mp4' }); // 録画データをBlobに変換
const url = URL.createObjectURL(blob); // BlobをURLに変換
downloadLink.href = url; // ダウンロードリンクのhrefを設定
downloadLink.download = 'recorded_video.mp4'; // ダウンロード時のファイル名を設定
downloadLink.style.display = 'block'; // ダウンロードリンクを表示
downloadLink.textContent = 'ダウンロードはこちら'; // リンクのテキストを設定
};
})
.catch(err => {
console.error('Webカメラのアクセスに失敗しました: ', err); // エラーハンドリング
});
// 録画開始ボタンがクリックされたときの処理
startButton.addEventListener('click', () => {
recordedChunks = []; // 録画データの配列をリセット
mediaRecorder.start(); // 録画を開始
startButton.disabled = true; // 録画開始ボタンを無効化
stopButton.disabled = false; // 録画停止ボタンを有効化
});
// 録画停止ボタンがクリックされたときの処理
stopButton.addEventListener('click', () => {
mediaRecorder.stop(); // 録画を停止
startButton.disabled = false; // 録画開始ボタンを有効化
stopButton.disabled = true; // 録画停止ボタンを無効化
});
</script>
</body>
</html>