Во всех наших приложениях сотрудники могут общаться при помощи встроенного чата. При этом все чаще можно увидеть приложения, которые позволяют общаться пользователям по видеосвязи  без перехода в сторонние сервисы.  В этой статье я расскажу про удобный способ создания такого функционала. Расскажу про готовые инструменты, опишу основные моменты, мысли, ссылки. Будет интересно! Web Real Time Communications  - это технология, которая позволяет осуществлять передачу аудио и видео потоков. На базе нее строятся приложения для видеконференций, например, Google meet, также ее применяют в приложениях для совместой работы (miro) и социальных сетях (vk). Подробно описывать WebRTC не будем, на эту тему полно статей и документации, сосредоточимся на технологии Angular. Это платформа для создания видеозвонков основанная на webrtc. Она включает в себя бекенд реализацию и клиентские библиотеки. Мы сосредоточимся на клиенте так как статья посвящена Angular. Приведем возможности клиентской бибилиотеки Openvidu: Осуществлять аудио/видео звонки Демонстрировать экран Поддержка чата Возможность переключения устройств ввода/вывода Определение речи Кастомизация клиентских библиотек Многие  возможности мы рассмотрим на примерах ниже. Основные объекты из API Openvidu для построения приложения: OpenVidu  - класс отвечающий за основную точку входа для работы с webRtc Session - представляет из себя реализацию звонков. По сути комната, в рамках которой участники конференции могут взаимодействовать Publisher - описывает участника сессии, который стримит аудио/видео поток Subscriber - описывает участника, который может получать аудио/видео поток от Publisher в рамках сессии Для демо приложения воспользуемся готовым docker контейнером, который содержит в себе сервер openvidu. Документацию для установки можно найти по ссылке. Предполагается, что у вас установлен docker Для запуска контейнера необходимо выполнить следующую команду. Также для разработки и тестирования могут потребоваться виртуальные камеры. Можно рассмотреть следущие: SplitCam ManyCam С помощью них можно подставить любое видео в качестве видеопотока для приложения. А также API браузера сможет определять виртуальные устройства в качестве источника. Эти два простых шага достаточны для создания клиентского демо приложения. Приступим! Для примера создадим приложение для совещаний, в котором будут находиться N пользователей. Каждый из них будет иметь возможность совершать базовые действия в приложении: Подключаться к конференции Включать/выключать видео/аудио Демонстрировать экран Идентифицировать говорящего Подключение участников к видеоконференции Создадим video-call.service.ts, который будет отвечать за работу с OpenVidu и упралять логикой видеозвонка. Для начала реализуем подключение к серверу и создание сессии join: В этом методе происходит следующее: создание объекта сессии подписка на события сессии получение токена с сервера подключение к сессии видеозвонка  создание паблишера Рассмотрим подробнее создание паблишера: initPublisher создает инстанс паблишера в который передаются настройки: audioSource/videoSource - источники звука и видео. Это могут быть все возможные физические и виртуальные камеры и микрофоны publishAudio/publishVideo - состояние публикации звука или видео а также различные настройки качества и разрешения видео Для трансляции видео нужно сделать компонент в котором будет связываться элемент video и видеопоток. Шаблон компонента, который содержит тег video Код компонента. В нем происходит получение ссылки на video элемент и при помощи API openvidu и метода addVideoElement видеопоток привязвается к html. Результат работы программы Демонстрация экрана участником Демонстрация очень похожа на инициализацию камеры за исключением того что в качестве видеоисточника указывается 'screen' Результат работы Выключение/включение камеры/звука участниками Для того чтобы отключить или включить видео/звук нужно воспользоваться следующими методами у паблишера Подсветка говорящего участника с помощью API определения речи В начале создания приложения мы вызывали subscribeSessionEvents, настало время его рассмотреть подробнее: Сессия сама предоставляет нам информацию об участнике, который начинает и заканчивает говорить publisherStartSpeaking - участник начинает говорить в объекте event содержится идентификатор участника, имея эту информацию можно выдеделить компонент  этого участника  publisherStopSpeaking - по этому событию можно снять выделение участника Переключение камеры Есть два сценария выбора камеры при инициализации паблишера при переключении во время публикации Для первого варианта  необходимо получать информацию о текущих девайсах устройства, для этого можно воспользоваться как стандартными браузерными API так и оберткой из OpenVidu Устройства можно вывести в выпадающий список в интерфейсе и при выборе его устанавливать значение deviceId в паблишер (методы выше initPublisher) Для того, чтобы переключать камеры в режиме реального времени, нужно получить   mediaStream из выбранного устройства Далее воспользуемся API: На этом этапе мы научились делать весь фукнкционал который обозначили в начале статьи В Chrome существует особая политика с автовоспроизведением видео. Ее стоит учитывать, так как существуют сценарии когда видеопоток не будет стартовать, например пока пользователь не сделает какое-либо действие на странице. Помимо трансляции видео с камеры( виртуальной камеры) или рабочего стола, можно транслировать обычное видео с помощью API браузера - captureStream  Документация MediaStream - в ней можно узнать детали потоков медиаданных Для включения видеоэкрана "во весь экран" можно воспользоваться API requestFullscreen В одной из статей я писал про технологию Web Speech API. Интересно можно ли ее применить для WebRTC, например, для преобразования аудиопотока в текст прямо в браузере. Был ли у вас такой опыт? Ссылка на пример из статьи У ZOOM есть свой sdk для построения подобных приложений, интересны его возможности Сейчас все больше приложений позволяют осуществлять видеозвонки - от социальных сетей  до приложений для совместной работы. С помощью технологии WebRTC вы можете улучшить пользовательский опыт ваших клиентов, дав им возможность звонить  из приложений. Tech Lead using Angular & .net