Angular, C# и WebRTC: как устроен российский софт для видеозвонков
easy

Angular, C# и WebRTC: как устроен российский софт для видеозвонков

Говорим с ребятами из «Контура»

Нас в «Коде» волнует будущее российского ИТ-рынка: что изучать, чтобы быть востребованным, и где в России делают внутренние и международные продукты. Мы уже писали об отечественных облаках, о перспективах карьеры в ближайшие годы, а ещё есть амбиция рассказать о заметных российских разработчиках софта. Сегодня история о продукте, который сможет заменить нам Zoom, Skype или Google Meet.

⚠️ Ноу коммерс. «Контур» не платил за эту статью, не заказывал её и не видел финальную редактуру. Автор статьи купил годовую подписку на продукт за свои деньги по базовому тарифу и лично всё протестировал. У нас в журнале бывают рекламные интеграции, и мы их всегда помечаем. Этот материал — некоммерческий. 

Что за продукт? Официально софт называется «Контур.Толк». Это веб-приложение и несколько программ для Windows, Linux и MacOS. Используется для командных видеозвонков внутри компании. Также можно использовать для репетиторства, лекций и мероприятий.

Кто делает? Разработчик — «Контур»: это экосистема из софта и сервисов для бизнеса. В продуктовом портфеле — программы для электронного документооборота, бухгалтерии, госзакупок, торговых предприятий, отелей и другого. Штаб-квартира в Екатеринбурге, офисы по всей стране. 

👉 Для этой статьи наш главред встретился с командой, используя сам этот продукт. После встречи сгенерировалась вот такая ссылка, можно прямо послушать весь разговор: talk.skbkontur.ru

О продукте

«Толк» — видеозвонилка, заточенная на командную работу. Сервис интегрируется с календарём и системой корпоративной авторизации: вы создаёте встречу у себя в рабочем календаре, дальше сервис сам приглашает людей, шлёт напоминания и пускает в комнату. Сейчас это работает через Exchange Web Services. 

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

Основной интерфейс реализован в браузере — то есть приложение работает на всём, у чего этот браузер есть, но не работает в Microsoft Edge (автор проверил). Для гурманов есть десктопные программы, но по сути это обёртки вокруг браузерного приложения. 

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

В остальном всё как обычно: камеры, микрофоны, чат, шеринг экрана, передача файлов и т. д. 

Angular, C# и WebRTC: как устроен российский софт для видеозвонков
Всё как обычно

Зачем начали делать (хотя уже были другие решения)

На дворе был 2018 год. В компании «Контур» было около 6 тысяч сотрудников, а стандартом для внутреннего общения был Skype for Business — это корпоративная версия Скайпа с бизнесовыми фишками. 

В те годы Microsoft взял курс на перевод корпоративных клиентов на Teams — это большая система управления командной работой, внутри которой в том числе была звонилка. Проблема в том, что лицензии на Teams стоили дороговато, и в «Контуре» решили сделать своё. 

Сделали базовый скелет приложения, написали привязки к внутренним сервисам «Контура» и системам single sign-on (когда человек по одному логину входит во все рабочие сервисы). Когда всё было готово, связали новый сервис с оборудованием в переговорных комнатах. Так появился костяк, которым пользовались внутри компании. 

Дальше решили превратить внутренний продукт во внешний и начали писать весь обвес:

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

И вот перед нами коммерческий продукт. 

Под капотом: WebRTC

«Толк» во многом стал возможен благодаря тому, что Google сделала доступным свой стандарт WebRTC. Нужно разобраться, что это. 

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

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

Angular, C# и WebRTC: как устроен российский софт для видеозвонков

До WebRTC разработчики звонилок должны были самостоятельно решить множество задач: 

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

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

В WebRTC нет графического интерфейса, кнопок и окна логина. Это в чистом виде технология для пуляния друг другу видео в реальном времени (и других данных). Зато она уже встроена в современные браузеры, поэтому работает почти во всех них. 

Чтобы из библиотеки WebRTC появилось приложение, нужно написать весь «обвес»: интерфейс, маршрутизацию звонков, логины-пароли, контроль камеры и прочее. Именно в реализации всех этих нюансов и лежит отличие «Толка» от Google Meet, например. Под капотом один и тот же WebRTC, а вот «кузова» другие. Последние версии Zoom тоже работают на WebRTC, хотя изначально у них был собственный стек технологий. 

Стек приложения и инфраструктура

Фронт. «Толк» — в первую очередь веб-приложение, то есть работает в браузере. Интерфейс приложения сделан на Angular — это современный интерфейсный фреймворк на базе HTML, CSS и JavaScript.

Звук. Для шумоподавления прикрутили библиотеку очистки звука от шума RNNoise — она работает на базе нейросетей прямо на клиенте. Это значит, что когда вы говорите через «Толк», ваш компьютер с помощью нейронок чистит голос от шумов. 

На бэкенде используется стек, тяготеющий к технологиям Microsoft: .Net, C# и ASP. Базы данных — MongoDB. Инфраструктура работает на Linux-серверах. В качестве хаба для маршрутизации соединений и видео используется Jitsi Videobridge — это открытый серверный софт, который помогает соединить абонентов с помощью WebRTC. 

Для создания приложений использовали Electron — это технология создания десктопных приложений на базе веб-приложений. По сути это браузер типа Chrome, у которого отпилили шапку, кнопки навигации и адресную строку, но добавили глубокую интеграцию с операционной системой, например поддержку «картинки в картинке» и доступ к файлам на диске. На «Электроне» были сделаны десктопные приложения Slack, Discord, WhatsApp, VSCode и некоторые версии Skype.  

Инфраструктура «Толка» — общая с инфраструктурой других продуктов «Контура». Это три дата-центра в России. Команда «Контура» общается между собой через собственные серверы на Урале, а остальные пользователи пользуются публичной частью инфраструктуры, которая физически расположена в Москве. 

Политические вопросы

«Толк» входит в реестр российского ПО, то есть его можно использовать в государственных учреждениях. Нам как пользователям от этого ничего, но для госзакупок это важно.

«Контур» работает в России и подчиняется российским законам, поэтому на него распространяются только внутренние риски. Российские пользователи могут оплачивать «Толк» рублями. 

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

Неприятный момент в том, что разработчики пишут бэкенд на C#, а самая популярная среда разработки для этого языка (Visual Studio) принадлежит Microsoft. 

Так что в целом «Толк» импортозамещает зарубежные звонилки. Будет интернет — будем звонить. 

Работа

На момент написания статьи команда «Толка» практически укомплектована. Сейчас туда ищут для усиления мидл-фронтендера на Angular, который будет заниматься «Толком» и «Стаффом» — корпоративной социальной сетью.

Фронт в этих сервисах полностью написан на TypeScript, в проектах нет жёсткого легаси, и они работают на актуальном стеке. Есть интересные задачи — например, в «Толке» есть нейросеть (та, которая давит шум и меняет фон), она работает на фронте. 

Чтобы откликнуться, напишите from_n@kontur.ru 

Все вакансии «Контура» — на https://kontur.ru/career

Текст:

Максим Ильяхов

Корректор:

Ира Михеева

Художник:

Алексей Сухов

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Начать бесплатно
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy