Делаем видеозвонки с помощью Angular, WebRTC и Openvidu

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

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

Что такое WebRTC

Web Real Time Communications — это технология, которая позволяет осуществлять передачу аудио и видео потоков. На базе нее строятся приложения для видеконференций, например, Google meet, также ее применяют в приложениях для совместой работы (miro) и социальных сетях (vk). Подробно описывать WebRTC не будем, на эту тему полно статей и документации, сосредоточемся на технологии Angular.

Openvidu

Это платформа для создания видеозвонков основанная на webrtc. Она включает в себя бекенд реализацию и клиентские библиотеки. Мы сосредоточимся на клиенте так как статья посвящена Angular.

Приведем возможности клиентской бибилиотеки Openvidu:

• Осуществлять аудио/видео звонки

• Демонстрировать экран

• Поддержка чата

• Возможность переключения устройств ввода/вывода

• Определение речи

• Кастомизация клиентских библиотек

Многие возможности мы рассмотрим на примерах ниже.

Основные объекты из API Openvidu для построения приложения:

• OpenVidu — класс отвечающий за основную точку входа для работы с webRtc

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

• Publisher — описывает участника сессии, который стримит аудио/видео поток

• Subscriber — описывает участника, который может получать аудио/видео поток от Publisher в рамках сессии

Подготовка окружения

Для демо приложения воспользуемся готовым docker контейнером, который содержит в себе сервер openvidu. Документацию для установки можно найти по ссылке.

Предпологается, что у вас установлен docker

Для запуска контейнера необходимо выполнить следующую команду.

docker run -p 4443:4443 --rm -e OPENVIDU_SECRET=MY_SECRET openvidu/openvidu-server-kms:2.20.0

Также для разработки и тестирования могут потребоваться виртуальные камеры. Можно рассмотреть следущие:

• SplitCam

• ManyCam

С помощью них можно подставить любое видео в качестве видеопотока для приложения. А также API браузера сможет определять виртуальные устройства в качестве источника.

Эти два простых шага достаточны для создания клиентского демо приложения. Приступим!

Создание приложения

Для примера создадим приложение для совещаний, в котором будут находиться N пользователей. Каждый из них будет иметь возможность совершать базовые действия в приложении:

• Подключаться к конференции

• Включать/выключать видео/аудио

• Демонстрировать экран

• Идентифицировать говорящего

Подключение участников к видеоконференции

Создадим video-call.service.ts, который будет отвечать за работу с OpenVidu и упралять логикой видеозвонка. Для начала реализуем подключение к серверу и создание сессии join:

join() {     this.session = this.OV.initSession();     this.subscribeSessionEvents();      from(this.getToken())     .pipe(       switchMap((token: string) => {         return from(this.session.connect(token, { clientData: this.userName }))       }),       tap(() => {         this.initPublisher();       })     ).subscribe();   }

В этом методе происходит следующее:

• создание объекта сессии

• подписка на события сессии

• получение токена с сервера

• подключение к сессии видеозвонка

• создание паблишера

Рассмотрим подробнее создание паблишера:

initPublisher() {     const publisher: Publisher = this.OV.initPublisher('', {       audioSource: undefined,       videoSource: this.deviceId,       publishAudio: true,       publishVideo: true,       resolution: '640x480',       frameRate: 30,       insertMode: 'APPEND',       mirror: false     });      this.session.publish(publisher);     this.currentUser$.next(publisher);   }

initPublisher создает инстанс паблишера в который передаются настройки:

• audioSource/videoSource — источники звука и видео. Это могут быть все возможные физические и виртуальные камеры и микрофоны

• publishAudio/publishVideo — состояние публикации звука или видео

• а также различные настройки качества и разрешения видео

Для трансляции видео нужно сделать компонент в котором будет связываться элемент video и видеопоток.

Шаблон компонента, который содержит тег video

<div class="ov-video">     <video #videoElement></video> </div> 

Код компонента. В нем происходит получение ссылки на video элемент и при помощи API openvidu и метода addVideoElement видеопоток привязвается к html.

 @ViewChild('videoElement') elementRef: ElementRef | undefined;    _streamManager: StreamManager;      ngAfterViewInit() {     this._streamManager.addVideoElement(this.elementRef.nativeElement);   }

Результат работы программы

Демонстрация экрана участником

Демонстрация очень похожа на инициализацию камеры за исключением того что в качестве видеоисточника указывается ‘screen’

 initScreenPublisher() {     const publisher: Publisher = this.OV.initPublisher('', {       audioSource: undefined,       videoSource: 'screen',       publishAudio: true,       publishVideo: true,       resolution: '640x480',       frameRate: 30,       insertMode: 'APPEND',       mirror: false     });      this.session.publish(publisher);     this.currentUser$.next(publisher);   }

Результат работы

Выключение/включение камеры/звука участниками

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

enableVideo() {     this.currentUser$.value.publishVideo(true);     this.videoEnabled = true;   }    disableVideo() {     this.currentUser$.value.publishVideo(false);     this.videoEnabled = false;   }

Подсветка говорящего участника с помощью API определения речи

В начале создания приложения мы вызывали subscribeSessionEvents, настало время его рассмотреть подробнее:

subscribeSessionEvents() {     this.session.on('streamCreated', (event: any) => {       const subscriber: Subscriber = this.session.subscribe(event.stream, '');       this.users$.value.push(subscriber);       this.users$.next([...this.users$.value]);     });      this.session.on('streamDestroyed', (event: any) => {      // Удалить пользователя с конференции     });      this.session.on('publisherStartSpeaking', (event: any) => {       // пробросить событие и подстветить юзера с event.connection.connectionId     });      this.session.on('publisherStopSpeaking', (event: any) => {       // пробросить событие и подстветить      });   }

Сессия сама предоставляет нам информацию об участнике который начинает и заканчивает говорить

• publisherStartSpeaking — участник начинает говорить в объекте event содержится идентификатор участника, имея эту информацию можно выдеделить компонент этого участника

• publisherStopSpeaking — по этому событию можно снять выделение участника

Переключение камеры

Есть два сценария выбора камеры

• при инициализации паблишера

• при переключении во время публикации

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

getDevices() {     from(this.OV.getDevices())     .pipe(       tap(x => {         const videoDevices = x.filter(x => x.kind === 'videoinput');        .....       })     ).subscribe();   }

Устройства можно вывести в выпадающий список в интерфейсе и при выборе его устанавливать значение deviceId в паблишер (методы выше initPublisher)

Для того, чтобы переключать камеры в режиме реального времени, нужно получить mediaStream из выбранного устройства

 selectCamera(value) {     this.videoCallService.getVideoMediaTrack({videoSource: value}).pipe(       untilDestroyed(this),       tap(mediaTrack => {           if (mediaTrack) {             this.videoCallService.videoMediaTrack$.next(mediaTrack);           }         }       )).subscribe();   }

Далее воспользуемся API:

replaceTrack(track: MediaStreamTrack) {    this.publisher.replaceTrack(track).then(() => ...         .catch(error => console.error('Error replacing track'));   }

На этом этапе мы научились делать весь фукнкционал который обозначили в начале статьи

Рекомендации, решения, мысли, ссылки

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

• Помимо трансляции видео с камеры( виртуальной камеры) или рабочего стола, можно транслировать обычное видео с помощью API браузера — captureStream

• Документация MediaStream — в ней можно узнать детали потоков медиаданных

• Для включения видеоэкрана «во весь экран» можно воспользоваться API requestFullscreen

• В одной из статей я писал про технологию Web Speech API. Интересно можно ли ее применить для WebRTC, например, для преобразования аудиопотока в текст прямо в браузере. Был ли у вас такой опыт?

• Ссылка на пример из статьи

• У ZOOM есть свой sdk для построения подобных приложений, интересны его возможности

Заключение

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