Guide d’encodage de vidéos pour le streaming avec Transloadit

Tyler McAllister

Rédacteur technique · Trondheim, Norvège · Afficher la bio

Comme nous chez Transloadit, vous appréciez probablement les services de streaming 🎥 Mais avez-vous déjà envisagé de lancer le vôtre ? Notre Robot /video/adaptive est là pour vous si cette idée un peu folle vous tente ! Vous pouvez utiliser ce Robot pour encoder des vidéos mp4 ou webm en HLS (HTTP Live Streaming) ou en MPEG-DASH.

Dans cet article, nous vous guiderons dans la création d’un lecteur adaptatif simple en React, servant de preuve de concept. Il permet de lire des vidéos en streaming HLS ou MPEG-DASH selon la compatibilité du navigateur, dans le même esprit que l’une de nos démos JavaScript EN (English).

Que sont HLS et MPEG-DASH ?

Avant de commencer, précisons ce que sont HLS et MPEG-Dash. Ces deux protocoles de streaming segmentent les données vidéo en petits fragments qui peuvent être téléchargés sur un appareil via HTTP. Tous deux permettent une lecture adaptative, qui passe d’une version encodée à une autre selon les conditions du réseau. Les appareils Apple prennent en charge la lecture HLS nativement, tandis que MPEG-DASH est un standard ouvert généralement lu à l’aide d’un lecteur JavaScript. La lecture et la transmission chiffrée dépendent du navigateur, du lecteur, des codecs et de l’implémentation du DRM, et pas seulement du format de la playlist.

Pour ce guide, nous encoderons les vidéos dans les deux formats afin de les utiliser avec un lecteur vidéo adaptatif.

Stocker nos fichiers via une Assembly

Nous pouvons passer directement à l’Assembly ci-dessous pour voir comment utiliser le Robot.

{
  "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}"
    }
  }
}

Ne vous laissez pas impressionner par la longueur de ces Assembly Instructions. Examinons-les en détail.

Dans le premier Step, le rôle du Robot /upload/handle est clair. Nous l’utilisons pour récupérer une vidéo fournie par un utilisateur final.

Ensuite, le Robot /video/encode encode la vidéo téléversée en HLS et en MPEG-DASH dans les Steps hls-encode et dash-encode, respectivement. Ces Steps sont nécessaires au Robot /video/adaptive.

Puisque nous allons utiliser un lecteur vidéo, il serait également utile de pouvoir extraire facilement une miniature de notre vidéo. Heureusement, c’est exactement ce que fait le Robot /video/thumbs EN (English) au Step thumbnailed ✨

Nous arrivons maintenant à la vedette : le Robot /video/adaptive. Dans l’Assembly, nous avons réparti ses tâches entre deux Steps distincts : hls-adaptive et dash-adaptive. Examinons les paramètres fournis à ce Robot. Ces Steps prennent chacun les vidéos encodées correspondantes et génèrent respectivement une playlist .m3u8 et une playlist .mpd. Les fichiers des protocoles MPEG-DASH et HLS comprennent une playlist (.m3u8 ou .mpd) et une série de segments. Le fichier de playlist recherche simplement les segments associés nécessaires à la diffusion de la vidéo et les lit dans l’ordre.

Avec segment_duration, nous pouvons définir la durée maximale de chaque segment de la vidéo diffusée en streaming. Ce point peut être important pour tenir compte du forfait de données et de la capacité de téléchargement de vos utilisateurs. Autre particularité de ces protocoles : nous devons veiller à ce que les segments se trouvent toujours dans le même répertoire que leur playlist, sinon celle-ci ne pourra pas les trouver. Heureusement, au tout dernier Step, le Robot /google/store définit le chemin des fichiers MPEG-DASH et HLS selon un chemin donné, par exemple stream-videos/dash-video/${file.name}. Tous les fichiers devraient ainsi être regroupés correctement. Veillez simplement à configurer l’autorisation storage.objects.create dans votre bucket (voir les autorisations). Nous stockons également la miniature avec le même Robot.

La branche DASH minimale ci-dessus encode uniquement la vidéo. Pour obtenir un flux DASH avec du son, ajoutez une version audio et regroupez-la avec la vidéo, comme dans notre démo MPEG-DASH EN (English).

Une preuve de concept avec React

Griffith⁠ est un lecteur vidéo pour React très facile à prendre en main. Il reçoit des props contenant les propriétés du lecteur et un objet sources composé de l’URL de la vidéo et de son format.

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',
  },
}

Cette preuve de concept historique vérifie la prise en charge native des médias avec le code suivant. Elle ne détecte pas la prise en charge de la lecture fournie par les bibliothèques JavaScript via Media Source Extensions ; utilisez les vérifications des capacités de votre lecteur lorsque vous intégrez une telle bibliothèque.

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

Vous trouverez mon implémentation simple ici⁠. Le Robot /video/adaptive simplifie vraiment la génération de médias pour le streaming. Alors que la consommation de vidéos sur Internet augmente, nous sommes convaincus que ce Robot pourrait s’avérer utile à ceux qui recherchent une solution simple et élégante.

Pour aller plus loin, notre démo Rendre une vidéo compatible avec tous les appareils EN (English) pourrait vous intéresser. Elle montre comment combiner cette approche avec d’autres formats selon ce que l’appareil de lecture prend en charge, et fournit un exemple de code pour un lecteur sans React : Plyr⁠.