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

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
Делаем игру Wordle на JavaScript
Делаем игру Wordle на JavaScript

Прокачиваем свой английский

medium
Чем занимаются бэкенд-разработчики
Чем занимаются бэкенд-разработчики

Никто не видит, но все пользуются.

easy
Карьера аналитика данных в 26 лет: Касперский, X5 и «Много лосося»
Карьера аналитика данных в 26 лет: Касперский, X5 и «Много лосося»

Поговорили с Антоном Леоновым, выпускником ВШЭ и ментором «Практикума».

easy
Что такое прошивка
Что такое прошивка

Заглядываем внутрь простой электроники

easy
Лучшие одноплатные мини-компьютеры для работы и кодинга
Лучшие одноплатные мини-компьютеры для работы и кодинга

Системники размером с пачку чая

easy
5 гаджетов c Алиэкспресса для хранения и защиты данных
5 гаджетов c Алиэкспресса для хранения и защиты данных

Чтобы можно было везде взять с собой

easy
Как задавать размеры шрифта в вёрстке
Как задавать размеры шрифта в вёрстке

Всё просто, но есть нюанс.

easy
Убери руку с мышки!
Убери руку с мышки!

Как работать в три — пять раз быстрее с помощью горячих клавиш.

easy
Вакансия на 210 тысяч: что такое .NET и зачем он нужен

Для тех, кто любит программировать и точка

easy
easy