MuxBroadcast

Добавление функции прямой трансляции или вещания позволяет пользователям смотреть событие в реальном времени. Вместо того чтобы строить прямую трансляцию с нуля, вы можете использовать встроенный виджет под названием MuxBroadcast, предоставляемый FlutterFlow. Виджет MuxBroadcast позволяет создать функцию вещания за считаные минуты, и вы сможете сосредоточиться на основных функциях вашего приложения.

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

На этой странице вы узнаете, как использовать виджет MuxBroadcast ( путем создания примера приложения) и настраивать виджет MuxBroadcast.

Виджет MuxBroadcast

Создание приложения для вещания (прямой трансляции)

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

Итоговое приложение выглядит так:

>

Вещатель слева, зритель справа

Чтобы создать такое приложение, вам понадобятся следующие страницы и нижняя панель.

• BroadcastListing: Отображает список всех трансляций.
• BroadcastName: Нижняя панель, которая позволяет задать название трансляции.
• StartBroadcast: Позволяет начать трансляцию.
• ViewBroadcast: Позволяет смотреть активную или завершенную трансляцию.

Следующая схема иллюстрирует, как эти страницы будут взаимодействовать:

Схема приложения

Предварительные требования

• Настройте Firebase для вашего проекта и включите биллинг. Это необходимо для развертывания облачных функций (в вашем проекте Firebase), которые создадут прямую трансляцию на сервере Mux.

• Получите ключи API и выполните начальную настройку

Добавление виджета MuxBroadcast

1. Создание коллекции Firestore

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

Шаги по созданию коллекции следующие:

• Ознакомьтесь с структурированием базы данных Firebase.
• Создайте коллекцию и настройте как минимум четыре поля, которые хранят информацию о трансляции, такую как is_live, name, url и time (это будет использоваться для фильтрации списка по последним трансляциям в первую очередь).

2. Создание интерфейса

Теперь пришло время начать создание интерфейса. Здесь мы построим интерфейс для всех страниц и нижней панели. Давайте разберем, как это сделать:

2.1 Страница BroadcastListing

На этой странице:

1. Добавьте ListView, чтобы отобразить все трансляции.

   • Внутри ListView добавьте Card > Row > Text (для отображения названия потока) и Icon (чтобы указать, активен ли поток).

2. Добавьте FloatingActionButton для открытия нижней панели.

После добавления это должно выглядеть примерно так:

Страница BroadcastListing

2.2 BroadcastName (компонент BottomSheet)

Это будет использоваться для получения названия потока от пользователей.

Создайте новый компонент под названием BroadcastName, который будет использоваться как нижняя панель. Внутри компонента добавьте TextField и Button.

Это должно выглядеть так:

BroadcastName (компонент нижней панели)

2.3 Страница StartBroadcast

Эта страница содержит виджет MuxBroadcast, отвечающий за запуск и остановку прямой трансляции.

Чтобы добавить виджет MuxBroadcast, перетащите виджет MuxBroadcast из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов.

Вот как это выглядит:

Страница StartBroadcast

2.4 Страница ViewBroadcast

Эта страница содержит виджет VideoPlayer, отображающий активную или завершенную трансляцию.

На этой странице добавьте виджет VideoPlayer и удалите его высоту и ширину (это сделает его полноэкранным).

Страница ViewBroadcast

3. Получение списка трансляций

После подготовки интерфейса вы можете получать и отображать список трансляций из коллекции Firestore в ListView. Здесь вы отобразите список по последним трансляциям в первую очередь и покажете/скроете иконку вещания в зависимости от того, активна ли трансляция.

Для этого:

1. Выполните запрос коллекции под названием broadcasts в ListView.
2. Отсортируйте коллекцию по полю time.
3. Добавьте условную видимость для иконки (которая указывает, активна ли трансляция) на основе поля is_live.

>

4. Навигация на страницу StartBroadcast

При нажатии на FloatingActionButton вы не перейдете сразу на страницу StartBroadcast. Вместо этого сначала откроется нижняя панель, которая примет название трансляции, и когда кнопка (внутри нижней панели) будет нажата, произойдет навигация на страницу StartBroadcast с названием трансляции в качестве параметра.

Для этого:

1. Выберите FloatingActionButton и добавьте действие для открытия нижней панели (созданной в [2.2])

Действие для открытия нижней панели

2. Теперь при нажатии на кнопку (внутри нижней панели) добавьте действие для навигации на страницу StartBroadcast.

   • В этом действии нажмите кнопку Define. Это откроет страницу StartBroadcast, где вы сможете определить параметр, который примет название потока.
   • После определения параметра откройте это действие снова и передайте его значение From Variable > Widget State > [название TextField].

3. Добавьте еще одно действие для закрытия нижней панели.

>

Навигация на страницу StartBroadcast

5. Добавление действий вещания (запуск и остановка)

На странице StartBroadcast у вас есть виджет MuxBroadcast (добавленный на шаге 2.3). Вы можете использовать этот виджет для добавления следующих действий вещания:

• On Broadcast Start: Срабатывает при нажатии на кнопку запуска трансляции.
• On Broadcast Stop: Срабатывает при нажатии на кнопку остановки трансляции.

Мы будем использовать On Broadcast Start для создания нового документа внутри коллекции broadcast и On Broadcast Stop для обновления того же документа, чтобы указать, что трансляция завершена.

Чтобы создать новый документ при запуске трансляции:

1. Выберите виджет MuxBroadcast из дерева виджетов или области холста.

2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потоков действий в новом всплывающем окне.

3. В разделе On Broadcast Start:

   • Добавьте действие Create Document.
   • Установите коллекцию в broadcasts.
   • Нажмите кнопку + Add Fields и установите значение поля в соответствии со следующим:
     • is_live > Specific Value > True.
     • name > From Variable > broadcastName (название параметра страницы).
     • url > From Variable > Widget State > Mux Playback URL (это содержит URL прямой трансляции и доступно при добавлении виджета MuxBroadcast).
     • times > Global Properties > Current Time.
   • Введите Action Output Variable Name как broadcastOutput (это будет использовано для обновления этого документа на следующем шаге).

>

Создание документа при запуске трансляции

Когда трансляция останавливается, необходимо обновить тот же документ для поля is_live значением False. Для этого:

1. Выберите виджет MuxBroadcast из дерева виджетов или области холста.

2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет редактор потоков действий в новом всплывающем окне.

3. В разделе On Broadcast Stop:

   • Добавьте действие Update Document .
   • Установите ссылку на Action Outputs > broadcastOutput (название переменной вывода действия, установленное на предыдущем шаге) > Reference.
   • Нажмите кнопку + Add Fields и установите is_live > Specific Value > False.

4. Также добавьте еще одно действие для Navigate Back.

Обновление документа при остановке трансляции

6. Добавление API Mux

Если трансляция активна, вы можете перейти сразу на страницу ViewBroadcast с URL воспроизведения и посмотреть прямую трансляцию, но если трансляция завершена, вы не сможете использовать тот же URL. Поэтому необходимо получить URL завершенной трансляции.

Для этого сначала получите ID активной трансляции на основе текущего ID воспроизведения, а затем используйте его для получения ID воспроизведения завершенной трансляции.

Вот схема для получения ID воспроизведения завершенной трансляции:

Схема получения воспроизведения завершенной трансляции

Это можно реализовать, добавив в проект следующие два API:

• getLiveStreamId: Возвращает ID активной трансляции на основе текущего ID воспроизведения.
• getPastLiveStream: Возвращает ID воспроизведения завершенной трансляции на основе ID активной трансляции.

к сведению

• Подробнее о добавлении API в ваш проект.
• Эти API будут использоваться на шаге 8.

Вот как должны выглядеть оба API:

getLiveStreamId

getPastLiveStream

А вот путь JSON, который вы можете использовать для извлечения необходимого значения.

• Чтобы получить ID активной трансляции из результата API getLiveStreamId, используйте $.data.object.id
• Чтобы получить прошлый ID из результата API getPastLiveStream, используйте $.data[0].playback_ids[0].id

Токен авторизации можно получить, выполнив base64-кодирование строки 'MUX_TOKEN_ID: MUX_TOKEN_SECRET'. Вы также можете использовать этот онлайн-инструмент для этого.

7. Добавление пользовательских функций

Типичный URL прямой трансляции выглядит так:

Copy

https://stream.mux.com/{PLAYBACK_ID}.m3u8

При вызове API, созданных на предыдущем шаге, вам потребуется извлечь ID воспроизведения из URL и создать URL обратно из ID воспроизведения.

Для этого вы можете создать две пользовательские функции, которые выглядят так:

1. getPlaybackIdFromUrl

getPlaybackIdFromUrl

2. createUrlFromPlaybackId

createUrlFromPlaybackId

Мы увидим, как использовать эти функции на следующем шаге.

8. Навигация на страницу ViewBroadcast

При нажатии на карточку названия трансляции (внутри ListView) вы перейдете на страницу ViewBroadcast и передадите URL трансляции. URL, который вы передадите, зависит от того, активна ли трансляция.

Чтобы перейти на страницу ViewBroadcast и передать URL активной или завершенной трансляции:

1. Выберите виджет Card из дерева виджетов или области холста.

2. Откройте редактор потоков действий и нажмите + Add Conditional Action.

3. Выберите broadcasts Document > is_live.

4. В разделе TRUE:

   • Добавьте действие для навигации на страницу ViewBroadcast. Примечание: При этом определите параметр url на странице ViewBroadcast. Это будет использовано для передачи URL воспроизведения видео.

5. В разделе FALSE:

   • Сначала добавьте вызов API getLiveStreamId, используйте пользовательскую функцию getPlaybackIdFromUrl для передачи текущего ID воспроизведения трансляции и сохраните ответ, указав * Action Output Variable Name*.
   • Далее добавьте вызов API getPastLiveStream и передайте ID активной трансляции из переменной вывода действия предыдущего вызова API.
   • Наконец, добавьте действие для навигации на страницу ViewBroadcast. Примечание: При этом используйте пользовательскую функцию createUrlFromPlaybackId для передачи URL, созданного с использованием ID воспроизведения (полученного в предыдущем вызове API). Также убедитесь, что вы определили параметр url на странице ViewBroadcast.

Клонируемое приложение

Получите клонируемую версию этого приложения **здесь **.

Запуск и тестирование

Чтобы воспроизвести видео на виджете ViewBroadcast, выберите виджет VideoPlayer, установите Path из переменной и используйте параметр страницы.

Теперь вы можете запустить приложение и протестировать виджет.

к сведению

Mux Livestream нельзя протестировать в режиме Run. Вместо этого вам нужно протестировать его на реальных устройствах.

Настройка MuxBroadcast

Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных в панели свойств.

Отображение вида трансляции

На холсте при добавлении этого виджета отображается вид 'Before streaming' (т.е. переключение камеры и кнопка запуска трансляции). Чтобы увидеть, как это будет выглядеть при запуске трансляции, вы можете включить эту опцию в панели свойств.

Отображение вида трансляции

Аудиоканал вещания

Эта опция позволяет выбрать тип записи аудио во время вещания. Вы можете выбрать между Mono и Stereo. По умолчанию установлено стерео, что обеспечивает лучший опыт прослушивания.

Изменение размера

По умолчанию этот виджет занимает все доступное пространство (т.е. полноэкранный). Чтобы изменить размер, вы можете использовать свойства Height и Width.

Border Radius

Чтобы создать скругленный край вокруг этого виджета, используйте это свойство. Нажмите на значок замка (), чтобы редактировать все значения вместе или по отдельности.

Border Radius

Настройка кнопки запуска

Чтобы настроить кнопку, которая позволяет запустить трансляцию:

1. Выберите виджет MuxBroadcast и перейдите в панель свойств.

2. Чтобы изменить внешний вид кнопки, такой как размер, цвет, elevation и граница, используйте свойства в разделе Start Button Style.

3. Чтобы изменить текст кнопки, откройте раздел Start Button Text и установите Text. Вы также можете настроить текст, если это необходимо.

4. Чтобы изменить иконку кнопки, откройте раздел Start Button Icon и выберите новую иконку. Вы также можете изменить ее Size и Color.

Настройка кнопки запуска

Настройка кнопки остановки

Чтобы настроить кнопку, которая позволяет остановить трансляцию:

1. Найдите раздел Stop Button. Отсюда вы можете изменить иконку, размер и цвет.

2. По умолчанию цвет фона кнопки остановки установлен на красный. Чтобы изменить, используйте свойство * Background Color*.

Настройка кнопки остановки

Настройка кнопки переключения камеры

Кнопка переключения камеры позволяет переключать переднюю и заднюю камеру вашего устройства перед началом вещания.

Чтобы настроить внешний вид этой кнопки, откройте раздел Flip Camera Button и используйте свойства, такие как Icon, Icon size, Icon Color и Background Color.

Настройка кнопки переключения камеры

Настройка индикатора активности

Индикатор активности появляется сразу после запуска прямой трансляции (в верхнем левом углу экрана).

Чтобы настроить индикатор активности:

• Чтобы изменить его текст (т.е. с LIVE на что-то другое), откройте раздел Live Text Style и установите Text. Вы также можете настроить текст, если это необходимо.
• Чтобы изменить внешний вид индикатора, откройте раздел Live Container & Icon и используйте свойства, такие как Icon, Icon size, Icon Color, Background Color и Border Radius.

Настройка индикатора активности

Настройка индикатора длительности

Индикатор длительности появляется сразу после запуска прямой трансляции (в верхнем правом углу экрана).

Чтобы настроить индикатор длительности:

1. Откройте раздел Duration Text Style и измените стиль текста.
2. Чтобы изменить внешний вид индикатора, откройте раздел Duration Container и используйте свойства, такие как Background Color и Border Radius.

Настройка индикатора длительности

Кроме того, вы также можете добавить отступы, выравнивание, показать/скрыть этот виджет из панели свойств.