Web API Kochbuch

Kapitel 18. Medien

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Einführung

Moderne Browser haben umfangreiche APIs für die Arbeit mit Video- und Audiostreams. Die WebRTC-API unterstützt die Erstellung dieser Streams von Geräten wie Kameras.

Ein Videostream kann innerhalb eines <video> Elements live abgespielt werden. Von dort aus kannst du einen Frame des Videos aufnehmen, um ihn als Bild zu speichern oder zu einer API hochzuladen. Ein <video> Element kann auch verwendet werden, um Videos abzuspielen, die von einem Stream aufgezeichnet wurden.

Bevor diese APIs verfügbar waren, hättest du Browser-Plug-ins gebraucht, um auf die Kamera des Nutzers zuzugreifen. Heute kannst du die Media Capture and Streams API verwenden, um mit nur wenig Code Daten von der Kamera und dem Mikrofon zu lesen.

Aufzeichnung des Bildschirms

Problem

Du möchtest ein Video vom Bildschirm des Nutzers aufnehmen.

Lösung

Verwende die Screen Capture API, um ein Video des Bildschirms aufzunehmen, und lege es dann als Quelle für ein <video> Element fest (siehe Beispiel 18-1).

Beispiel 18-1. Ein Video des Bildschirms aufnehmen

async function captureScreen() {
  const stream = await navigator.mediaDevices.getDisplayMedia();
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm'
  });

  mediaRecorder.addEventListener('dataavailable', event => {
    const blob = new Blob([event.data], {
      type: 'video/webm',
    });

    const ...