Платформа Mux обеспечивает высококачественный стриминг, управляемый удобным API, так что вы можете сфокусироваться на создании своего продукта. Он чрезвычайно гибок и предлагает функции для самого требовательного пользователя.

В Stream наша команда специализируется на фидах и чатах реального времени. Мы решили показать, как они работают вместе. Этот пост о создании чата и видеопотока в реальном времени. Чтобы понять, что получится, нажмите эту ссылку и отправьте эмодзи в чат. Запустите уже имеющееся видео, если, конечно, у вас нет своего готового файла .m3u8.

Прежде всего

Поговорим о протоколах стриминга, как они появились и как работают.

RTMP

RTMP и M3U8, также известный как HLS, используются для стриминга аудио и видео. 

RTMP появился в дни Macromedia, сейчас принадлежащей Adobe. Он был собственностью Macromedia и использовался для потоковой передачи аудио, видео и других данных через интернет между платформой Flash и сервером. Благодаря популярности, простоте обслуживания постоянных соединений и малой задержке он де-факто стал стандартом потокового вещания с устройств.

M3U8 (HLS)

M3U8 был разработан Apple, чтобы стримить аудио и видео для QuickTime, iOS, Safari и MacOS. С самого начала он стал широко поддерживаемым и доступным не только устройствам Apple.

Использование протоколов

Говоря простыми словами, записывающее устройство, как правило, использует RTMP, а воспроизводящее  —  M3U8.

RTMP направляется непосредственно к серверу после транскодирования в M3U8. То есть Mux стримит на устройства пользователей в реальном времени. Понятие “реальное время” относительно и зависит от многих факторов:

  • Скорость соединения.
  • Размер видео.
  • Формат аудио.
  • Скорость транскодирования и т.д.

Требования

  • Node.js 11+.
  • Yarn или npm.
  • Пробный аккаунт Mux.
  • Пробный чат Stream.
  • Понимание git.

Начинаем

Клонируем два репозитория Github. Для простоты мы выполняем оба проекта локально, но вы можете использовать Heroku или что-то ещё. Создаём директорию mux для проектов, клонируем репозиторий, переходим в него и устанавливаем зависимости:

cd mux
git clone https://github.com/GetStream/livestream-chat-mux.git web && cd web && yarn

Теперь, когда репозиторий web внутри mux, клонируем бэкенд-API. Это особенно важно: нужно генерировать токен для входящих в чат пользователей. Покиньте директорию web, переместившись в mux и выполните следующие команды:

$ cd ../
$ git clone https://github.com/GetStream/livestream-chat-api.git api && cd api && yarn

1. Получаем ключ и секрет Stream API

Если у вас нет аккаунта Stream, создайте его здесь, 14 дней использования бесплатны. Скопируйте ключ и секрет, которые показаны на изображении ниже и сохраните в безопасном месте. Они понадобятся чуть позже.

  1. Идём в панель управления.
  2. Создаём новое приложение.
  3. Кликаем на Chat в верхней панели.
  4. Прокручиваем до “App Access Keys”, копируем ключ и секрет.

2. Переменные среды в NodeJS

В директории web создайте файл с именем .env и добавьте в него эти строки:

REACT_APP_API_ENDPOINT=http://localhost:8080 
REACT_APP_STREAM_KEY=ВАШ_КЛЮЧ_STREAM_API 
SASS_PATH=./node_modules

Создайте ещё один файл .env в директории API. Его строки будут такими:

NODE_ENV=development
PORT=8080
STREAM_API_KEY=ВАШ_КЛЮЧ_STREAM_API
STREAM_API_SECRET=ВАШ_СЕКРЕТ_STREAM_API

3. Запускаем приложение и API

Вернитесь в api и выполните yarn start. Запустите новый терминал и снова выполните yarn start в web. API будет на порте 8080, а веб на порте 3000. Они будут доступны через http://localhost:<PORT>.

Перейдите на http://localhost:3000. Сначала будет доступно только предустановленное видео, но чат уже должен работать. Попробуйте ввести что-нибудь, чтобы проверить его работу. Сразу после логина приложение должно выглядеть примерно так:

Стрим на Mux

Создайте пробный аккаунт Mux:

Перейдите в панель управления и нажмите “Video”, а затем “Live Streams”.

Нажмите “Create New Live Stream” в правом верхнем углу:

Нажмите “Run Request”, чтобы выполнить запрос к API, который создаст ваш стрим.

А теперь “View Live Stream”, чтобы посмотреть на ваш поток.

Страница ниже содержит необходимую информацию о соединении. Сохраните “Stream Key”. Он нужен для потоковой передачи с устройств. Для iOS скачайте вещатель RTMP. Для Android также доступны различные приложения RTMP. Загрузив приложение, введите “RTMP URL”, в нашем случае rtmp://live.mux.com/app, и “Stream Key”. Запускайте трансляцию!

Сейчас, когда вы стримите с устройства на Mux, обновите адрес воспроизведения в вашем приложении. Вы увидите стрим в реальном времени с небольшой задержкой. Скопируйте “Public URL” и вставьте его на панели управления приложением.

Этот адрес должен заканчиваться на .m3u8.

Заключение

Чтобы узнать больше о Mux, посетите официальный сайт. Если вам интересен Stream Chat, у нас есть интерактивный тур по API. Мы предоставляем iOS SDK, ReactNative SDK и другие, а также компоненты React для лёгкой интеграции.

Читайте также:

А еще вы можете проверить ваши знания:

Перевод статьи Nick Parsons: Tutorial: Live Streaming With Mux & Stream Chat

Предыдущая статья8 лучших платформ и библиотек JavaScript для машинного обучения
Следующая статья9 полезных расширений для 2020 года