Еще в марте SignalWire объявила о выпуске Программируемой видеосвязи (PVC). Эта функция позволяет быстро создавать и встраивать видеоконференции в HTML. Это означает, что вы можете добавить видеочат прямо на страницу продукта, на веб-сайт поддержки, в приложение Wordpress и т. д.
Что, если вы хотите сделать больше? Этот пост покажет вам, что вы можете делать с программируемой частью этой новой функции, включая размытие или замену фона и отслеживание того, как долго говорит каждый участник. Все примеры доступны на GitHub и готовы к работе, просто добавьте токен комнаты.
Во-первых, освежение в использовании ПВХ.
В этом руководстве предполагается, что у вас есть учетная запись SignalWire и вы создали пространство SignalWire.
Создание комнаты
Войдя в SignalWire Space, перейдите на страницу Видео из бокового меню. Перейдите на вкладку Конференции, а затем нажмите +Создать, чтобы создать новую видеокомнату.
Назовите свою новую комнату и выберите пользовательский интерфейс. Затем нажмите Далее.
Теперь ваша комната создана, и вам предоставляется несколько способов настроить и встроить свою комнату или получить токен комнаты для использования в пользовательском коде!
Вы можете изменить различные свойства комнаты в соответствии с вашими потребностями. Например, разрешение и макет по умолчанию.
Вы даже можете изменить внешний вид, не изменяя CSS!
Подписка на события Room с помощью vanilla Javascript
Базовый код внедрения, предоставляемый PVC, поддерживает модификацию для подписки на ряд событий.
- layout.changed
- член.обновлено
- член.присоединился
- член.левый
- член.говорящий
- room.joined
- номер.обновлено
Давайте взглянем на типичный Код встраивания модератора, который вы можете найти на предыдущей странице для вновь созданной видеокомнаты.
Этот код для встраивания можно поместить в любое HTML-приложение, и он мгновенно добавит полнофункциональную видеоконференцию. Но как мы подписываемся на эти события?
Легко, просто добавьте обработчик событий вот так.
Свойство username является необязательным, как и свойство setupRoomSession. Свойству setupRoomSession можно передать функцию, которая возвращает roomSession, и этот roomSession можно использовать для подписки на перечисленные выше события.
В следующих разделах мы рассмотрим несколько примеров проектов, которые помогут вам перейти на новый уровень!
Пример стандартных событий
Мы собрали Репозиторий GitHub с несколькими примерами проектов PVC. В нем есть базовый образец, в котором есть простая форма, предлагающая ввести имя пользователя, прежде чем он отобразит видеозал и подпишется на все события. Затем все события отображаются в элементе HTML. Мы создали это, чтобы помочь вам поэкспериментировать с ПВХ и увидеть, что вы можете построить!
Чтобы сделать это еще проще, все, что вам нужно для начала, это открыть эту ссылку CodeSandbox и вставить свой токен модератора или гостя со страницы видеокомнаты.
После сохранения файла используйте встроенный браузер в редакторе CodeSandbox или откройте страницу в другой вкладке. Введите имя пользователя и нажмите Присоединиться к комнате. Пока вы говорите, вы увидите событие выхода из системы member.talking.
Расчет времени разговора
Как и в предыдущем примере, все, что вам нужно сделать, чтобы запустить этот пример, — это открыть ссылку CodeSandbox и вставить токен комнаты.
Мы рекомендуем самостоятельно изучить код в CodeSandbox или в Репозитории GitHub, чтобы лучше понять, как мы отслеживаем участников и время, которое они тратят на общение. Мы используем события участников, чтобы узнать, кто присоединился или вышел, а затем используем это, чтобы отслеживать, кто говорит по имени пользователя и как долго.
Размыть или заменить фон
В GitHub Repository есть два примера использования Google Mediapipe в Javascript для замены фона на любое изображение или для размытия фона. Кнопка Начать начнет изменять трансляцию с камеры, но она не будет отправлена в комнату SignalWire, пока вы не нажмете Потоковая передача.
Это отличный пример того, что вы можете сделать в браузере, используя программируемую видеосвязь SignalWire.
Ссылки на CodeSandbox
Вау! Это потрясающе!
Я точно знаю?!
Эти примеры показывают, насколько эффективными могут быть возможности настройки, переносимости и программируемых функций для видеоконференций. Благодаря множеству ресурсов с открытым исходным кодом в сообществе HTML и Javascript существует столько же возможностей для изучения того, что возможно, когда видеоконференции становятся еще одним кирпичиком LEGO для работы.
Я надеюсь, что вы вдохновились на дальнейшее развитие этих примеров и создание чего-то действительно удивительного.
Здесь, в SignalWire, мы любим наше сообщество разработчиков! Найдите нас в SignalWire Twitter и обязательно присоединитесь к нашему Slack сообщества SignalWire. Мы всегда рады помочь ответить на вопросы и с нетерпением ждем возможности пообщаться с вами!
