Как добавить предварительно записанные видео с помощью SDK Amazon IVS Web Broadcast

Существует несколько вариантов прямой трансляции на канал Amazon Interactive Video Service (Amazon IVS). Вы (и ваши пользователи) можете выбрать один из множества сторонних программных продуктов, таких как OBS, Streamlabs Desktop, Lightstream и т. д. Вы также можете создать мобильную версию с одним из наших нативные SDK для вещания для iOS или Android. Еще одним вариантом трансляции является SDK веб-трансляции, который позволяет разработчикам создавать динамичные высококачественные прямые трансляции. потоковое вещание прямо в браузере.

С помощью Web Broadcast SDK вы можете предоставить стримерам настраиваемый интерфейс для трансляции их веб-камеры, микрофона и даже совместного использования их рабочего стола на канале Amazon IVS.

Иногда стримеры хотят иметь возможность включать предварительно записанный контент в прямую трансляцию. Возможно, они хотят напомнить зрителям об одном из ярких моментов предыдущей трансляции. Или, может быть, они хотят включить свои живые реакции на клип во время его воспроизведения. Какой бы ни была причина, легко добавить предварительно записанное видео по запросу (VOD) в прямую трансляцию с помощью SDK веб-трансляции. Давайте посмотрим.

Добавление VOD-контента в прямую трансляцию

Я не буду в этой статье рассказывать об основах создания трансляции с помощью SDK веб-трансляции, так как я уже рассказывал об этом в предыдущее сообщение в этом блоге. Вместо этого мы сосредоточимся на добавлении предварительно записанного видео. Для начала мы добавим на страницу тег <video>, который наш вещатель сможет использовать для воспроизведения VOD.

<video id="vod-0" src="/video/vod-0.mp4" controls></video>

В свое демонстрационное приложение я включил несколько фрагментов видео по запросу и значок, позволяющий вещательной компании вернуться в режим "только камера".

Ваше приложение может даже включать функцию загрузки, позволяющую пользователям загружать свои собственные видео. Теперь, когда ресурсы <video> включены во внешний интерфейс, давайте настроим страницу для трансляции этого видео по запросу в прямую трансляцию при его воспроизведении.

Один из подходов заключается в автоматической потоковой передаче VOD при воспроизведении видео путем прослушивания события play.

const vod0 = document.getElementById('vod-0');
vod0.addEventListener('play', async (evt) => { 

};

В слушателе play мы удалим веб-камеру и микрофон пользователя и добавим видео по запросу (и звук по запросу) в трансляцию. VOD добавляется с помощью метода addImageSource в AmazonIVSBroadcastClient (docs), передав evt.target, полученный в обработчике событий (элемент <video> ). Имя метода (addImageSource) может навести вас на мысль, что можно добавлять только изображения, но в документации поясняется, что приемлемым типом источника может быть один из следующих: HTMLImageElement, HTMLVideoElement, HTMLCanvasElement или ImageBitmap.

vod0.addEventListener('play', async (evt) => { 
  /// remove webcam
  const cameraExists = client.getVideoInputDevice('camera-0');
  if (cameraExists) await client.removeVideoInputDevice('camera-0');

  // remove user microphone
  const micExists = window.broadcastClient.getAudioInputDevice('mic-0');
  if (micExists) await window.broadcastClient.removeAudioInputDevice('mic-0');

  // add VOD to broadcast
  window.broadcastClient.addImageSource(
    evt.target, 
    'vod-0', 
    { index: 0 }
  );

  // add audio from VOD
  window.broadcastClient.addAudioInputDevice(
    vod0.captureStream(), 
    'vod-0-audio'
  );
};

Теперь при воспроизведении видео оно будет транслироваться только зрителям на этом канале без использования веб-камеры или микрофона.

Мы можем прослушивать событие paused в видео, чтобы сбросить вид веб-камеры и микрофона, чтобы вещатели могли сделать паузу, чтобы обсудить часть VOD. Мы также можем прослушивать событие end, чтобы сбросить представление после завершения воспроизведения VOD.

Добавление VOD с наложением веб-камеры

Добавление встроенного видео по запросу, которое воспроизводится эксклюзивно, — отличная функция, но иногда вещатели хотят "реагировать" на видео по запросу и включают свою веб-камеру в качестве наложения на предварительно записанный контент. Здесь мы добавляем видео по запросу, как делали выше, но также добавляем поверх него поток с веб-камеры, передавая дополнительные свойства конфигурации (height, width, x, y) в третьем аргументе функции addVideoInputDevice().

vod1.addEventListener('play', async (evt) => {
  // remove webcams, VODs, desktop, etc...
  // [custom code here]

  // add VOD to broadcast (layer 0)
  window.broadcastClient.addImageSource(
    evt.target, 
    'vod-1', 
    { index: 0 }
  );

  // add camera as PIP
  const streamConfig = IVSBroadcastClient.STANDARD_LANDSCAPE;
  // get a webcam stream (getUserMedia())
  const videoStream = await getVideoStream(); 
  // add the webcam (layer 1 - on top of VOD)
  const preview = document.getElementById('broadcast-preview');
  window.broadcastClient.addVideoInputDevice(
    videoStream, 
    'pip-camera-0', 
    {
      index: 1,
      height: streamConfig.maxResolution.height * .25,
      width: streamConfig.maxResolution.width * .25,
      x: preview.width - preview.width / 4 - 20,
      y: preview.height - preview.height / 4 - 20
    }
  );

  // add audio from VOD
  window.broadcastClient.addAudioInputDevice(
    vod1.captureStream(), 
    'vod-0-audio'
  );
});

Это дает нам приятный интерфейс в стиле «картинка в картинке».

Можно включить аудио вещателя, чтобы они могли реагировать/обсуждать видео. Опять же, вы можете использовать события pause и Завершенный для обработки изменений состояния в вашем приложении.

Обзор

В этом посте мы узнали, как включить предварительно записанный контент VOD в прямые трансляции Amazon IVS с помощью SDK Web Broadcast. Если вы хотите увидеть полный код этого примера, вы можете посмотреть его здесь. Если у вас есть какие-либо вопросы или предложения для будущих публикаций, которые вы хотели бы видеть об Amazon IVS, оставьте комментарий ниже.