首页 >web前端 >js教程 >如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？

如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？

WBOY转载: 2023-09-13 23:57:021398浏览

在本教程中，您将学习如何使用 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 创建视频和音频录制的完整过程。

以上是如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css ecmascript html catch 对象 promise

声明：

本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除

上一篇：如何使用 JavaScript 动态创建表单下一篇：如何使用 FabricJS 设置圆的旋转角度？

查看更多