← Cloudflare Realtime / realtime / realtimekit / recording-guide

Interaktivní nahrávky s časovanými metadaty

Funkce interaktivního nahrávání RealtimeKit umožňuje přidávat do video streamu časovaná metadata. Ta slouží klientům jako referenční body pro zobrazení informací a spouštění akcí synchronizovaných s časem. Klientům jsou metadata dostupná ve formě ID3 ↗ tagy na časové ose přehrávání.

Přemýšleli jste někdy nad tím, jak Netflix zobrazuje malé náhledy na posuvníku přehrávání, nebo jak Hotstar při sledování kriketového zápasu zobrazuje doplňkový obsah? Za vším stojí metadata vložená přímo do videa v konkrétním okamžiku, takzvaná časovaná metadata.

Časovaná metadata jsou metadata opatřená časovými razítky. Jde o digitální značky vkládané do videosouboru, které v konkrétních bodech obsahu poskytují další kontext a informace. Tyto datové body lze do streamu vkládat programově pomocí interactive_config v Start recording a meeting API.

Jakmile RealtimeKit zpracuje stream, časovaná metadata se synchronizují se zvukovými a video snímky. Tato metadata jsou dostupná všem divákům během přehrávání ve stejném okamžiku vzhledem ke streamu. Časový kód funguje jako signální bod a může na základě dat spouštět konkrétní akce. Například:

Tyto funkce jsou možné díky značkám ID3 vloženým do videosegmentů, díky nimž jsou dostupné i v nahraném videu.

Chcete-li do nahrávky RealtimeKit přidat interaktivitu, postupujte podle následujících kroků:

1. V Start recording a meeting API, předejte interactive_config .

Tento parametr umožňuje přidat do nahrávek časovaná metadata, která jsou klientům k dispozici ve formátu HLS prostřednictvím značek ID3. Výstupní soubory jsou zabalené jako soubor tar.

2. V RealtimeKitClient ↗, zavolejte broadcastMessage metodu s parametry, ID3 (jako řetězec) a yourData (data, která chcete odeslat jako časovaná metadata) na účastníci ↗ objekt.

meeting.participants.broadcastMessage(“ID3Data”, yourData);

3. Chcete-li přestat odesílat data, zavolejte následující metodu. Po jejím zavolání už nebude možné odesílat další data ID3.

meeting.participants.broadcastMessage(“ID3Data”,”CLOSE_TRANSPORT”)

Pokud tento parametr nepředáte, datový tok metadat ID3 se po zastavení nahrávání automaticky uzavře.

4. Jakmile je nahrávka dokončena, můžete načíst soubor tar, který obsahuje video segmenty a soubor s playlistem. Soubor download_url poskytuje odkaz na tar soubor. Níže je ukázkový snímek obrazovky tar souboru:

Je také důležité mít na paměti, že délka jednotlivých segmentů závisí na snímcích videa. Segmenty proto nemusí mít vždy stejnou délku, i když se obvykle blíží zadané délce segmentu nastavené při spuštění nahrávání. Výchozí délka segmentu je 10 sekund.

5. Stream můžete přehrát pomocí hls.js ↗.

const onFragChanged = (_) => {
  // We first try to find the right metadata track.
  // https://developer.mozilla.org/en-US/docs/Web/API/TextTrack
  const textTrackListCount = videoEl.textTracks.length;
  let metaTextTrack;
  for (let trackIndex = 0; trackIndex < textTrackListCount; trackIndex++) {
    const textTrack = videoEl.textTracks[trackIndex];
    if (textTrack.kind !== 'metadata') {
      continue;
    }
    textTrack.mode = 'showing';
    metaTextTrack = textTrack;
    break;
  }
  if (!metaTextTrack) {
    return;
  }
  // Add an oncuechange listener on that track.
  metaTextTrack.oncuechange = (event) => {
    let cue = metaTextTrack.activeCues[metaTextTrack.activeCues.length - 1];
    console.log(cue.value.data);
  };
};
// listen on Hls.Events.FRAG_CHANGED from hls.js
hls.on(Hls.Events.FRAG_CHANGED, onFragChanged);