Пишем свой аналог Zoom

В настоящей статье мы реализуем систему видеосвязи на основе технологии WebRTC. Для реализации бэкенда мы будем использовать Go, а для фронтенда Vue 3.

Что такое WebRTC?

Эта технология, которая позволяет передавать потоковые данные (аудио и видео как раз относится к таким) между браузерами клиентов напрямую, без посредников, по технологии точка-точка (peer-to-peer).

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

Как работает WebRTC

Проблемы WebRTC

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

Вспомогательные данные

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

Как работает WebRTC - передача вспомогательных данных

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

Ограничения NAT

Из-за повсеместного применения технологии NAT, браузерам, зачастую, невозможно напрямую соединиться. Тогда в дело вступают STUN и TURN.

STUN - это протокол, который позволяет определить параметры NAT, которые могут помочь установить соединение без посредников.

TURN - это протокол, который позволяет передавать потоки через посредников - TURN-серверов, обходя ограничения NAT.

Как работает WebRTC - обход ограничений NAT

В настоящей статьей мы не будем касаться обхода ограничений NAT. Предполагается, что все клиенты находятся в одной локальной сети.

Реализация бэкенда

Исходный код с подробными комментариями.

Реализация фронтенда

Исходный код с подробными коментариями.

Демонстрация

Как работает web-сервис

Кроме сервиса mooz, я реализовал движок анонимных видео-голосовых комнат на https://soyle.tatar, в котором, в том числе, реализован обход ограничений NAT.

Исходный код

Полный исходный код web-приложения доступен на https://github.com/dimuls/mooz.