在本教程中,您将学习如何使用 JavaScript MediaRecorder API 创建音频和视频录制器。所以这可以使用 WebRTC 来完成。
什么是 WebRTC?
WebRTC 是实时通信的简称。我们可以访问并捕获用户设备中可用的网络摄像头和麦克风设备。
我们可以使用 ECMAScript 对象访问用户设备的网络摄像头和麦克风
navigator.mediaDevices.getUserMedia(constraints).
因此,getUserMedia 函数默认情况下会寻求用户许可以使用您的网络摄像头。此函数返回一个 promise,一旦您单击“确定”并表示同意,该函数就会被触发并在您的系统中启用网络摄像头,否则,如果您不允许,那么它还有一个 catch 方法这会关闭网络摄像头。
我们还可以向函数 getUserMedia() 函数传递一个参数,这可能就像我们想要某个特定宽度或高度的图片一样。
前端设计
我们的前端部分将包含如下元素 –
对于视频录制屏幕将有一些元素,例如 –
-
将显示视频媒体屏幕的视频元素
-
开始按钮将开始视频录制
-
停止按钮将停止视频录制流。
对于音频录制,它将有两个按钮
-
开始按钮将开始录音
-
停止按钮将停止音频录制流。
我们将添加 font Awesome CDN 以添加开始和停止按钮图标,并且为了使页面更具吸引力,我们将在元素上添加 CSS 样式。
HTML 代码
示例
<!DOCTYPE html> <html> <head> <title>Video & Audio Recorder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; color: red; font-size: 1.2em; } /* styling of start and stop buttons */ #video_st, #video_en, #aud_st, #aud_en{ margin-top: 10px; padding: 10px; border-radius: 4px; cursor: pointer; } #vidBox{ background-color: grey; } /*video box styling*/ video { background-color: gray; display: block; margin: 6px auto; width: 520px; height: 240px; } /*audio box styling*/ audio { display: block; margin: 6px auto; } a { color: green; } </style> </head> <body> <h1 style="color:blue"> Video-Audio recorder</h1> <div class="display-none" id="vid-recorder"> <h3>Record Video </h3> <video autoplay id="vidBox"> </video> <!-- click this button to start video recording --> <button type="button" id="video_st" onclick="start_video_Recording()"> <i class="fa fa-play"></i></button> <!-- click this button to stop video recording --> <button type="button" id="video_en" disabled onclick="stop_Recording(this, document.getElementById('video_st'))"> <i class="fa fa-stop"></i> </button> </div> <!-- ------------ --> <br> <hr> <!-- ------------ --> <div class="display-none" id="audio_rec"> <h3> Record Audio</h3> <!-- click this button to start audio recording --> <button type="button" id="aud_st" onclick="start_audio_Recording()"><i class="fa fa-play"></i> </button> <!-- click this button to stop video recording --> <button type="button" id="aud_en"disabled onclick="stop_Recording(this, document.getElementById('aud_st'))"> <i class="fa fa-stop"></i></button> </div> </body> </html>
当您点击“开始视频”按钮时,它将调用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 代码中,以实现视频和音频录制功能。
<!DOCTYPE html> <html> <head> <title>Video & Audio Recorder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; color: red; font-size: 1.2em; } //video start & end, Audio start & end button styling #video_st, #video_en, #aud_st, #aud_en{ margin-top: 10px; padding: 10px; border-radius: 4px; cursor: pointer; } #vidBox{ background-color: grey; } video { background-color: gray; display: block; margin: 6px auto; width: 420px; height: 240px; } audio { display: block; margin: 6px auto; } a { color: green; } </style> </head> <body> <h1 style="color:blue"> Video-Audio recorder</h1> <div class="display-none" id="vid-recorder"> <h3>Record Video </h3> <video autoplay id="vidBox"> </video> <button type="button" id="video_st" onclick="start_video_Recording()"> <i class="fa fa-play"></i></button> <button type="button" id="video_en" disabled onclick="stop_Recording(this, document.getElementById('video_st'))"> <i class="fa fa-stop"></i> </button> </div> <!-- ------------ --> <br> <hr> <!-- ------------ --> <div class="display-none" id="audio_rec"> <h3> Record Audio</h3> <button type="button" id="aud_st" onclick="start_audio_Recording()"><i class="fa fa-play"></i> </button> <button type="button" id="aud_en" disabled onclick="stop_Recording(this, document.getElementById('aud_st'))"> <i class="fa fa-stop"></i></button> </div> <script> //----------------------Video------------------------------------- function start_video_Recording() { //To stores the recorded media let chunks = []; const startBtn=document.getElementById("video_st"); const endBtn=document.getElementById("video_en"); // Access the 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) => { chunks.push(e.data); }; //stop the video recording medRec.onstop = () => { const blobFile = new Blob(chunks, { type:"video/mp4" });chunks = []; // 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; startBtn.disabled = true; endBtn.disabled = false; }); } //--------------------audio--------------------------------------- function start_audio_Recording() { //To stores the recorded media let chunksArr = []; const startBtn=document.getElementById("aud_st"); const endBtn=document.getElementById("aud_en"); // Access the camera and microphone navigator.mediaDevices.getUserMedia({audio: true, video: false}) .then((mediaStream) => { const medRec = new MediaRecorder(mediaStream); window.mediaStream = mediaStream; window.mediaRecorder = medRec; medRec.start(); //when recorded data is available then push into chunkArr array medRec.ondataavailable = (e) => { chunksArr.push(e.data); }; //stop the audio recording medRec.onstop = () => { const blob = new Blob(chunksArr, {type: "audio/mpeg"}); chunksArr = []; // create audio element and store the media which is recorded const recMediaFile = document.createElement("audio"); recMediaFile.controls = true; const RecUrl = URL.createObjectURL(blob); recMediaFile.src = RecUrl; document.getElementById(`audio_rec`).append( recMediaFile); }; startBtn.disabled = true; endBtn.disabled = false; }); } function stop_Recording(end, start) { //stop all tracks window.mediaRecorder.stop(); window.mediaStream.getTracks() .forEach((track) => {track.stop();}); //disable the stop button and enable the start button end.disabled = true; start.disabled = false; } </script> </body> </html>
从输出中可以看出,当单击视频开始按钮时,它会调用 start_video_Recording() 函数,并在该函数中调用 navigator.mediaDevices.getUserMedia() 方法,并打开一个权限菜单,用于查找视频和麦克风权限。它返回一个解析媒体流的承诺。在接收到音频或视频媒体流后,它会创建一个媒体记录器的实例,并通过调用上述代码中的函数 medRec.start() 来开始记录。
因此,您将了解使用 WebRTC 创建视频和音频录制的完整过程。