Bagaimana untuk membuat perakam video dan audio menggunakan JavaScript MediaRecorder API?-tutorial js-php.cn

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

在本教程中，您将学习如何使用 JavaScript MediaRecorder API 创建音频和视频录制器。所以这可以使用 WebRTC 来完成。

什么是 WebRTC？

WebRTC 是实时通信的简称。我们可以访问并捕获用户设备中可用的网络摄像头和麦克风设备。

我们可以使用 ECMAScript 对象访问用户设备的网络摄像头和麦克风

navigator.mediaDevices.getUserMedia(constraints).

Salin selepas log masuk

因此，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>

Salin selepas log masuk

当您点击“开始视频”按钮时，它将调用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;
   });
}

Salin selepas log masuk

当按下开始按钮时，它将调用上述函数，这将触发 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;
}

Salin selepas log masuk

此函数将停止存储在媒体流中的所有媒体轨道。

示例

让我们将上述函数添加到 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>

Salin selepas log masuk

从输出中可以看出，当单击视频开始按钮时，它会调用 start_video_Recording() 函数，并在该函数中调用 navigator.mediaDevices.getUserMedia() 方法，并打开一个权限菜单，用于查找视频和麦克风权限。它返回一个解析媒体流的承诺。在接收到音频或视频媒体流后，它会创建一个媒体记录器的实例，并通过调用上述代码中的函数 medRec.start() 来开始记录。

因此，您将了解使用 WebRTC 创建视频和音频录制的完整过程。

Atas ialah kandungan terperinci Bagaimana untuk membuat perakam video dan audio menggunakan JavaScript MediaRecorder API?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!