在现代 Web 开发环境中，随着各种浏览器 API 的出现，与用户硬件（如摄像头和麦克风）的交互变得更加容易。 MediaRecorder API 就是这样一个有用的 API，它允许开发人员直接从浏览器录制音频和视频。
在这篇文章中，我们将介绍如何使用 JavaScript 录制视频，方法是访问用户的网络摄像头、录制视频流并提供录制的视频供下载 - 所有这些都通过浏览器 API 进行！
传统上，记录用户的媒体内容需要外部工具或插件（例如 Flash）。但是，借助 WebRTC 堆栈，您可以轻松录制视频、创建点对点连接以及与相机、麦克风和屏幕等媒体设备交互，而无需任何第三方工具。
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>
我们使用 navigator.mediaDevices.getUserMedia() 方法来请求访问用户的摄像头和麦克风。
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;
此方法返回一个解析为 MediaStream 对象的 Promise，其中包含来自用户摄像头的实时视频和音频。然后使用
一旦我们有了直播，我们就可以创建一个 MediaRecorder 实例来录制视频。
mediaRecorder = new MediaRecorder(stream);
MediaRecorder 将以块的形式捕获流，每次数据可用时，都会触发 ondataavailable 事件。我们将这些块存储在名为 RecordChunks 的数组中。
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
当录制停止时，我们将这些块组合成一个 Blob，并创建一个用于下载视频的 URL。
mediaRecorder.onstop = () => {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const videoURL = URL.createObjectURL(blob);
recordedVideoElement.src = videoURL;
downloadLink.href = videoURL;
};
现在可以在中播放视频了元素或使用 下载元素。
我们添加了两个按钮来控制录制：
按钮也会相应地禁用或启用，以防止在此过程中不必要的交互。
使用 MediaRecorder API 和 getUserMedia() 方法，使用 JavaScript 直接在浏览器中录制视频变得非常简单。这些工具使您能够在浏览器内构建功能强大、媒体丰富的应用程序，而无需外部软件。
按照上面的示例，您可以轻松地在 Web 应用程序中实现视频录制功能，使用户能够直接从浏览器录制、预览和下载视频。
以上是使用 JavaScript 和浏览器 API 录制视频的详细内容。更多信息请关注PHP中文网其他相关文章！
