Создание приложения для прямой трансляции фильмов и веб-сайта для прямого эфира, часть 1

Первоначальным бизнесом BingeWave была демонстрация кинопремьер в любом месте, поскольку изначально бизнес был моделью Airbnb для кинотеатров. Работа с киновертикалью преподала много ценных уроков работы с предварительно записанным контентом, также известным как фильмы.

Сегодня многие используют наши технологии для виртуальной демонстрации своих фильмов, поскольку мы продемонстрировали более 2000 единиц контента, начиная от документальных фильмов, короткометражных фильмов, веб-сериалов и заканчивая полнометражными фильмами. И люди платят кинематографистам и кинофестивалям за живой интерактивный виртуальный опыт.

В нашей документации мы часто используем термин «предварительно записанный контент», но думаем о нем как о виртуальных премьерах фильмов, живых подкастах и других формах виртуальных и гибридных событий, которые вы можете извлечь из живого участия. Это означает, что все смотрят один и тот же контент в одно и то же время.

Этот учебник будет состоять из 3 частей и поможет вам создать виртуальный опыт с предварительно записанным контентом. Первая часть установит структуру вашего приложения и основные классы. Вторая часть будет посвящена UX/UI приложения и воспроизводимому контенту. Заключительная часть будет посвящена контенту Live TV.

Технический обзор

Необходимые навыки разработчика

Мы рекомендуем, чтобы разработчики, читающие это руководство, обладали следующими навыками:

HTML/CSS
Базовый Javascript
Базовый ответ

Темы охватывали:

Загрузка видеоконтента
Загрузка изображений
Потоковая передача RTMP и HLS

Репозиторий кода: загрузите и запустите готовый код на https://github.com/BingeWave/Build-A-Livestreaming-App-For-Virtual-Movie-Premieres.

Приблизительное время: 1 час

Уровень сложности: от простого до среднего

Учебник

Шаг 1. Аккаунт дистрибьютора

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

Шаг 2. Настройка нашего приложения React

Теперь давайте начнем создавать наше приложение React. В этом руководстве предполагается, что на вашем компьютере установлен NodeJS и вы имеете общее представление о командной строке. Создайте новую папку, и мы собираемся:

Создайте каталог для вашего приложения React
Установить реакцию
Установите необходимые компоненты, такие как Router, Bootstrap 5

Опять же, мы предполагаем, что у вас уже установлены node и npx.

node install npx #if you don’t already have it installed
mkdir video-app
npx create-react-app video-app #installs the react application

Перейдите в папку и давайте установим некоторые необходимые модули. Вы можете использовать пряжу, если хотите, но в этом руководстве используется npm.

cd video-app
npm install [email protected] --save
npm install node-sass --save
npm install react-router-dom --save
npm install react-datetime-picker --save
npm install react-select -- save

Это установило Bootstrap 5, маршрутизатор React, средство выбора даты и времени и графический интерфейс, который мы будем использовать для множественного выбора. Далее мы создадим несколько папок, которые будем использовать для организации приложения:

mkdir src/pages
mkdir src/components
mkdir src/util

Создайте одну страницу в папке страниц с именем HomePage:

touch src/pages/HomePage.jsx

И добавьте следующее содержимое:

Наконец, давайте изменим ваш App.js, чтобы использовать маршрутизатор и установить Bootstrap 5 в нашем приложении. Создайте файл src/main.scss.

touch src/main.scss

и импортируйте в него исходную таблицу стилей Bootstrap следующим образом:

@import “../node_modules/bootstrap/scss/bootstrap.scss”;

Затем импортируйте только что созданный файл main.scss в начало файла src/index.js следующим образом:

import “../src/main.scss”;

Откройте src/App.js и импортируйте домашнюю страницу из ./pages/HomePage в самом верху. Удалите все в функции return() и замените ее на ‹HomePage /›. На данный момент ваш код должен выглядеть так:

После запуска npm start ваше приложение должно загрузиться на страницу с надписью «Моя домашняя страница».

npm start

Шаг 3: Файл ENV

Файл env установит переменные среды внутри нашего приложения. Начните с создания файла .env в корневом каталоге.

touch .env

И мы собираемся скопировать и вставить туда эти значения:

REACT_APP_BW_API_URL=https://bw.bingewave.com/
REACT_APP_DISTRIBUTOR_ID=
REACT_APP_BW_AUTH_TOKEN=

Мы установим для вашего токена аутентификации значение REACT_APP_BW_AUTH_TOKEN, а идентификатор вашего дистрибьютора — REACT_APP_DISTRIBUTOR_ID. Вы можете найти свой токен авторизации и идентификатор дистрибьютора здесь:

https://developers.bingewave.com/queries/distributors#list

Запустив команду list, вы получите список дистрибьюторов, которые у вас есть в настоящее время. Выберите один и используйте идентификатор. Затем, чтобы получить токен авторизации, нажмите вкладку "Авторизация", как показано на рисунке ниже, и скопируйте токен:

ВАЖНО: ЭТО НЕ БЕЗОПАСНО ДЛЯ ПРОИЗВОДСТВА. Ваш токен аутентификации должен быть уникальным только для устройства одного пользователя. Сохранение переменной в REACT_APP_ в качестве переменной сделает этот токен авторизации доступным для всех. НЕ делайте это в рабочей среде.

Шаг 4. Навигация по сайту

Мы собираемся продолжить настройку нашего приложения React, добавив некоторую навигацию. Начните с импорта компонентов маршрутизатора в самый верх App.js:

import {
    BrowserRouter as Router,
    Switch,
    Route,
 } from “react-router-dom”;

Затем мы заменим основной возврат в App.js на навигацию Bootstrap 5 и правила, когда маршрут направлен к странице.

Разбивая это на разделы:

Маршрутизатор:тег ‹Маршрутизатор› теперь будет охватывать все ваши страницы и будет работать с тегом ‹Switch›.
HTML-навигация. HTML-код с классами navbar, nav-item, nav-link и другими элементами является стандартной навигацией Bootstrap 5. Вы можете прочитать больше об этом здесь".
Switch. Компонент Switch можно рассматривать как программный оператор Switch. В зависимости от параметра пути, указанного внутри каждого маршрута, он загружает определенную страницу.
Домашняя страница. На данный момент у нас есть только одна страница с тегом ‹HomePage /›. По мере увеличения количества страниц мы будем добавлять больше маршрутов к тегу «Switch».

Если вы вернетесь на страницу в своем веб-браузере, вы должны увидеть меню навигации вверху с текстом домашней страницы в области основного содержимого.

Шаг 5. Вызовы API

Мы должны создать класс для обработки наших вызовов API. В папке util создайте файл с именем Api.js.

touch src/util/Api.js

Внутри создайте пустой объект API, как показано ниже:

const API = {
}
export default API;

Далее мы собираемся добавить три функции. Каждая функция будет принимать значение из нашего .env, указанного на шаге 3, и извлекать его для использования в приложении.

getUrlWithApplicationDomain: функция примет любой URL-адрес, который мы передаем, и добавит его к URL-адресу API.
_getAuthToken: будет получен токен авторизации, хранящийся в файле .env. ВАЖНО. Это очень небезопасно и НИКОГДА не должно выполняться в производственной среде. Токены аутентификации не должны использоваться совместно, а размещение их в файле .env означает, что любой может иметь доступ к этому токену.
_getDistributorID: извлекает идентификатор текущего дистрибутива.

Ваши функции должны выглядеть следующим образом:

Когда мы вызываем наш API, мы хотим стандартизировать процесс для каждого вызова. Мы не хотим делать такие вещи, как внедрение нашего токена аутентификации каждый раз. Поэтому мы напишем функцию с именем _call, которая использует выборку для настройки повторяющегося способа вызова API с ожидаемыми результатами.

Эта функция будет обрабатывать все вызовы API:

Определение метода (GET, POST, PUT, DELETE)
Получение токена Auth и добавление его в заголовок
Выполнение всех функций организма
Обработка обратного вызова об успехе и ошибке

Углубляясь в обратные вызовы успеха и ошибки в этой части кода:

.then(function (response) {
  if(response.status === ‘success’){
      successCallback(response.data);
  } else if(response.status === ‘failure’){
          errorCallback(response.errors);
   }
})

API BingeWave возвращает ответы только со статусом HTTP 200. Это означает, что вы определяете, был ли ответ успешным или неудачным, с помощью оператора if, который проверяет состояние объекта ответа. Таким образом, вы должны разделить, был ли вызов ошибкой или успешным, и соответствующим образом направить их.

У нас есть еще одна функция, которую нужно добавить в наш API. Функция загрузки для обработки загрузки файлов:

Убедитесь, что все эти функции включены в ваш Api.js в качестве основы.

Шаг 5. Создайте видеоконтент

Теперь, когда базовый код API завершен, мы можем добавить вызовы API BingeWave. Начнем с CRUD (создание, обновление, просмотр, удаление) для видео. Начните с перехода к документации по созданию видео:

https://developers.bingewave.com/docs/videos#create

Согласно документам, метод представляет собой POST-запрос к bw.bingewave.com/videos. Обязательными полями являются заголовок, описание, тип и дистрибьютор_ид.

Мы можем протестировать маршрут в построителе запросов. Ниже приведен пример того, как могут выглядеть ваши поля ввода.

https://developers.bingewave.com/queries/videos#create

После того, как он заработает в построителе запросов, мы переведем этот вызов в код. Добавьте следующий код в файл src/utils/API.js.

Во-первых, мы собираемся создать нашу конечную точку. Согласно документам, конечной точкой для создания предварительно записанного контента является /videos. Поэтому передайте это в _getUrlWithApiDomain, чтобы получить полный путь к конечной точке.

Переменная data должна быть объектом, содержащим заголовок, описание и тип содержимого. Далее мы установим distributor_id в объекте данных и, наконец, вызовем функцию __call, которую мы определили ранее. Согласно документам, контент создания принимает функцию POST, которую мы передаем вместе с URL-адресом, данными и обратными вызовами успеха и ошибки. При успешном завершении он вернет видеообъект.

Шаг 6: Загрузите видеофайл

Видеофайл, который мы создали на предыдущем шаге, — это просто метаданные; мы все еще должны загрузить фактическое видео. Итак, мы начнем с перехода к документации для загрузки файла.

https://developers.bingewave.com/docs/videomedia#mainvideo

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

https://developers.bingewave.com/queries/videomedia#mainvideo

Обратите внимание, что запрос представляет собой POST, а URL-адрес:

https://bw.bingewave.com/videos/{id}/setMainVideoFile

setMainVideoFile — это команда, и команда настроена на изменение видеоресурса с указанным {id}. В нижней части конструктора запросов вы увидите раскрывающийся список загруженных вами фильмов. Выбор фильма изменит {id}. И, наконец, выберите видео для загрузки. Мы предоставляем примеры файлов для тестирования здесь:

Форма должна выглядеть так:

Запустите загрузку и проверьте запрос и ответ. Теперь давайте превратим это в код:

Мы устанавливаем URL-адрес, к которому также будет подключаться конечная точка, и передаем его нашей функции _uploadFile, которую мы создали ранее.

Шаг 7: Список видеофайлов

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

https://developers.bingewave.com/docs/videos#list

Для получения списка загруженных видео отправляется GET-запрос на bw.bingewave.com/videos с обязательным в параметрах дистрибьютором_id. Перейдите к конструктору запросов:

https://developers.bingewave.com/queries/videos#list

Вы можете выбрать нужную учетную запись дистрибьютора из раскрывающегося списка, чтобы установить параметр, и нажать «Отправить», чтобы получить список содержимого.

Просмотрите ответ, чтобы увидеть список видео. Наконец, давайте превратим запрос в код, который должен быть добавлен к вам src/util/Api.js.

Мы определяем URL-адрес и добавляем идентификатор дистрибьютора в качестве параметра запроса и, наконец, передаем его нашей функции _call с запросом GET.

ШАГ 8: Реализуйте оставшиеся вызовы API

Это основы для чтения документации и построителя запросов и превращения их в код. Затем, используя те же концепции, мы можем построить остальную часть API. У нас не будет подробного объяснения каждой функции, но мы настоятельно рекомендуем вам изучить функции и сравнить их с API. См. документацию и соответствующие функции ниже:

Получить единый видеодокумент — Получить единый конструктор видеозапросов
Создать документы для прямых трансляций — Создать конструктор запросов для прямых трансляций
List Live Events Docs — List Live Events Query Builder
Запустить Stream Docs — Запустить Stream Query Builder
И другие функции, представленные в коде ниже

Используя документы для получения URL-адреса и метода запроса (GET, POST, PUT, DELETE) для действия, вы в основном создаете CRUD (создание, чтение, обновление, удаление). Например:

GET /videos — извлекает все видеообъекты.
GET /videos/id — извлекает отдельное видео по его идентификатору.
POST /videos — создает видеофайл.
PUT /videos/id — обновляет видео на основе его идентификатора.
GET /events — извлекает все события.
GET /events/id — извлекает отдельное событие по его идентификатору.
POST /events — создает событие.
PUT /events — обновляет отдельное событие по его идентификатору.
POST /events/id/startStream — запускает поток событий, используя его идентификатор.
POST /events/id/cancel — отменяет событие с заданным идентификатором.
POST /events/id/setWatermark — устанавливает водяной знак для отображения поверх видео события.

Эти маршруты и их методы запроса можно превратить в такие функции:

Шаг 9. Добавьте остальные утилиты

Чтобы закончить работу с утилитами, нам понадобятся еще два скрипта. Начните с создания файла src/util/appendScript.js .

touch src/util/appendScript.js

Внутри этого файла скопируйте и вставьте следующий код:

А теперь создайте скрипт для удаления кода, создав файл скрипта удаления:

touch src/util/removeScript.js

И вставьте следующий код:

Эти два скрипта понадобятся нам для внедрения и удаления скрипта коннектора BingeWave на выбранных страницах.

Шаг 10. Компоненты

Заключительная часть руководства по созданию трех компонентов. Создайте эти три файла:

touch src/components/errors.js
touch src/components/EventListings.js
touch src/components/VideLists.js

Errors.js

API BingeWave возвращает ошибки в формате JSON. В этом JSON он разбивает поле, в котором произошла ошибка, и конкретную проверку проверки, которая не смогла предоставить разработчику больше гибкости в отношении того, как можно обрабатывать ошибки. Этот компонент будет анализировать JSON и возвращать только ошибки.

EventListings.js

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

https://developers.bingewave.com/docs/events#list

Мы можем взять эти возвращаемые значения и передать их в компонент React, как показано в EventListing.js ниже:

Скопируйте и вставьте приведенный выше код EventListing.js.

VideoListings.js

Как и в списке событий, в списках видео будет отображаться список видеоконтента. Вы можете просмотреть значения, возвращенные в ответе, здесь:

https://developers.bingewave.com/docs/videos#view

Две ключевые концепции для изучения:

Состояние обработки. Когда видео загружается в BingeWave, оно может быть любого формата. Мы конвертируем в формат специализированной прямой трансляции, а текущее состояние видео представляется числовыми значениями. Вы увидите значения, если перейдете к нашей диаграмме состояний процессов по адресу: https://developers.bingewave.com/types#video_processing_state.

2. Функция API.startStream: эта функция вызывает наш созданный выше объект API, который вызывает конечную точку https://developers.bingewave.com/docs/eventcommands#startstream. Это используется для воспроизведения загруженного видео, когда оно связано с событием. В соответствии с документами мы проигрываем конкретное видео.

Скопируйте и вставьте приведенный выше код в VideoListings.js. Также найдите время, чтобы сравнить отклик на переменные в коде.

Бонусное испытание

Одна из функций, которую мы не реализовали, — это загрузка чанков. Файлы фильмов могут быть многогигабайтными (10 Гб, 20 Гб или даже 100 Гб). Вы не хотите загружать весь файл, а вместо этого делайте это частями. В качестве дополнительной задачи напишите и реализуйте функцию для загрузки фрагментированных файлов в API.

Следующие шаги — часть 2

На этом первая часть раздела Создание приложения для прямой трансляции фильмов и веб-сайта Live TV завершена. Наконец, у нас есть основа для настройки нашего приложения. Далее мы создадим страницы и формы для загрузки контента и потоковой передачи фильмов в Часть 2, расположенную здесь.

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