在現(xiàn)代 Web 開發(fā)環(huán)境中，隨著各種瀏覽器 API 的出現(xiàn)，與用戶硬件（如攝像頭和麥克風）的交互變得更加容易。 MediaRecorder API 就是這樣一個有用的 API，它允許開發(fā)人員直接從瀏覽器錄制音頻和視頻。
在這篇文章中，我們將介紹如何使用 JavaScript 錄制視頻，方法是訪問用戶的網絡攝像頭、錄制視頻流并提供錄制的視頻供下載 - 所有這些都通過瀏覽器 API 進行！
為什么使用 MediaRecorder API？
傳統(tǒng)上，記錄用戶的媒體內容需要外部工具或插件（例如 Flash）。但是，借助 WebRTC 堆棧，您可以輕松錄制視頻、創(chuàng)建點對點連接以及與相機、麥克風和屏幕等媒體設備交互，而無需任何第三方工具。
MediaRecorder API 是該堆棧的一部分，使瀏覽器中的視頻錄制成為一個無縫過程。
在瀏覽器中錄制視頻的步驟
要錄制視頻，我們將：
-
使用 navigator.mediaDevices 接口中的 getUserMedia() 方法訪問網絡攝像頭。
-
使用 MediaRecorder API 錄制流。
-
提供下載鏈接以便用戶可以保存錄制的視頻。
我們看一下代碼實現(xiàn)。
示例：在瀏覽器中錄制視頻
<!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() 方法來請求訪問用戶的攝像頭和麥克風。
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
此方法返回一個解析為 MediaStream 對象的 Promise，其中包含來自用戶攝像頭的實時視頻和音頻。然后使用
2. 錄制視頻流
一旦我們有了直播，我們就可以創(chuàng)建一個 MediaRecorder 實例來錄制視頻。
mediaRecorder = new MediaRecorder(stream);
MediaRecorder 將以塊的形式捕獲流，每次數(shù)據可用時，都會觸發(fā) ondataavailable 事件。我們將這些塊存儲在名為 RecordChunks 的數(shù)組中。
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
3. 停止錄制并保存視頻
當錄制停止時，我們將這些塊組合成一個 Blob，并創(chuàng)建一個用于下載視頻的 URL。
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
現(xiàn)在可以在中播放視頻了元素或使用 下載元素。
按鈕和用戶交互
我們添加了兩個按鈕來控制錄制：
-
開始按鈕：通過調用mediaRecorder.start()開始錄制。
-
停止按鈕：通過調用mediaRecorder.stop()來停止錄制。
按鈕也會相應地禁用或啟用，以防止在此過程中不必要的交互。
您可以添加的附加功能
-
暫停/恢復錄制：您可以使用 mediaRecorder.pause() 和 mediaRecorder.resume() 方法添加暫停和恢復按鈕。
-
視頻格式：默認情況下，錄制內容保存為.webm文件，但您可以根據瀏覽器的支持更改MIME類型，例如video/mp4。
-
上傳視頻：您可以擴展功能，將錄制的視頻上傳到服務器以進行進一步處理或分析。
結論
使用 MediaRecorder API 和 getUserMedia() 方法，使用 JavaScript 直接在瀏覽器中錄制視頻變得非常簡單。這些工具使您能夠在瀏覽器內構建功能強大、媒體豐富的應用程序，而無需外部軟件。
按照上面的示例，您可以輕松地在 Web 應用程序中實現(xiàn)視頻錄制功能，使用戶能夠直接從瀏覽器錄制、預覽和下載視頻。
快樂編碼！
以上是使用 JavaScript 和瀏覽器 API 錄制視頻的詳細內容。更多信息請關注PHP中文網其他相關文章！