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

2025-01-27 云资源网 前端开发教程 已收录 关注 15次
当前位置：云资源网 > 技术教程 > 前端开发教程 > 如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？
正文概述

在本教程中，您将学习如何使用 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 创建视频和音频录制器？的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 如何使用 JavaScript MediaRecorder API 创建视频和音频录制器？

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了？
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
你们有qq群吗怎么加入？
当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://sudo1.com/page-qun.html。

云资源网 钻石

喜欢 0
分享到：

相关推荐

  • 会员数(个)
  • 12275资源数(个)
    •        
  • 资源(G)
    •        
  • 今日下载
  • 1365稳定运行(天)

提供最优质的资源集合

立即查看 了解详情