← Cloudflare Realtime / realtime / realtimekit / recording-guide

Интерактивные записи с временными метаданными

Функция интерактивной записи RealtimeKit позволяет добавлять временные метаданные в видеопоток. Временные метаданные служат метками синхронизации, с помощью которых клиенты отображают информацию и запускают привязанные ко времени действия. Метаданные доступны клиентам в виде ID3 ↗ теги на шкале воспроизведения.

Вы когда-нибудь задумывались, как Netflix показывает маленькие изображения на полосе перемотки или как во время просмотра матча по крикету на Hotstar появляется дополнительный контент? Всё это метаданные, вставленные в видеопоток в определённый момент времени, и называется это timed metadata.

Метаданные с временными метками представляют собой метаданные, содержащие временные метки. Это цифровые маркеры, добавляемые в видеофайл для предоставления дополнительного контекста и информации в определённых точках контента. Такие точки данных можно добавлять в поток программно с помощью interactive_config в API для начала записи встречи.

После того как RealtimeKit обработает поток, метаданные с временными метками синхронизируются с аудио- и видеокадрами. Эти метаданные доступны всем зрителям во время воспроизведения в тот же момент относительно потока. Таймкод действует как опорная точка (cue point) и может запускать определённые действия на основе этих данных. Например:

Эти функции стали возможны благодаря тегам ID3, встроенным в видеосегменты, что делает их доступными в записанном видео.

Чтобы добавить интерактивность в запись RealtimeKit, выполните следующие шаги:

1. В API для начала записи встречи, передайте interactive_config параметр.

Этот параметр позволяет добавлять к записям метаданные с временными метками, которые становятся доступны клиентам в формате HLS через теги ID3. Выходные файлы упаковываются в tar-файл.

2. В RealtimeKitClient ↗, вызовите broadcastMessage метод с параметрами, ID3 (в виде строки) и yourData (данные, которые нужно отправить как метаданные с временной меткой) в участники ↗ объект.

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

3. Чтобы прекратить отправку данных, вызовите следующий метод. После этого вызова вы больше не сможете отправлять дополнительные данные ID3.

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

Если не передать этот параметр, поток метаданных ID3 будет автоматически закрыт при остановке записи.

4. После завершения записи вы можете получить tar-файл, содержащий видеосегменты и файл плейлиста. download_url предоставляет ссылку на tar-файл. Ниже показан пример скриншота tar-файла:

Также важно учитывать, что длина каждого сегмента зависит от кадров видео. Поэтому длина сегментов может отличаться, хотя обычно она близка к длине сегмента, указанной при запуске записи. По умолчанию длина сегмента составляет 10 секунд.

5. Вы можете воспроизвести поток с помощью 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);