Как создать собственную станцию ​​«LoFi Radio» и транслировать ее в прямом эфире с помощью Amazon IVS

Возможно, этот пост не относится к «обычным» способам использования потокового вещания в прямом эфире с помощью Amazon Interactive Video Service (Amazon IVS), но это интересный проект, с которым можно поиграть и поучиться, и он иллюстрирует некоторые уникальные особенности Web Broadcast SDK (в частности, возможность потоковой передачи из источника, отличного от традиционной камеры и микрофона).

Возможно, вы знакомы с концепцией каналов «лофи-радио», но если нет, то они обычно состоят из какого-то анимированного персонажа в основном статической сцене с зацикленной звуковой дорожкой, содержащей музыку лофи. Эти прямые трансляции популярны среди людей, которые ищут не отвлекающий саундтрек, чтобы расслабиться, учиться или общаться в чате и заводить новых друзей. Это не соответствует «традиционной» модели пользовательского контента (UGC) вещательной компании, транслирующей игру или свою веб-камеру, но нет никаких сомнений в том, что эти потоки чрезвычайно популярны. Например, на момент публикации этой статьи канал Lofi Girl на YouTube имеет 11,7 млн ​​подписчиков и может похвастаться почти 1,5 миллиарда просмотров.

Может быть, пришло время, чтобы кто-то создал целую платформу UGC для прямой трансляции, которая дает пользователям возможность создавать свои собственные каналы lofi и транслировать их своим друзьям? Это бесплатная идея — действуйте!

Я предполагаю, что вы новичок в Amazon IVS, поэтому мы рассмотрим процесс создания вашей собственной прямой трансляции lofi с самого начала. Если вы уже знакомы с Amazon IVS, не стесняйтесь пропускать те части, которые вам уже знакомы.

Зарегистрируйте бесплатную учетную запись AWS

Первый шаг — зарегистрируйте бесплатный аккаунт AWS. Новые учетные записи будут иметь право на 5 часов основного ввода, 100 часов вывода SD и большое количество ежемесячных сообщений в чате в течение первых 12 месяцев. Этого времени достаточно, чтобы поиграть с Amazon IVS и узнать все о том, как он работает.

Создание канала Amazon IVS

Я написал в блоге о том, как начать работу создание канала Amazon IVS, но самый быстрый способ создать одноразовый канал — через интерфейс командной строки AWS (документы по установке). Команда для создания канала:

$ aws ivs create-channel --name lofi-demo --latency-mode LOW --type BASIC

Это вернет некоторую важную информацию о вашем потоке:

{
  "channel": {
    "arn": "arn:aws:ivs:us-east-1:[redacted]:channel/[redacted]",
    "authorized": false,
    "ingestEndpoint": "f99084460c35.global-contribute.live-video.net",
    "latencyMode": "LOW",
    "name": "lofi-demo",
    "playbackUrl": "https://f99084460c35.us-east-1.playback.live-video.net/api/video/v1/us-east-1.[redacted].channel.[redacted].m3u8",
    "recordingConfigurationArn": "",
    "tags": {},
    "type": "BASIC"
  },
  "streamKey": {
    "arn": "arn:aws:ivs:us-east-1:[redacted]:stream-key/[redacted]",
    "channelArn": "arn:aws:ivs:us-east-1:[redacted]:channel/[redacted]",
    "tags": {},
    "value": "sk_us-east-1[redacted]"
  }
}

Держите эту информацию под рукой, так как через некоторое время нам понадобятся ingestEndpoint, playbackUrl и streamKey.

Трансляция на канале Lofi с помощью Web Broadcast SDK

Теперь, когда у нас есть созданный канал, мы можем сразу начать трансляцию на него. Если вы проводили какие-либо прямые трансляции, вы, вероятно, знакомы с программным обеспечением для потоковой передачи на рабочем столе (например, OBS, Streamlabs Desktop и т. д.). Вместо использования стороннего программного обеспечения мы собираемся написать код для трансляции нашего потока lofi непосредственно из браузера.

Прежде чем писать код: у вас должна быть под рукой собственная анимация и дорожка в формате MP3. Авторское право имеет значение. Пожалуйста, используйте только ресурсы, на использование которых у вас есть надлежащая лицензия. Если ваша анимация представляет собой GIF, вы можете преобразовать ее в файл MP4 (для этого в Интернете доступно множество инструментов).

Первый шаг — создать HTML-страницу, включающую сценарий Web Broadcast SDK и содержащую элемент <canvas> для предварительного просмотра трансляции, элемент <video>. для исходной анимации и кнопку для запуска трансляции. src тега <video> должен указывать на ваш источник анимации и должен иметь ширину и высоту 1px (мы собираемся для предварительного просмотра видео на <canvas> всего за несколько минут, поэтому исходное видео не обязательно должно быть видно).

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lofi Radio</title>
  <script src="https://web-broadcast.live-video.net/1.2.0/amazon-ivs-web-broadcast.js"></script>
</head>
<body>

  <canvas id="broadcast-preview"></canvas>

  <video id="src-video" 
    src="/video/lofi.mp4" 
    style="width: 1px; height: 1px;"
    muted loop></video>

  <button id="broadcast-btn">Broadcast</button>

</body>
</html>

Затем создайте внешний JS-файл с именем lofi.js (не забудьте включить его в HTML-код выше). Начните этот файл с прослушивателя DOMContentLoaded и определите функцию init(), чтобы все настроить. В функции init() мы создадим экземпляр IVSBroadcastClient из SDK Web Broadcast. Нам нужно передать ему ingestEndpoint из нашего канала. Мы также создадим обработчик щелчка для кнопки трансляции, который будет вызывать функцию toggleBroadcast(), которую мы определим чуть позже.

const init = () => {
  window.broadcastClient = IVSBroadcastClient.create({
    streamConfig: IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE,
    ingestEndpoint: [Your ingestEndpoint],
  });
  document.getElementById('broadcast-btn').addEventListener('click', toggleBroadcast);
};
document.addEventListener('DOMContentLoaded', init);

Примечание. Для простоты мы устанавливаем broadcastClient в область действия окна. На самом деле вы, вероятно, будете использовать фреймворк, поэтому обычно избегаете использования глобальной области window, подобной этой.

Далее нам нужно создать наш видеопоток и прикрепить его к broadcastClient. Измените функцию init() следующим образом:

const init = () => {
  window.broadcastClient = IVSBroadcastClient.create({
    streamConfig: IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE,
    ingestEndpoint: [Your ingestEndpoint],
  });

  window.video = document.getElementById('src-video');
  window.broadcastClient.addImageSource(window.video, 'video-track', { index: 0 });
  const preview = document.getElementById('broadcast-preview');
  window.broadcastClient.attachPreview(preview);

  document.getElementById('broadcast-btn').addEventListener('click', toggleBroadcast);
};

На данный момент мы создали источник анимации и добавили его в клиент. Затем давайте добавим функцию createAudioStream(), которая будет присоединять источник звука MP3 к потоку.

const createAudioStream = async () => {
  /* Music from Uppbeat (free for Creators!): https://uppbeat.io/t/vens-adams/alone-in-kyoto */
  const audioContext = new AudioContext();
  const mp3 = await fetch('/audio/alone-in-kyoto.mp3');
  const mp3Buffer = await mp3.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(mp3Buffer);
  const streamDestination = audioContext.createMediaStreamDestination();
  const bufferSource = audioContext.createBufferSource();
  bufferSource.buffer = audioBuffer;
  bufferSource.start(0);
  bufferSource.connect(streamDestination);
  bufferSource.loop = true; 
  window.broadcastClient.addAudioInputDevice(streamDestination.stream, 'audio-track');
};

И измените функцию init(), добавив async и вызовите await createAudioStream().

const init = async () => {
  window.broadcastClient = IVSBroadcastClient.create({
    streamConfig: IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE,
    ingestEndpoint: [Your ingestEndpoint],
  });

  window.video = document.getElementById('src-video');
  window.broadcastClient.addImageSource(window.video, 'video-track', { index: 0 });
  const preview = document.getElementById('broadcast-preview');
  window.broadcastClient.attachPreview(preview);

  await createAudioStream();

  document.getElementById('broadcast-btn').addEventListener('click', toggleBroadcast);
};

Наконец, мы можем определить функцию toggleBroadcast() для запуска/остановки потока при нажатии кнопки.

Примечание. На этом этапе вам необходимо подключить свой streamKey. Относитесь к ним как к любым другим конфиденциальным учетным данным и защищайте их от передачи в систему управления версиями или включения в файл, к которому могут получить доступ другие лица.

const toggleBroadcast = () => {
  if (!window.isBroadcasting) {
    window.video.play();
    window.broadcastClient
      .startBroadcast([your streamKey])
      .then(() => {
        window.isBroadcasting = true;
      })
      .catch((error) => {
        window.isBroadcasting = false;
        console.error(error);
      });
  }
  else {
    window.broadcastClient.stopBroadcast();
    window.video.pause();
    window.isBroadcasting = false;
  }
};

Теперь мы можем сохранить и запустить приложение. Вот как выглядит моя страница (с применением CSS для стиля и макета).

Когда я нажимаю кнопку Трансляция, начинает воспроизводиться анимация, и наша прямая трансляция транслируется на наш канал.

Примечание. Вы не сможете слышать звук канала из инструмента трансляции. Чуть позже мы рассмотрим воспроизведение.

Воспроизведение канала Lofi

Я писал в блоге о воспроизведении прямых трансляций< /a> с Amazon IVS ранее, но мы создадим здесь быстрый и простой проигрыватель, чтобы завершить демонстрацию. Создайте файл HTML, включите SDK проигрывателя Amazon IVS, добавьте элемент <video>, создайте экземпляр проигрывателя (вставьте свой playbackUrl) и инициализируйте воспроизведение. .

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lofi Radio Playback</title>
  <script src="https://player.live-video.net/1.14.0/amazon-ivs-player.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const ivsPlayer = IVSPlayer.create();
      ivsPlayer.attachHTMLVideoElement(document.getElementById('video-player'));
      ivsPlayer.load([your playbackUrl]);
      ivsPlayer.play();
    })
  </script>
</head>

<body>
  <video id="video-player" controls autoplay playsinline></video>
</body>

</html>

И теперь мы можем проигрывать наш радиопоток lofi на его собственной странице!

В нашем коде хорошо то, что и звук, и анимация будут продолжаться в цикле, пока ваш канал не прекратит вещание.

Бонус: трансляция без браузера

Еще один вариант трансляции собственного потока lofi – это отсутствие пользовательского интерфейса и трансляция в безголовом режиме с помощью FFMPEG (подробнее об этом здесь). Вот пример команды, которая будет работать для этого канала.

$ ffmpeg 
    -re 
    -stream_loop -1 
    -i ./public/video/lofi.mp4 
    -stream_loop -1 
    -i ./public/audio/alone-in-kyoto.mp3 
    -map 0:v:0 
    -map 1:a:0 
    -c:v libx264 
    -b:v 6000K 
    -maxrate 6000K 
    -pix_fmt yuv420p 
    -s 1920x1080 
    -profile:v main 
    -preset veryfast 
    -force_key_frames "expr:gte(t,n_forced*2)" 
    -x264opts "nal-hrd=cbr:no-scenecut" 
    -acodec aac 
    -ab 160k 
    -ar 44100 
    -f flv 
    $DEMO_STREAM_INGEST_ENDPOINT/$DEMO_STREAM_KEY

Обзор

В этом посте мы узнали, как создать собственную прямую трансляцию Lofi Radio с помощью Amazon IVS. Чтобы сделать свою трансляцию lofi еще более интерактивной, добавьте живой чат как с автоматическими, так и с ручная модерация чата. Если у вас есть какие-либо вопросы об этой демонстрации, оставьте комментарий ниже.

:::информация Также опубликовано здесь.

:::