Leitfaden zum Encoding von Videos für Streaming mit Transloadit

Tyler McAllister

Technischer Redakteur · Trondheim, Norwegen · Bio anzeigen

Wie wir bei Transloadit sind Sie wahrscheinlich ein Fan von Streaming-Diensten 🎥 Aber haben Sie schon einmal daran gedacht, einen eigenen zu starten? Falls Sie tatsächlich so eine verwegene Idee hatten: Unser Robot /video/adaptive hilft Ihnen dabei! Mit diesem Robot können Sie Videos im Format mp4 oder webm entweder nach HLS (HTTP Live Streaming) oder MPEG-DASH codieren.

In diesem Blogbeitrag führen wir Sie durch die Erstellung eines einfachen adaptiven Players als Proof of Concept in React, der je nach Kompatibilität des Browsers HLS- oder MPEG-DASH-Video streamen kann, ähnlich wie eine unserer JavaScript-Demos EN (English).

Was sind HLS und MPEG-DASH?

Bevor wir loslegen, klären wir, was HLS und MPEG-Dash genau sind. Beide sind Streaming-Protokolle, die Videodaten in kleine Chunks aufteilen, die per HTTP auf ein Gerät heruntergeladen werden können. Beide Protokolle unterstützen adaptive Wiedergabe und wechseln zwischen codierten Versionen, wenn sich die Netzwerkbedingungen ändern. HLS wird auf Apple-Geräten nativ wiedergegeben, während MPEG-DASH ein offener Standard ist, der üblicherweise über einen JavaScript-Player abgespielt wird. Wiedergabe und verschlüsselte Auslieferung hängen vom Browser, vom Player, von den Codecs und von der DRM-Implementierung ab, nicht nur vom Playlist-Format.

Für diese Anleitung codieren wir in beide Formate und arbeiten damit in einem adaptiven Video-Player.

Unsere Dateien per Assembly speichern

Wir können direkt in die Assembly unten springen, um einen Überblick zu bekommen, wie der Robot eingesetzt wird.

{
  "steps": {
    ":original": {
      "robot": "/upload/handle"
    },
    "hls-encode": {
      "use": ":original",
      "robot": "/video/encode",
      "ffmpeg_stack": "v7",
      "preset": "hls-720p"
    },
    "dash-encode": {
      "use": ":original",
      "robot": "/video/encode",
      "ffmpeg_stack": "v7",
      "preset": "dash-720p-video"
    },
    "thumbnailed": {
      "use": "hls-encode",
      "robot": "/video/thumbs",
      "result": true,
      "ffmpeg_stack": "v7"
    },
    "hls-adaptive": {
      "use": {
        "steps": ["hls-encode"],
        "bundle_steps": true
      },
      "robot": "/video/adaptive",
      "ffmpeg_stack": "v7",
      "playlist_name": "my_playlist.m3u8",
      "segment_duration": 6,
      "closed_captions": false,
      "technique": "hls"
    },
    "dash-adaptive": {
      "use": {
        "steps": ["dash-encode"],
        "bundle_steps": true
      },
      "robot": "/video/adaptive",
      "ffmpeg_stack": "v7",
      "playlist_name": "my_playlist.mpd",
      "segment_duration": 6,
      "technique": "dash"
    },
    "export-plain": {
      "use": "thumbnailed",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/${file.name}"
    },
    "export-hls": {
      "use": "hls-adaptive",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/hls-video/${file.name}"
    },
    "export-dash": {
      "use": "dash-adaptive",
      "robot": "/google/store",
      "credentials": "stream-test",
      "acl": "public-read",
      "path": "stream-videos/dash-video/${file.name}"
    }
  }
}

Lassen Sie sich vom Umfang dieser Assembly Instructions nicht beunruhigen. Gehen wir sie durch.

Im ersten Step ist klar, wozu der Robot /upload/handle dient. Wir nutzen ihn, um ein Video von Endnutzern zu erhalten.

Zweitens codiert der Robot /video/encode das hochgeladene Video in den Steps hls-encode bzw. dash-encode nach HLS und MPEG-DASH. Diese Steps sind für den Robot /video/adaptive erforderlich.

Drittens: Da wir mit einem Video-Player arbeiten werden, wäre es nützlich, wenn wir ganz einfach ein Thumbnail aus unserem Video extrahieren könnten. Genau das macht zum Glück der Robot /video/thumbs im Step thumbnailed ✨

Jetzt kommen wir zum Star der Show: dem Robot /video/adaptive. In der Assembly haben wir seine Aufgaben auf zwei separate Steps aufgeteilt: hls-adaptive und dash-adaptive. Sehen wir uns die Parameter an, die dieser Robot erhält. Sie nehmen die jeweils codierten Videos und erzeugen daraus eine Playlist im Format .m3u8 bzw. .mpd. MPEG-DASH- und HLS-Protokolldateien bestehen aus einer Playlist (.m3u8 oder .mpd) und einer Folge von Segmenten. Die Playlist-Datei sucht einfach die zugehörigen Segmente, die für das Streaming des Videos nötig sind, und spielt sie nacheinander ab.

Mit segment_duration können wir festlegen, wie lang jedes Segment des Streaming-Videos maximal sein darf. Das kann ein wichtiger Punkt sein, wenn Sie an das Datenvolumen und die Downloadkapazität Ihrer Nutzer denken. Eine weitere Eigenheit dieser Protokolle ist, dass ihre Segmente immer im selben Verzeichnis wie ihre Playlist liegen müssen, sonst suchen die Playlists nach Segmenten, die sie nicht finden können. Zum Glück setzt der Robot /google/store im letzten Step den Pfad für die MPEG-DASH- und HLS-Dateien auf einen definierten Pfad wie stream-videos/dash-video/${file.name}. So liegt alles schön beisammen. Achten Sie nur darauf, für storage.objects.create die Berechtigungen in Ihrem Bucket einzurichten. Das Thumbnail speichern wir mit demselben Robot.

Der minimale DASH-Zweig oben codiert nur Video. Für einen DASH-Stream mit Ton fügen Sie eine Audiovariante hinzu und bündeln sie mit dem Video, wie in unserer MPEG-DASH-Demo EN (English) gezeigt.

Ein Proof of Concept mit React

Griffith⁠ ist ein Video-Player für React, mit dem der Einstieg sehr leicht fällt. Er nimmt Props entgegen, die die Eigenschaften des Players enthalten, sowie ein Objekt namens sources, das aus der URL des Videos und dessen Format besteht.

var sources = {
  hd: {
    bitrate: 905,
    size: 10105235,
    duration: 0,
    width: 1280,
    height: 720,
    play_url: 'https://storage.googleapis.com/yourbucket/stream-videos/hls-video/my_playlist.m3u8',
  },
}

Dieses historische Proof of Concept prüft die native Medienunterstützung mit dem folgenden Code. Es erkennt keine Wiedergabeunterstützung, die JavaScript-Bibliotheken über Media Source Extensions bereitstellen; nutzen Sie beim Einbinden einer solchen Bibliothek die Funktionsprüfungen Ihres Players.

function checkCompatibility() {
  var compatibility = document.createElement('video')
  if (compatibility.canPlayType('application/x-mpegURL')) {
    return build_sources('m3u8', 'my_playlist')
  }
  if (compatibility.canPlayType('application/dash+xml')) {
    return build_sources('mpd', 'my_playlist')
  }
  console.log('No native streaming support found')
}

Meine einfache Implementierung finden Sie hier⁠. Der Robot /video/adaptive vereinfacht die Erzeugung von Streaming-Medien wirklich erheblich. Da Menschen immer mehr Videos über das Internet konsumieren, sind wir zuversichtlich, dass sich dieser Robot als nützliches Werkzeug für alle erweist, die eine einfache und elegante Lösung suchen.

Zur weiteren Lektüre könnte Sie unsere Demo Videos für alle Geräte kompatibel machen EN (English) interessieren: Sie zeigt, wie Sie dies je nach Unterstützung des Wiedergabegeräts mit anderen Formaten kombinieren, und enthält Beispielcode für einen Player ohne React: Plyr⁠.