Aufzeichnen von Videos mit JavaScript und Browser-APIs

In der modernen Webentwicklungslandschaft ist die Interaktion mit Benutzerhardware (wie Kameras und Mikrofonen) durch das Aufkommen verschiedener Browser-APIs viel einfacher geworden. Eine dieser nützlichen APIs ist die MediaRecorder-API, mit der Entwickler Audio und Video direkt über den Browser aufzeichnen können.

In diesem Beitrag erfahren Sie, wie Sie mithilfe von JavaScript Videos aufzeichnen, indem Sie auf die Webcam des Benutzers zugreifen, den Videostream aufzeichnen und das aufgezeichnete Video zum Download anbieten – alles über Browser-APIs!

Warum die MediaRecorder-API verwenden?

Traditionell waren für die Aufnahme von Medieninhalten eines Benutzers externe Tools oder Plugins (wie Flash) erforderlich. Mit dem WebRTC-Stack können Sie jedoch ganz einfach Videos aufnehmen, Peer-to-Peer-Verbindungen erstellen und mit Mediengeräten wie Kameras, Mikrofonen und Bildschirmen interagieren – ohne dass dafür Tools von Drittanbietern erforderlich sind.

Die MediaRecorder-API ist Teil dieses Stacks und macht die Videoaufzeichnung im Browser zu einem nahtlosen Prozess.

Schritte zum Aufzeichnen von Videos im Browser

Um Videos aufzunehmen, werden wir:

1. Zugriff auf die Webcam mit der Methode getUserMedia() über die navigator.mediaDevices-Schnittstelle.
2. Den Stream aufzeichnen mit der MediaRecorder-API.
3. Geben Sie einen Download-Link an, damit Benutzer das aufgezeichnete Video speichern können.

Sehen wir uns die Code-Implementierung an.

Beispiel: Video im Browser aufnehmen

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Recorder</title>


  <h1 id="Video-Recorder-using-JavaScript">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>

Den Code aufschlüsseln:

1. Zugriff auf die Webcam des Benutzers

Wir verwenden die Methode navigator.mediaDevices.getUserMedia(), um Zugriff auf die Kamera und das Mikrofon des Benutzers anzufordern.

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

Diese Methode gibt ein Promise zurück, das in ein MediaStream-Objekt aufgelöst wird, das das Live-Video und -Audio von der Kamera des Benutzers enthält. Das Video wird dann mit der Funktion

2. Aufzeichnen des Videostreams

Sobald wir den Live-Stream haben, können wir eine Instanz von MediaRecorder erstellen, um das Video aufzuzeichnen.

mediaRecorder = new MediaRecorder(stream);

Der MediaRecorder erfasst den Stream in Blöcken und jedes Mal, wenn Daten verfügbar sind, wird das Ereignis ondataavailable ausgelöst. Wir speichern diese Chunks in einem Array namens „recordedChunks.
“.

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

3. Aufnahme stoppen und Video speichern

Wenn die Aufnahme gestoppt wird, kombinieren wir die Blöcke zu einem Blob und erstellen eine URL zum Herunterladen des Videos.

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

Das Video kann jetzt im Bereich

Schaltflächen und Benutzerinteraktion

Wir haben zwei Schaltflächen hinzugefügt, um die Aufnahme zu steuern:

• Start-Button: Startet die Aufnahme durch Aufruf von mediaRecorder.start().
• Stopp-Schaltfläche: Stoppt die Aufnahme durch Aufruf von mediaRecorder.stop().

Die Schaltflächen werden ebenfalls deaktiviert bzw. entsprechend aktiviert, um unnötige Interaktionen während des Vorgangs zu verhindern.

Zusätzliche Funktionen, die Sie hinzufügen können

• Aufnahme anhalten/fortsetzen: Sie können Schaltflächen zum Anhalten und Fortsetzen mithilfe der Methoden mediaRecorder.pause() und mediaRecorder.resume() hinzufügen.
• Videoformat: Standardmäßig wird die Aufnahme als .webm-Datei gespeichert, Sie können den MIME-Typ jedoch je nach Browserunterstützung ändern, z. B. video/mp4.
• Videos hochladen: Sie können die Funktionalität erweitern, um das aufgezeichnete Video zur weiteren Verarbeitung oder Analyse auf einen Server hochzuladen.

Abschluss

Das Aufzeichnen von Videos direkt im Browser mithilfe von JavaScript ist mit der MediaRecorder-API und der Methode getUserMedia() unglaublich einfach geworden. Mit diesen Tools können Sie leistungsstarke, medienreiche Anwendungen direkt im Browser erstellen, ohne dass externe Software erforderlich ist.

Wenn Sie dem obigen Beispiel folgen, können Sie ganz einfach Videoaufzeichnungsfunktionen in Ihre Webanwendungen implementieren und Benutzern die Möglichkeit bieten, Videos direkt über ihren Browser aufzuzeichnen, in der Vorschau anzuzeigen und herunterzuladen.

---

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonAufzeichnen von Videos mit JavaScript und Browser-APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!