Comment créer des enregistreurs vidéo et audio à l'aide de l'API JavaScript MediaRecorder ?-js tutoriel-php.cn

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

Dans ce tutoriel, vous apprendrez à créer des enregistreurs audio et vidéo à l'aide de l'API JavaScript MediaRecorder. Cela peut donc être fait en utilisant WebRTC.

Qu'est-ce que WebRTC ?

WebRTC est l'abréviation de communication en temps réel. Nous pouvons accéder et capturer les appareils webcam et microphone disponibles sur l'appareil de l'utilisateur.

Nous pouvons accéder à la webcam et au microphone de l'appareil utilisateur à l'aide d'objets ECMAScript

navigator.mediaDevices.getUserMedia(constraints).

Copier après la connexion

Par conséquent, la fonction getUserMedia demandera par défaut l'autorisation de l'utilisateur pour utiliser votre webcam. Cette fonction renvoie une promesse et une fois que vous aurez cliqué sur OK et accepté, la fonction sera déclenchée et activera la webcam dans votre système, sinon si vous ne l'autorisez pas, elle dispose également d'une méthode de capture pour cela. La webcam sera éteint.

Nous pouvons également passer un paramètre à la fonction getUserMedia(), cela pourrait être comme si nous voulions une image d'une certaine largeur ou hauteur.

Conception frontale

Notre section frontend contiendra des éléments comme -

Pour l'écran d'enregistrement vidéo, il y aura quelques éléments comme -

L'élément vidéo de l'écran multimédia vidéo sera affiché
Le bouton Démarrer lancera l'enregistrement vidéo
Le bouton Stop arrêtera le flux d’enregistrement vidéo.

Pour l'enregistrement audio, il aura deux boutons

Le bouton Démarrer commencera l'enregistrement
Le bouton Stop arrêtera le flux d’enregistrement audio.

Nous ajouterons la police Awesome CDN pour ajouter des icônes de boutons de démarrage et d'arrêt et pour rendre la page plus attrayante, nous ajouterons des styles CSS sur les éléments.

Code HTML

Exemple

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

Copier après la connexion

Lorsque vous cliquez sur le bouton "Démarrer la vidéo", cela appellera la fonction start_video_Recording() et le bouton "Stop" appellera stop_Recording() De même pour l'audio, cliquer sur le bouton démarrer déclenchera la fonction start_audio_Recording(), pour le bouton d'arrêt, la fonction stop_Recording() sera appelée.

Fonction start_video_Recording()

Définissons une fonction pour démarrer la vidéo et l'enregistrer.

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

Copier après la connexion

Lorsque le bouton de démarrage est enfoncé, il appellera la fonction ci-dessus, qui déclenchera les méthodes de caméra et de microphone WebRTC pour obtenir l'autorisation d'enregistrement et activera le bouton d'arrêt de l'enregistrement et désactivera le bouton de démarrage de l'enregistrement.

Lorsque le bouton d'arrêt est enfoncé, il appellera la fonction stop() et arrêtera toutes les pistes de streaming multimédia.

Ensuite, afin d'enregistrer le flux multimédia, nous créerons une instance d'enregistreur multimédia et réorganiserons le flux multimédia ainsi que la réorganisation globale des médias. L'arrêt de la vidéo arrêtera alors la diffusion multimédia et la création de l'élément vidéo créera un nouvel élément vidéo et stockera les données multimédias enregistrées.

De même, la fonction start_audio_Recording() est également similaire à la fonction start_video_Recording(), mais nécessite quelques modifications.

Fonction stop_Recording()

Définissons maintenant une fonction pour arrêter l'enregistrement.

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

Copier après la connexion

Cette fonction arrêtera toutes les pistes multimédias stockées dans le flux multimédia.

Exemple

Ajoutons les fonctions ci-dessus au code HTML pour implémenter la fonctionnalité d'enregistrement vidéo et audio.

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

Copier après la connexion

Comme vous pouvez le voir sur la sortie, lorsque vous cliquez sur le bouton de démarrage de la vidéo, il appelle la fonction start_video_Recording() et dans cette fonction appelle la méthode navigator.mediaDevices.getUserMedia() et ouvre un menu d'autorisations pour trouver les autorisations vidéo et microphone. . Il renvoie une promesse d'analyser le flux multimédia. Après avoir reçu le flux multimédia audio ou vidéo, il crée une instance de l'enregistreur multimédia et commence l'enregistrement en appelant la fonction medRec.start() dans le code ci-dessus.

Ainsi, vous comprendrez le processus complet de création d'enregistrements vidéo et audio à l'aide de WebRTC.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment créer des enregistreurs vidéo et audio à l'aide de l'API JavaScript MediaRecorder ?

Qu'est-ce que WebRTC ?

Conception frontale

Code HTML

Exemple

Fonction start_video_Recording()

Fonction stop_Recording()

Exemple