Enregistrement de vidéos à l'aide de JavaScript et des API du navigateur-js tutoriel-php.cn

Enregistrement de vidéos à l'aide de JavaScript et des API du navigateur

DDD

Libérer： 2024-10-18 22:43:30

original

505 Les gens l'ont consulté

Recording Videos Using JavaScript and Browser APIs

Dans le paysage moderne du développement Web, l'interaction avec le matériel utilisateur (comme les caméras et les microphones) est devenue beaucoup plus facile avec l'avènement de diverses API de navigateur. L'une de ces API utiles est l'API MediaRecorder, qui permet aux développeurs d'enregistrer de l'audio et de la vidéo directement à partir du navigateur.

Dans cet article, nous expliquerons comment enregistrer des vidéos à l'aide de JavaScript en accédant à la webcam de l'utilisateur, en enregistrant le flux vidéo et en proposant la vidéo enregistrée en téléchargement, le tout via les API du navigateur !

Pourquoi utiliser l'API MediaRecorder ?

Traditionnellement, l'enregistrement du contenu multimédia d'un utilisateur nécessitait des outils ou des plugins externes (comme Flash). Cependant, avec la pile WebRTC, vous pouvez facilement enregistrer des vidéos, créer des connexions peer-to-peer et interagir avec des appareils multimédias tels que des caméras, des microphones et des écrans, sans avoir besoin d'outils tiers.

L'API MediaRecorder fait partie de cette pile, faisant de l'enregistrement vidéo dans le navigateur un processus transparent.

Étapes pour enregistrer des vidéos dans le navigateur

Pour enregistrer des vidéos, nous allons :

Accédez à la webcam en utilisant la méthode getUserMedia() depuis l'interface navigator.mediaDevices.
Enregistrez le flux à l'aide de l'API MediaRecorder.
Fournissez un lien de téléchargement afin que les utilisateurs puissent sauvegarder la vidéo enregistrée.

Regardons l'implémentation du code.

Exemple : enregistrement d'une vidéo dans le navigateur

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Recorder</title>
</head>
<body>
  <h1>Video Recorder using JavaScript</h1>

  <video id="video" autoplay></video>
  <button id="start-btn">Start Recording</button>
  <button id="stop-btn" disabled>Stop Recording</button>
  <video id="recorded-video" controls></video>
  <a id="download-link" download="recorded-video.webm">Download Recorded Video</a>

  <script>
    const videoElement = document.getElementById('video');
    const startButton = document.getElementById('start-btn');
    const stopButton = document.getElementById('stop-btn');
    const recordedVideoElement = document.getElementById('recorded-video');
    const downloadLink = document.getElementById('download-link');

    let mediaRecorder;
    let recordedChunks = [];

    // Access webcam
    async function startVideoStream() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      videoElement.srcObject = stream;

      // Set up MediaRecorder to record the stream
      mediaRecorder = new MediaRecorder(stream);

      // When data becomes available, store it
      mediaRecorder.ondataavailable = (event) => {
        if (event.data.size > 0) {
          recordedChunks.push(event.data);
        }
      };

      // When recording stops, create a video blob and show it
      mediaRecorder.onstop = () => {
        const blob = new Blob(recordedChunks, { type: 'video/webm' });
        const videoURL = URL.createObjectURL(blob);
        recordedVideoElement.src = videoURL;
        downloadLink.href = videoURL;
      };
    }

    // Start recording
    startButton.addEventListener('click', () => {
      recordedChunks = [];
      mediaRecorder.start();
      startButton.disabled = true;
      stopButton.disabled = false;
    });

    // Stop recording
    stopButton.addEventListener('click', () => {
      mediaRecorder.stop();
      startButton.disabled = false;
      stopButton.disabled = true;
    });

    // Initialize the video stream
    startVideoStream();
  </script>
</body>
</html>

Copier après la connexion

Décrypter le code :

1. Accéder à la webcam de l'utilisateur

Nous utilisons la méthode navigator.mediaDevices.getUserMedia() pour demander l'accès à la caméra et au microphone de l'utilisateur.

const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
videoElement.srcObject = stream;

Copier après la connexion

Cette méthode renvoie une promesse qui se résout en un objet MediaStream, qui contient la vidéo et l'audio en direct de la caméra de l'utilisateur. La vidéo est ensuite affichée à l'aide de l'option

2. Enregistrement du flux vidéo

Une fois que nous avons le flux en direct, nous pouvons créer une instance de MediaRecorder pour enregistrer la vidéo.

mediaRecorder = new MediaRecorder(stream);

Copier après la connexion

Le MediaRecorder capturera le flux en morceaux, et chaque fois que des données sont disponibles, l'événement ondataavailable est déclenché. Nous stockons ces morceaux dans un tableau appelé recordChunks.

mediaRecorder.ondataavailable = (event) => {
  if (event.data.size > 0) {
    recordedChunks.push(event.data);
  }
};

Copier après la connexion

3. Arrêter l'enregistrement et sauvegarder la vidéo

Lorsque l'enregistrement est arrêté, nous combinons les morceaux dans un Blob et créons une URL pour télécharger la vidéo.

mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const videoURL = URL.createObjectURL(blob);
  recordedVideoElement.src = videoURL;
  downloadLink.href = videoURL;
};

Copier après la connexion

La vidéo peut maintenant être lue dans le menu ou téléchargé à l'aide de l'élément élément.

Boutons et interaction utilisateur

Nous avons ajouté deux boutons pour contrôler l'enregistrement :

Bouton Démarrer : démarre l'enregistrement en appelant mediaRecorder.start().
Bouton Stop : arrête l'enregistrement en appelant mediaRecorder.stop().

Les boutons sont également désactivés ou activés en conséquence pour éviter les interactions inutiles pendant le processus.

Fonctionnalités supplémentaires que vous pouvez ajouter

Pause/Reprendre l'enregistrement : Vous pouvez ajouter des boutons de pause et de reprise à l'aide des méthodes mediaRecorder.pause() et mediaRecorder.resume().
Format vidéo : Par défaut, l'enregistrement est enregistré sous forme de fichier .webm, mais vous pouvez modifier le type MIME en fonction de la prise en charge du navigateur, comme video/mp4.
Téléchargement de vidéos : vous pouvez étendre la fonctionnalité pour télécharger la vidéo enregistrée sur un serveur pour un traitement ou une analyse ultérieure.

Conclusion

Enregistrer des vidéos directement dans le navigateur à l'aide de JavaScript est devenu incroyablement simple grâce à l'API MediaRecorder et à la méthode getUserMedia(). Ces outils vous permettent de créer des applications puissantes et riches en médias directement dans le navigateur sans nécessiter de logiciel externe.

En suivant l'exemple ci-dessus, vous pouvez facilement implémenter la fonctionnalité d'enregistrement vidéo dans vos applications Web, offrant aux utilisateurs la possibilité d'enregistrer, de prévisualiser et de télécharger des vidéos directement depuis leur navigateur.