Как создать приложение для записи видео

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

  • Запись интервью
  • Запись прямого эфира
  • Запись отзыва о продукте
  • Запись практических презентаций

И многие другие варианты использования, в которых потребуется запись. В этом руководстве рассказывается, как создать запись с использованием видеотехнологии BingeWave. Мы будем использовать эту демонстрацию, чтобы продемонстрировать функции записи как в мобильных, так и в веб-приложениях.

Код и требования

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

Требования к разработчикам

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

  • Командная строка
  • Реагировать на родной
  • Экспо
  • Javascript

Скачать код

Код в этом руководстве доступен онлайн в нашем репозитории Github, его можно загрузить и запустить на локальном компьютере. Чтобы получить код, пожалуйста, посетите:

https://github.com/BingeWave/Build-A-WebRTC-Video-Recording-App

Аккаунт организатора

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

Создать трансляцию

Прежде чем мы создадим наше приложение в React Native и Javascript для веб-браузеров, нам нужно создать наш видеосеанс в так называемом живом событии. Все видеочаты, аудиосессии, показы фильмов и опыт дополненной реальности на BingeWave являются живыми событиями. Живое событие будет иметь все функции, начиная от записи пользователей и заканчивая сообщениями в чате.

Чтобы создать событие в прямом эфире, во-первых, вы должны понимать типы событий. Существует несколько типов прямых трансляций, как указано здесь, в документации:

https://developers.bingewave.com/types#event_types

За исключением мгновенного события, для каждого типа события требуется дата/время, поскольку они должны быть запланированы. Для краткости этого урока мы собираемся создать Мгновенное событие. Документацию по созданию живого события можно найти здесь:

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

Чтобы протестировать создание события, мы будем использовать инструмент под названием Query Builder. Построитель запросов — это интерфейс с API, который позволяет разработчикам тестировать запросы и изучать поведение маршрутов перед написанием кода. Мы будем использовать Query Builder для создания Live Event, мы собираемся создать запуск запроса как такового:

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

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

Есть три поля, на которые мы хотим обратить внимание в ответе JSON:

  1. id: идентификатор прямого эфира, мы будем ссылаться на него несколько раз позже.
  2. embed_video_chat: тег, который размещается на веб-страницах HTML для создания интерфейса BingeWave.
  3. webview_video_chat: URL-адрес, размещенный внутри Webviews для мобильных приложений для использования интерфейса BingeWave.

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

Добавьте кнопку записи в трансляцию

Далее нам нужно добавить возможность записи вашего видео сеанса на BingeWave. Записать видеозвонок можно тремя способами:

  1. У нас есть маршрут API, который можно использовать для запуска и остановки записи. Это для узкоспециализированных приложений, которые хотят управлять вне видеоинтерфейса.
  2. Есть готовые виджеты, которые могут выполнять запись. Виджеты — это функциональные возможности, которые мы добавляем к нашей видеосессии в прямом эфире.
  3. Вы можете создать свой собственный виджет для записи с помощью вышеуказанного API.

Для краткости этого урока мы собираемся использовать готовый виджет. Виджеты — это приложения, написанные на HTML, CSS и Javascript, которые можно размещать в любом месте интерфейса с помощью системы сетки. Система сетки — это система координат, которая накладывается на весь видеоплеер.

Подробнее о виджетах и ​​сеточных системах вы можете прочитать здесь, а вот хорошая иллюстрация сеточной системы:

Мы возьмем готовый виджет для записи и поместим его в сетку выше. Здесь доступен API виджета:

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

Мы начнем с получения списка виджетов и поиска записи. Снова используя Query Builder, мы собираемся сделать вызов конечной точки виджетов:

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

Когда результаты возвращаются, появляется виджет записи с идентификатором «f5099483–8c38–48e7–88ba-7864220b19a0».

Мы хотим добавить этот виджет к живому событию, которое мы создали выше. Сначала переходим к документам по добавлению виджета в событие:

https://developers.bingewave.com/docs/eventwidgets#addwidget

Поля, на которые следует обратить внимание в документации:

  • event_id: идентификатор трансляции.
  • widget_id: идентификатор виджета, который мы добавляем к трансляции.
  • accessible_for_host: мы сделаем виджет доступным для пользователей с ролью hosts.
  • accessible_for_participant: мы сделаем виджет доступным для пользователей с ролью участника. Роль участника — это роль по умолчанию, означающая, что все пользователи будут иметь доступ к виджету.
  • позиция: где виджет будет располагаться внутри сетки.

Большинство приведенных выше значений не требуют пояснений относительно того, какие значения будут использоваться в поле. Значение, которое входит в поле position, — это поле, найденное в нашей диаграмме расположения позиций виджета:

https://developers.bingewave.com/types#widget_positions

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

https://developers.bingewave.com/queries/eventwidgets#addwidget

Помните, что у вас есть правильный идентификатор события в прямом эфире в маршруте. Когда значения введены правильно и вы нажмете «Отправить», виджет «Запись» будет добавлен в нижний колонтитул Live Event, который вы создали ранее, и теперь организатор и участник смогут записывать. Поздравляю! Далее мы можем протестировать наше приложение.

Структура приложения

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

mkdir recording_app
cd recording_app

Эта папка будет нашей корневой папкой для проекта. В этой папке мы собираемся создать каталог для веб-приложений и мобильных приложений.

mkdir web
mkdir mobile

Вот и все! Мы будем использовать эти две папки для создания нашего приложения на следующих шагах.

Запись в веб-приложении

Во-первых, мы собираемся создать простое веб-приложение, чтобы люди могли записывать со своих компьютеров. Вы должны начать с понимания системы встраивания BingeWave, которая обсуждается здесь:

https://developers.bingewave.com/javascript/bwconnector

Для веб-приложений коннектор Javascript BingeWave загружается на веб-страницу. Затем соединитель ищет теги, похожие на следующие:

<bw:widget></bw:widget>

Теги берутся и превращаются в интерфейс для пользователя. Возвращаясь к embed_video_chat, возвращенному в формате JSON при создании прямой трансляции, мы собираемся внедрить его на веб-страницу. Давайте создадим наш индексный файл:

touch web/index.html

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

Замените XXXX идентификатором вашего прямого эфира. Код представляет собой очень простые теги HTML, Javascript в заголовке, а тело — это просто тег для встраивания. Откройте веб-страницу в браузере, и ваш видеочат откроется. Присоединяйтесь к чату, и внизу появится кнопка «Запись». Когда вы нажмете на нее, запись начнется и остановится. Вот и все!

getUserMedia Неопределенная ошибка

На локальном хосте в веб-браузере вы можете столкнуться с этой проблемой:

Происходит то, что ваш браузер блокирует возможность получения видео, потому что это небезопасное соединение. Чтобы решить эту ошибку, прочитайте эту статью здесь Исправление WebRTC для getUserMedia Undefined On Local Hosts.

Доступ к записанному видео

Теперь, когда записи сделаны, куда они идут? Есть два способа добраться до записей. Что касается API, мы собираемся перейти к Query Builder для предварительно записанного контента (видео) здесь:

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

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

Теперь это все ваши видеофайлы. Возможно, вам нужны только видеофайлы, связанные с вашим событием в прямом эфире. Чтобы получить это, перейдите в Query Builder для просмотра Live Event здесь:

https://developers.bingewave.com/queries/events#view

Введите идентификатор вашего прямого эфира и нажмите «Отправить». Когда результаты будут возвращены, перейдите в раздел предварительно записанного содержимого JSON для этого живого события. Вы увидите записи, доступные там.

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

Мобильное приложение

Для создания мобильного приложения для записи мы будем использовать React Native и Expo, так как это самый быстрый и простой способ настройки для демонстрации. Если у вас не установлен Expo, давайте начнем с его установки:

 npm install — global expo-cli

Приведенная выше команда установит Expo глобально. Теперь давайте создадим проект Expo. В корневом каталоге введите в командной строке следующее:

expo init mobile
cd mobile

Expo создаст мобильное приложение. При появлении запроса выберите минимальную настройку. Теперь мы собираемся установить пакет:

npm install react-native-webview --save

Вышеупомянутый пакет представляет собой простое веб-представление, которое мы будем использовать для загрузки внешних страниц в ваше приложение. Далее мы удалим стандартный контент и добавим наш виджет записи. Помните, в предыдущем шаге JSON для живого события был webview_video_chat? Возвращаемое из этого значение теперь войдет в Webivew как таковое:

<WebView
source={{ uri: ‘https://widgets.bingewave.com/webrtc/xxxxx'}}
style={{flex:1}}
javaScriptEnabled={true}
allowsInlineMediaPlayback={true}
/>

Вы замените XXXX идентификатором вашего прямого эфира. Чтобы разбить реализацию Webview:

  1. Источник: URL-адрес, который будет загружен в Webview.
  2. Стиль. Любые элементы дизайна, которые вы хотите использовать для представления.
  3. javaScriptEnabled: гарантирует, что Webview позволит запускать Javascript.
  4. allowsInlineMediaPlayback: позволяет воспроизводить видео в режиме реального времени. В противном случае он развернется на весь экран, и вы потеряете функциональность.

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

Наконец, запустите приложение с помощью Expo:

expo start

Выберите запуск на Android или iOS. Предпочтительно, чтобы вы хотели получить это на реальном устройстве, потому что в симуляторах не будет работающих камер. Когда приложение загрузится, присоединяйтесь к видеочату.

Когда внизу появляется кнопка «Начать запись», вы можете запускать и останавливать запись, и она работает так же, как и в веб-приложении. Вот и все! Теперь помните, что в симуляторе ваше видео НЕ будет записано, так как в симуляторе нет камеры.