Wie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?-js-Tutorial-php.cn

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

In diesem Tutorial erfahren Sie, wie Sie mit der JavaScript MediaRecorder API Audio- und Videorecorder erstellen. Dies kann also mit WebRTC erfolgen.

Was ist WebRTC?

WebRTC ist die Abkürzung für Echtzeitkommunikation. Wir können auf die auf dem Gerät des Benutzers verfügbaren Webcam- und Mikrofongeräte zugreifen und diese erfassen.

Wir können mithilfe von ECMAScript-Objekten auf die Webcam und das Mikrofon des Benutzergeräts zugreifen

navigator.mediaDevices.getUserMedia(constraints).

Nach dem Login kopieren

Daher fragt die Funktion getUserMedia standardmäßig nach der Benutzererlaubnis zur Verwendung Ihrer Webcam. Diese Funktion gibt ein Versprechen zurück und sobald Sie auf OK klicken und zustimmen, wird die Funktion ausgelöst und aktiviert die Webcam in Ihrem System. Andernfalls, wenn Sie dies nicht zulassen, verfügt sie auch über eine Fangmethode dafür. Die Webcam wird aktiviert ausgeschaltet.

Wir können der Funktion getUserMedia() auch einen Parameter übergeben. Dies könnte beispielsweise sein, wenn wir ein Bild mit einer bestimmten Breite oder Höhe wünschen.

Frontend-Design

Unser Frontend-Bereich enthält Elemente wie -

Für den Videoaufnahmebildschirm gibt es einige Elemente wie -

Das Videoelement des Videomedienbildschirms wird angezeigt
Start-Taste startet die Videoaufnahme
Stopp-Taste stoppt den Videoaufzeichnungsstream.

Für die

Audioaufnahmegibt es zwei Tasten

Start-Taste startet die Aufnahme
Stopp-Taste stoppt den Audioaufnahme-Stream.

Wir werden die Schriftart Awesome CDN hinzufügen, um Start- und Stoppschaltflächensymbole hinzuzufügen, und um die Seite attraktiver zu gestalten, werden wir den Elementen CSS-Stile hinzufügen.

HTML-Code

Beispiel

<!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>

Nach dem Login kopieren

Wenn Sie auf die Schaltfläche „

Video starten“ klicken, wird die Funktion start_video_Recording() aufgerufen, und die Schaltfläche „Stopp“ ruft stop_Recording () auf. Ähnlich verhält es sich bei Audio: Wenn Sie auf die Schaltfläche „Start“ klicken, wird die Funktion ausgelöst start_audio_Recording (), für die Stopptaste wird die Funktion stop_Recording() aufgerufen.

start_video_Recording()-Funktion

Lassen Sie uns eine Funktion definieren, um das Video zu starten und aufzuzeichnen.

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;
   });
}

Nach dem Login kopieren

Wenn die Starttaste gedrückt wird, wird die obige Funktion aufgerufen, die die WebRTC-Kamera- und Mikrofonmethoden auslöst, um die Aufnahmeberechtigung zu erhalten, und die Schaltfläche zum Beenden der Aufnahme aktiviert und die Schaltfläche zum Starten der Aufnahme deaktiviert.

Wenn die Stopp-Taste gedrückt wird, wird die Funktion stop() aufgerufen und alle Medien-Streaming-Titel gestoppt.

Um dann den Medienstream aufzuzeichnen, erstellen wir eine Medienrecorder-Instanz und nehmen den Medienstream sowie die Medienneuordnung global vor. Durch Stoppen des Videos wird das Medien-Streaming gestoppt und durch Erstellen des Videoelements wird ein neues Videoelement erstellt und die aufgezeichneten Mediendaten gespeichert.

In ähnlicher Weise ähnelt die Funktion

start_audio_Recording() auch der Funktion start_video_Recording(), erfordert jedoch einige Änderungen.

stop_Recording()-Funktion

Jetzt definieren wir eine Funktion zum Stoppen der Aufnahme.

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;
}

Nach dem Login kopieren

Diese Funktion stoppt alle im Medienstream gespeicherten Medientitel.

Beispiel

Fügen wir die oben genannten Funktionen zum HTML-Code hinzu, um die Video- und Audioaufzeichnungsfunktion zu implementieren.

<!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>

Nach dem Login kopieren

Wie Sie der Ausgabe entnehmen können, wird beim Klicken auf die Videostartschaltfläche die Funktion start_video_Recording() aufgerufen. In dieser Funktion wird die Methode navigator.mediaDevices.getUserMedia() aufgerufen und ein Berechtigungsmenü zum Suchen der Video- und Mikrofonberechtigungen geöffnet . Es gibt ein Versprechen zurück, den Medienstream zu analysieren. Nach dem Empfang des Audio- oder Video-Medienstreams erstellt es eine Instanz des Medienrekorders und startet die Aufnahme durch Aufrufen der Funktion medRec.start() im obigen Code.

Somit verstehen Sie den gesamten Prozess der Erstellung von Video- und Audioaufnahmen mit WebRTC.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Video- und Audiorecorder mit der JavaScript MediaRecorder API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!