Стриминг видео и чат в учебном приложении
Платформа 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 дней использования бесплатны. Скопируйте ключ и секрет, которые показаны на изображении ниже и сохраните в безопасном месте. Они понадобятся чуть позже.
2. Переменные среды в NodeJS
В директории web создайте файл с именем .env и добавьте в него эти строки:
Создайте ещё один файл .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
Комментарии