Поскольку виртуальные мероприятия теперь приемлемы и будут продолжаться после COVID-19, возможность прямой трансляции и проведения гибридных мероприятий станет бизнес-требованием будущего.

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

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

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

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

Требования к разработчику. Разработчик, читающий это руководство, должен обладать базовыми знаниями в следующих областях:

  • HTML
  • Javascript
  • JSON

Основной код: вы можете ознакомиться с рабочим примером кода здесь: https://github.com/BingeWave/Building-A-Live-Streaming-App-For-Virtual-Events.

Результаты обучения:

  • CRUD (создание, обновление, чтение, удаление) с помощью построителя запросов
  • Вызов API извне

Приблизительное время выполнения: 15–20 минут.

Уровень сложности: легкий

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

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

Шаг 2. Базовый HTML-документ

Давайте начнем этот урок с создания базового HTML для вашей веб-страницы. Мы собираемся использовать Bootstrap 5 в заголовке и включим скрипт подключения BingeWave. В нашем теле у нас будет область для создания нашего основного контента и бокового меню. Вы можете скопировать и вставить код ниже:

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

<script type="text/javascript">
     BingewaveConnector.init();
</script>

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

Шаг 2. Создание нескольких прямых трансляций

Далее мы собираемся создать несколько событий через наш API. Есть несколько типов живых событий, которые мы можем использовать, но нам нужен особый вид, веб-чат. Чтобы увидеть различные типы живых событий, вы можете проверить здесь: https://developers.bingewave.com/types#event_types.

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

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

Отсюда мы понимаем, что делаем POST-запрос к bw.bingewave.com/events. И обязательными полями в теле запроса будут тип, дистрибьютор_ид, событие_название, событие_описание и запрос_дата_1. Итак, давайте посмотрим, сможем ли мы создать событие с помощью построителя запросов по адресу:

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

Этот построитель запросов поможет вам сначала создать живое событие здесь, а затем импортировать эти события на ваш веб-сайт.

  1. Убедитесь, что вы вошли в систему и создали учетную запись дистрибьютора.
  2. Выберите параметры тела, так как мы собираемся добавить некоторые обязательные поля.
  3. Нажмите «Добавить параметр» и введите «event_title» в качестве ключа. В соответствующем значении введите название события.
  4. Добавьте еще один параметр и введите «event_description» в качестве ключа и дайте событию описание, связанное с заголовком.
  5. Добавьте еще один параметр, введите «requested_date_1» в качестве ключа и введите дату в стандартном формате ISO 8601/SQL (т. е. представьте себе формат даты MySQL, например, 2023–03–31 12:34:56).
  6. Прокрутите немного вниз, и вы должны увидеть два раскрывающихся списка: один для типа события, а другой для учетной записи дистрибьютора. Выберите учетную запись дистрибьютора и выберите тип события «Видеочат/WebRTC».
  7. Необязательно: введите в тело другие поля, например часовой пояс, для дальнейшей настройки интерфейса.

Ваши поля должны выглядеть примерно так, как на картинке ниже.

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

Теперь повторите это еще 2–4 раза, чтобы создать несколько событий.

Шаг 3. Проверьте созданные вами мероприятия

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

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

Картинка подсказывает, что для получения списка событий мы должны отправить запрос GET на адрес bw.bingewave.com/events. В качестве параметра требуется id_дистрибьютора. Теперь для тестирования в построителе запросов:

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

  1. Прокрутите форму конструктора запросов списка до конца, и вы увидите список дистрибьюторов. Выберите тот, который вы использовали для создания событий, и он должен заполнить вкладку параметров.
  2. Нажмите кнопку Отправить, после чего должен вернуться список событий.

Мы проверили, что ваши данные там! Итак, давайте вернемся к созданию вашего приложения.

Шаг 4. Добавление событий в наше веб-приложение

Вернитесь к настройкам вашего HTML-сайта и прокрутите вниз. Создайте пару тегов script, так как мы собираемся ввести код Javascript. В верхней части скрипта мы создадим две константы: ваш токен авторизации и идентификатор дистрибьютора.

Внимание!!! НИКОГДА не храните свой JWT (веб-токен Json) внутри файла, как мы это делаем в рабочей среде. Это только для демонстрационных целей.

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

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

Наконец, мы собираемся заполнить события на боковой панели нашей веб-страницы.

  1. Примите ответ, проверьте, успешен ли он. Помните, API BingeWave всегда возвращает статус 200. Вы должны проверить, был ли запрос успешным или нет.
  2. Итерация по атрибуту данных ответа; это должен быть массив объектов живых событий.
  3. Используя строковый литерал в качестве шаблона, замените значение итерируемых данных.
  4. Согласно нашему текущему HTML-коду, добавление строкового литерала к списку событий является нашим объектом eventList.

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

Шаг 5. Внедрение основного контейнера

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

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

Согласно документам, запрос GET к bw.bingewave.com/events/{id}, где идентификатор является заполнителем для нужного вам живого события, вернет данные одного события. Чтобы поиграть с маршрутом, перейдите в Query Builder:

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

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

  1. Передать идентификатор в функцию
  2. Вызовите маршрут для получения данных об одном событии.
  3. Если вызов выполнен успешно, возьмите данные и передайте их через строковый литерал, чтобы создать HTML-код события.
  4. Добавьте данные к элементу.
  5. После того как встроенный виджет был реализован на странице, вызовите BingeWaveConnector.parseTags(), чтобы отобразить встроенные виджеты.

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

Здесь вы заметите этот небольшой, но мощный фрагмент кода:

${data.embed_video_chat}

Если вы вернетесь к документам, перейдите в раздел «Просмотр событий в реальном времени» и просмотрите ответ (не забудьте нажать «Показать все поля»), вы увидите следующее:

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

Этот результат API представляет собой вставку для отображения видеочата. Обратите внимание, что есть несколько встроенных тегов. При размещении тега внедрения функция BingeWaveConnector.parseTags() обеспечит его отображение. Теперь мы готовы запустить наше приложение!

Шаг 6. Переключение между событиями

Давайте покажем полный скрипт того, как должно быть построено мини-приложение:

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

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

Если вы попытались протестировать код и получили ошибку getUserMedia is Undefined в своей консоли, которая выглядит примерно так:

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

  1. Разрешить небезопасные домены — прочитать короткую статью
  2. Используйте https-подключение Ngrok (описано ниже)

Шаг 7 — Сделать доступным с помощью Ngrok

Как и в предыдущем уроке, мы будем использовать Ngrok, чтобы сделать наш веб-сайт общедоступным через Интернет. Чтобы начать загрузку Ngrok, если вы еще этого не сделали: https://ngrok.com/download

После этого мы собираемся использовать NodeJS для запуска веб-сервера. Если в вашей системе не установлен Node, погуглите, как его установить. Мы собираемся инициализировать с помощью npm:

npm init

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

npm install http #install a basic http server
npm install fs  #installs the file reader

http создаст веб-сервер на вашем локальном хосте, а fs прочитает html-файл и отобразит его содержимое на веб-сервере.

touch index.js

И внутри вставьте следующее:

Сервер настроен на прослушивание порта 3200. В командной строке запустите файл index.js, используя node:

node index.js

Наконец, на вашем веб-сервере откройте localhost:3200, и ваша страница должна появиться! Теперь, что касается действительно интересной части с Ngrok, мы собираемся сделать вашу веб-страницу общедоступной. В отдельной консоли, поскольку нам нужно, чтобы веб-сервер нашего узла все еще работал, выполните следующее:

ngrok http 3200

В случае успеха ваш экран должен выглядеть так:

Заметили, как выделена переадресация https? Скопируйте и вставьте URL-адрес в свой веб-браузер, и вы сможете успешно поделиться этим URL-адресом с другими. Имейте в виду, что URL-адрес будет действителен только в течение ограниченного периода времени.

Задача — внедрить несколько виджетов

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

Дополнительные руководства

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