VK Звонки:
выходя за лимиты браузера

@bmsdave

Вадим Горбачев

команда VK calls

Статистика

звонков в день

400к

групповых звонков

13 лет

в день

Цели

  • Предоставить пользователям возможность звонить
  • Технически сильное решение в вебе
  • Групповые звонки
  • P.S. сохранить скролл

Оглавление

  • Теория
  • Архитектура
  • UX
  • Оптимизации на большое число участников

Введение

  • WebRTC
  • Топологии
  • Видео
  • Функциональность

WebRTC

  • захват видео/аудио
  • установка соединения
  • передача данных
Signalingdatachannel / video / audio

WebRTC


/*** HTML */



/*** JS */
const video = document.getElementById('video');
const button = document.getElementById('button');

function init() {
  navigator.mediaDevices
    .getUserMedia({audio: false, video: true})
    .then((stream) => { video.srcObject = stream; })
    .catch(console.error);
}

button.addEventListener('click', init);
								

Топологии
MESH

Топологии
SFU

Топологии
MCU

Видео

keyframedifftime

Видео

keyframedifftime

Видео

keyframedifftime

Функциональность. Общение

HUSuserAudioVideoScreen sharing

Функциональность. Общение

HUSuserAudioVideoScreen sharing

Функциональность. Общение

HUSuserAudioVideoScreen sharingWeb ApplicationGoogle

Функциональность
Нотификация

Входящий

DeclineAcceept

Исходящий

Call

Звонок по ссылке

https://vk.com/join/call/...

Функциональность
Удобство

Grid

Режим оратора

HUSuser

Свернутый звонок