Для начала давайте определим некоторые вещи и установим ожидания. Twitch — это гигантская платформа, которая позволяет людям вести трансляции и взаимодействовать со зрителями. Из Википедии: По состоянию на февраль 2020 года у него было 3 миллиона вещателей в месяц и 15 миллионов активных пользователей в день, при этом в среднем 1,4 миллиона одновременных пользователей.

Создание чего-то такого масштаба требует гораздо большего, чем то, что можно узнать в одном посте в блоге. Вместо этого этот пост будет направлен на создание более «личного Twitch». Меньше концерта поп-звезды размером со стадион и больше местного/независимого артиста в кофейне. Место, где человек, ведущий трансляцию, может фактически читать сообщения в чате.

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

Вышеупомянутое существующее приложение — это Образец приложения для вещания, созданный для демонстрации возможностей вещания Vonage Video API. Для добавления текстового чата будут использоваться Веб-компоненты клиентского SDK UI.

Трансляция видео

Vonage Video API предлагает два способа обмена видеосессиями с аудиторией.

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

Прямые трансляции — ведущие по-прежнему публикуют и подписываются на потоки друг друга, но есть объединенный единый поток трансляции, который потребляют зрители. Объединение потоков добавит некоторую задержку для зрителя. Этот вариант ближе к тому, как Twitch, YouTube, Facebook и другие обрабатывают прямые трансляции.

Образец трансляции Vonage Video API может делать и то, и другое, но здесь мы сосредоточимся на опции прямой трансляции для нашего личного приложения Twitch.

Текстовый чат

Какая прямая трансляция на Twitch без чата? Чтобы добавить эту функциональность, будут использоваться Веб-компоненты клиентского SDK UI. В частности, будут интегрированы элементы vc-messages, vc-text-input и vc-typing-indicator.

Объединение двух

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

Есть ли в существующем приложении место для добавления веб-компонентов? В зависимости от макета может потребоваться некоторая перестановка. Это помогает заранее спланировать, как должен выглядеть окончательный результат, а затем погрузиться в код, чтобы увидеть, что нужно переместить. К счастью, макет приложения Broadcast не был слишком сложным. Просто пришлось сделать раздел видео немного более узким, чтобы освободить место для интерфейса чата. Это касалось в основном CSS.

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

Мы только что рассмотрели встраивание веб-компонентов в пользовательский интерфейс приложения, но как насчет того, чтобы вписаться в пользовательский интерфейс? Что необходимо для работы веб-компонентов и доступны ли они в приложении?

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

Веб-компоненты пользовательского интерфейса Client SDK также должны знать идентификатор беседы, чтобы он мог отправлять и отображать сообщения в правильном чате. Пример приложения Broadcast использует параметры в URL-адресе для передачи некоторой информации о потоке, я просто добавил еще один для идентификатора беседы, чтобы все присоединялись к одному и тому же чату.

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

Конечный продукт

Если вы хотите лично увидеть созданное приложение в действии, вы можете сделать ремикс Glitch project. Запустив скрипт установки и введя пару ключей и секретов API, вы тоже можете иметь свой собственный Twitch.

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

Первоначально опубликовано на странице https://learn.vonage.com/blog/2021/12/15/create-a-personal-twitch-with-vonage-video-api-and-web-components/