在本教程中，您将学习如何使用 JavaScript MediaRecorder API 创建音频和视频录制器。所以这可以使用 WebRTC 来完成。
什么是 WebRTC？
WebRTC 是实时通信的简称。我们可以访问并捕获用户设备中可用的网络摄像头和麦克风设备。
我们可以使用 ECMAScript 对象访问用户设备的网络摄像头和麦克风
navigator.mediaDevices.getUserMedia(constraints).
因此，getUserMedia 函数默认情况下会寻求用户许可以使用您的网络摄像头。此函数返回一个 promise，一旦您单击“确定”并表示同意，该函数就会被触发并在您的系统中启用网络摄像头，否则，如果您不允许，那么它还有一个 catch 方法这会关闭网络摄像头。
立即学习“Java免费学习笔记（深入）”；
我们还可以向函数 getUserMedia() 函数传递一个参数，这可能就像我们想要某个特定宽度或高度的图片一样。
前端设计
我们的前端部分将包含如下元素 -
对于视频录制屏幕将有一些元素，例如 -
将显示视频媒体屏幕的视频元素
开始按钮将开始视频录制
停止按钮将停止视频录制流。
对于音频录制，它将有两个按钮
开始按钮将开始录音
停止按钮将停止音频录制流。
我们将添加 font Awesome CDN 以添加开始和停止按钮图标，并且为了使页面更具吸引力，我们将在元素上添加 CSS 样式。
HTML 代码
示例
Video & Audio Recorder Video-Audio recorder
Record Video
Record Audio
当您点击“开始视频”按钮时，它将调用start_video_Recording()函数，而“停止”按钮将调用stop_Recording () 类似地，对于音频，单击开始按钮将触发函数 start_audio_Recording() ，对于停止按钮 stop_Recording() 函数将被调用。
start_video_Recording() 函数
让我们定义一个函数来启动视频并录制它。
function start_video_Recording() {
// stores the recorded media
let chunksArr= [];
const startBtn=document.getElementById("video_st");
const endBtn=document.getElementById("video_en");
// permission to access camera and microphone
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then((mediaStreamObj) => {
// Create a new MediaRecorder instance
const medRec =new MediaRecorder(mediaStreamObj);
window.mediaStream = mediaStreamObj;
window.mediaRecorder = medRec;
medRec.start();
//when recorded data is available then push into chunkArr array
medRec.ondataavailable = (e) => {chunksArr.push(e.data);};
//stop the video recording
medRec.onstop = () => {
const blobFile = new Blob(chunksArr, { type:"video/mp4" });
chunksArr= [];
// create video element and store the media which is recorded
const recMediaFile = document.createElement("video");
recMediaFile.controls = true;
const RecUrl = URL.createObjectURL(blobFile);
//keep the recorded url as source
recMediaFile.src = RecUrl;
document.getElementById(`vid-recorder`).append(recMediaFile);
};
document.getElementById("vidBox").srcObject = mediaStreamObj;
//disable the start button and enable the stop button
startBtn.disabled = true;
endBtn.disabled = false;
});
}
当按下开始按钮时，它将调用上述函数，这将触发 WebRTC 摄像头和麦克风方法来获取录制权限，并将启用停止录制按钮并禁用开始录制按钮。
当按下停止按钮时，它将调用 stop() 函数并停止所有媒体流轨道。
然后为了记录媒体流，我们将创建一个媒体记录器实例并使媒体流以及媒体重新排序全局。然后停止视频将停止媒体流，创建视频元素将创建一个新的视频元素并存储录制的媒体数据。
同样，start_audio_Recording() 函数也与 start_video_Recording() 函数类似，但需要进行一些更改。
stop_Recording()函数
现在让我们定义一个函数来停止录制。
function stop_Recording(end, start) {
window.mediaRecorder.stop();
// stop all tracks
window.mediaStream.getTracks() .forEach((track) => {track.stop();});
//disable the stop button and enable the start button
end.disabled = true;
start.disabled = false;
}
此函数将停止存储在媒体流中的所有媒体轨道。
示例
让我们将上述函数添加到 HTML 代码中，以实现视频和音频录制功能。
Video & Audio Recorder Video-Audio recorder
Record Video
Record Audio
从输出中可以看出，当单击视频开始按钮时，它会调用 start_video_Recording() 函数，并在该函数中调用 navigator.mediaDevices.getUserMedia() 方法，并打开一个权限菜单，用于查找视频和麦克风权限。它返回一个解析媒体流的承诺。在接收到音频或视频媒体流后，它会创建一个媒体记录器的实例，并通过调用上述代码中的函数 medRec.start() 来开始记录。
因此，您将了解使用 WebRTC 创建视频和音频录制的完整过程。
