Трансляции через Mux

Mux Livestream добавляет в приложение прямые трансляции: видео с камеры уходит в API Mux и раздаётся зрителям в реальном времени. Как это устроено под капотом — в статье о работе live streaming.

Подключение Mux

Откройте Settings and Integrations > Integrations > Mux Livestream и включите Mux Broadcast.

Дальше заведите аккаунт Mux и перейдите в Settings > API Access Tokens. Нажмите Generate new token, выберите окружение (Development или Production), отметьте Mux Video с правом Write, задайте имя и создайте токен. Скопируйте Access Token ID и Secret Key, вставьте их во FlutterFlow и нажмите Deploy.

Виджет MuxBroadcast

Перетащите виджет MuxBroadcast на страницу, где будет эфир, и настройте его свойства в панели справа.

Три главных свойства:

• Show Streaming View — по умолчанию выключено, и виджет показывает только стартовый экран: превью камеры и кнопку «Start Stream». Включите, чтобы на холсте отображался интерфейс идущего эфира — удобно при настройке раскладки.
• Broadcast Latency — задержка: Standard, Reduced или Low. Чем меньше задержка, тем живее общение со зрителями, но тем сильнее страдает качество на плохой сети.
• Broadcast Audio Channel — Stereo или Mono. Стерео звучит богаче, моно экономит трафик и совместимо с большим числом устройств.

Оформление виджета настраивается отдельно:

• Start Button Style, Text, Icon — вид, подпись и иконка кнопки старта.
• Stop Button — кнопка остановки.
• Flip Camera Button — переключение между фронтальной и основной камерой.
• Live Text Style — надпись «LIVE».
• Live Container & Icon — плашка и иконка эфира.
• Duration Text Style — счётчик времени.
• Duration Container — плашка со счётчиком.

Старт и остановка эфира

У виджета есть два триггера — On Broadcast Start и On Broadcast Stop. К ним и привязывают логику начала и конца трансляции.

On Broadcast Start [Триггер]

Срабатывает, когда пользователь нажал Start Stream. Здесь доступен адрес эфира — Widget State → Mux Playback URL; обычно на этом шаге создают запись в базе о том, что трансляция началась.

On Broadcast Stop [Триггер]

Срабатывает при остановке эфира. Тут обновляют базу: ставят is_live в false, сохраняют время окончания, уводят пользователя со страницы трансляции.

Просмотр трансляции

Пока эфир идёт, его смотрят по Mux Playback URL от виджета. С уже завершённым эфиром сложнее: там нужно достать адрес записи.

Идущий эфир

1. Откройте страницу со списком трансляций.
2. По нажатию на карточку эфира — скажем, в ListView — переходите на страницу ViewBroadcast и передавайте Mux Playback URL параметром страницы.
3. На странице ViewBroadcast подставьте этот адрес в виджет VideoPlayer.

Прошедший эфир

Когда трансляция закончилась, её исходный Mux Playback URL перестаёт работать. Запись доступна по другому адресу — по playback ID записи, которую Mux создал автоматически во время эфира.

Порядок такой: по playback ID эфира получить его ID, затем из списка последних записей эфира взять ID записи и уже по нему — её playback ID.

Три вызова API Mux подряд:

• GET /video/v1/playback-ids/{PLAYBACK_ID} — по playback ID эфира отдаёт его ID.
• GET /video/v1/live-streams/{LIVE_STREAM_ID} — отдаёт данные эфира вместе с массивом recent_asset_ids; оттуда берётся ID записи.
• GET /video/v1/assets/{ASSET_ID} — отдаёт данные записи, в массиве playback_ids лежит нужный playback ID.

Дальше остаётся ветвление по состоянию эфира: идёт — берём текущий адрес напрямую, закончился — проходим цепочку вызовов и собираем адрес записи.