{"id":9185,"title":"\u0427\u0435\u0440\u043d\u0438\u043b\u0430 \u0438\u0437 \u0432\u044b\u0445\u043b\u043e\u043f\u043d\u044b\u0445 \u0433\u0430\u0437\u043e\u0432: \u043c\u0438\u0444 \u0438\u043b\u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c?","url":"\/redirect?component=advertising&id=9185&url=https:\/\/vc.ru\/promo\/316632-odezhda-kotoraya-rastet-vmeste-s-rebenkom-biotoplivo-i-bizhuteriya-iz-chaynogo-griba&placeBit=1&hash=a88533bf78285d41072084482619c82803fd6598d1bcc2e142642ff721574ad7","isPaidAndBannersEnabled":false}
Сервисы
Skyeng

Как устроена видеосвязь на уроках в Skyeng

По материалам доклада Кирилла Рогового на FrontendConf 2019

Учить английский в Skyeng можно где и когда угодно — нужны только интернет и видеосвязь. Чтобы и ученикам, и учителям было удобно заниматься, она должна быть быстрой даже в 3G-сетях, надежной при нестабильном соединении, доступной из браузера.

Для этого два года назад Skyeng отказался от внешнего сервиса видеосвязи в пользу интеграции WebRTC + Janus в собственную платформу Vimbox — и рассказал об этом в блоге на «Хабре». Сегодня мы расскажем, как мы снижаем потери данных при видеосвязи, чтобы во время занятия видео или звук как можно реже прерывались или зависали.

Британский акцент с доставкой по оптоволокну

Все начинается с того, что через API браузера мы запрашиваем у ученика или учителя доступ к камере и микрофону: если вы когда-нибудь были хотя бы на первом уроке, методист показывал вам, как это сделать.

Слайд из презентации Кирилла Рогового WebRTC под капотом

Затем мы захватываем два медиапотока — аудио и видео — и кодируем их, чтобы сделать файлы легче. Одна секунда ролика формата 640х480 — это 30 полноцветных картинок: вместе они весят 288 Мбит/с, а пропускная способность большинства домашних сетей — 100 Мбит/с. Мы используем кодек, который выделяет из этих 30 картинок только ключевые кадры, где картинка резко меняется. А для остальных картинок запоминает и передает разницу между ними.

Закодированные медиапотоки делятся на пакеты данных и «упаковываются» в протокол верхнего уровня RTP (Real-time Protocol): он запоминает порядковые номера пакетов данных, хранит данные о тайминге, которые нужны для синхронизации картинки и звука.

Слайд из презентации Кирилла Рогового WebRTC под капотом

В нашем WebRTC подключено расширение RTCP (RTP Control Protocol). Оно помогает обмениваться информацией о статистике потерь и получения пакетов данных.

Теперь самое интересное: мы должны передать пакеты данных от одного компьютера (точнее, его IP-адреса) к другому по UDP-протоколу. Это протокол, который в отличие от TCP, не гарантирует доставку пакетов. Если сравнить протоколы TCP и UDP с обычными курьерами, первый позвонит в дверь, попросит предъявить паспорт, заполнить бланк получения и расписаться, а второй просто поставит пакеты у двери и уйдет. Заберете ли вы пакеты, похитят ли их соседи — уже не его забота. Второй курьер не ждет, пока получатель откроет дверь и распишется в бланке, поэтому работает значительно быстрее.

Вернемся к UDP-протоколу. Данные по нему передаются быстро: это очень важно, когда преподаватель из Кардиффа тренирует британский акцент с учеником из Нижнего Новгорода, чтобы ни звук, ни видео не зависали. Незначительные потери в данных не страшны: скажем, если ученик не получит 10 из 1800 картинок за минуту видео, то скорее всего, даже не заметит этого. Наша главная задача — избежать крупных потерь пакетов при такой доставке.

Когда пакеты получены, происходит все то же самое, но в обратном порядке — протокол RTCP проверяет, все ли пакеты в наличии, медиапотоки извлекаются из RTP, декодируются и подаются на платформу. Весь обмен данными происходит за считанные доли секунд, пока преподаватель поправляет произношение артикля the.

Так бы все работало в идеальном мире. А как получается в реальности?

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


Четыре решения одной проблемы

Как сделать так, чтобы секунды и минуты видео не терялись передаче данных по UDP? Самое популярное решение — джиттер буфер (jitter buffer), трансляция видео с почти незаметной задержкой. К примеру, прямой путь между IP-адресами ученика и учителя занимает 30 мс (миллисекунд).

Добавим к этому времени еще 60 мс: за это время мы проверим, все ли пакеты получены, а если нет, то повторно запросим их. А пока отрисуем кадр с теми пакетами данных, которые у нас есть. Пользователь увидит картинку через 90 мс: это комфортный уровень задержки, который мы даже не замечаем.

Еще один способ снизить потери — временно снизить качество изображения, уменьшить битрейт. Такой способ применяется, когда сеть перегружена: чтобы отправлять пакеты поменьше, используют более сильное сжатие изображения через кодеки. Вероятно, вы сталкивались с тем, что когда скорость вашего домашнего интернета снижается, то ролики на YouTube воспроизводятся не в HD-качестве, а в 240p или 360p.

В Skyeng мы поставили лимит на видеотрафик в 286 кб/с при максимальном разрешении 640х480. Этого вполне хватает, чтобы передавать картинку в высоком качестве, но при этом мы не даем WebRTC произвольно перегружать сети и снижать битрейт, чтобы пользователи не сталкивались с внезапным ухудшением качества видео.

Третий способ — дублировать часть данных при отправке, чтобы в случае потери данных восстановить их. Эта технология называется Forward error correction.

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

Во-первых, мы заворачиваем весь видеотрафик через собственные сервера в Москве и Санкт-Петербурге.

Во-вторых, внимательно настраиваем сервера и маршрутизаторы. К примеру, в Linux для UDP-пакетов есть свои буферы, и эти буферы по настроены на пропускную способность 100 mbps. Если сервер начнет пропускать сквозь себя 200, 300, 400 mbps, пакеты начнут теряться прямо на сервере из-за того, что буфер слишком быстро заполняется.

Теперь, когда вы соберетесь на встрече в Zoom или Hangouts, будете лучше понимать, откуда берутся периодические задержки звука или видео — и какую работу проделывают наши программисты, чтобы ученики сталкивались с ними как можно реже.

0
11 комментариев
Популярные
По порядку
Написать комментарий...

Спасибо за статью. Было интересно почитать.

1

а у вас точка-точка всё? На сервере не пишете? 

0

Дмитрий, у нас свои сервера в разных дата-центрах. Так мы можем выбрать лучшие сетевые маршруты: для всех пользователей Skyeng собираем пинги до всех видеосерверов, и когда приходит время для занятия определенной пары ученик-учитель, мы можем выбрать оптимальный сервер по принципу “где самая меньшая сумма пингов”. 

0

Подкинулся на рекламу Skyeng бесплатное занятие и записался... но возникли проблемы... так и не смог первый урок провести). Хотя рекомендации по изучению англ.яз приходят исправно.

0

Извините, вам, кажется, стабильно не везет в этом месяце - это про историю с доменом) Надеемся, там все разрулится, конечно.  

Если серьезно, закинем ребятам, которые занимаются отловом проблем на пути пользователя. Не против, если они вам напишут?

0

Да... В этом месяце беда) то домен... то изучение не срослось... Но о Вас начинаю вспоминать когда находясь за бугром начинаешь голову ломать... как построить предложение... и как договориться о делах насущных. За предложенную помощь спасибо, но регистратор решил вопрос и сам разобрался. Так что все ок))) Спасибо.

0

отслеживаете ли Вы видео и аудио качество пройденных уроков? и если да, то каким способом?

0

Роман, да, т.к. видео на нашей стороне, нам за него отвечать) Одна из первых метрик, которую стали отслеживать - это разница между плановой и реальной нагрузкой: по расписанию мы понимаем, сколько уроков проходит в какой час, и какой трафик должен проходить через нас - если меньше (а так бывало), то где-то что-то не так. Постепенно обвешиваем новыми метриками: следим, чтобы частота кадров в секунду не опускалась ниже определенного уровня, рассинхрон видео и аудио, если случается, не выходил за комфортный для восприятия порог, и тд.

Кстати, продакт, а в прошлом один из разработчиков команды видео будет 23 мая выступать на митапе https://intercomconf.com/online/ - там же будут другие хорошие ребята с экспертизой, мб вам будет интересно пообщаться.

0

Кто в итоге нашёл профиль девушки из рекламы в инстаграме? :)

0

Как познакомиться с дамочкой с превью?

0

Нормальная статья, но сервис ваш все равно унылый

–1
Читать все 11 комментариев
Медитация — это Prosto: история самого прибыльного сервиса для заботы о ментальном здоровье
Главная страница приложения Prosto: Медитации и Сон
Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

«Хочу супер-пупер мега продукт, начинайте штормить». Разбираемся, как гроуз-хакинг помогает бизнесу расти

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

История о том, как я привез в Россию самые продвинутые детские клюшки для хоккея. И чем они такие продвинутые

Привет! Меня зовут Александр Тягалов, очень рад нашему «заочному» знакомству. Расскажу вам о создании особенного бизнеса. Три года назад мы с Владимиром Тронько привезли в Россию и продаем (с каждым годом все успешнее) детские клюшки финской марки VIKKELA. У этих клюшек нет аналогов на Российском и Европейском хоккейном рынке, так что, с одной…

Штраф 10 тысяч рублей за утерю терминала, который банк забрал сам

Здравствуйте! Пишу про СберБизнес.

Это Элви Рэй Смит: он мечтал создать анимационный фильм на компьютере, соосновал Pixar, но ушёл из компании из-за Джобса Статьи редакции

Смит создал альфа-канал, который используется в Photoshop и других редакторах, работал в Xerox и LucasFilm и убеждал всех, что за компьютерной графикой будущее, однако всерьез его никто не воспринимал – кроме Стива Джобса.

Kornia - Python библиотека для обработки изображений в задачах CV

В этой статье я хотел бы познакомить читателей с библиотекой для ЯП python — Kornia, имеющей богатый функционал в области computer vision. Библиотека написана с использованием pytorch, в ее основе лежат готовые решения, такие как torchvision, PIL, skimage, tf.image, OpenCV. В Kornia реализована возможность выполнения вычислений не только с…

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

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

Фондовый рынок должен не только финансировать инвестиционные проекты, но и приносить доход гражданам, считает президент.

На сайтах с эквайрингом от ПСБ появился Yandex Pay

Покупатели с аккаунтом «Яндекса» смогут оплачивать покупки, не вводя данные карты.

Минэкономразвития РФ приняло предложения РСПП по совершенствованию рынка интеллектуальной собственности

На актуализации плана дорожной карты ТДК (трансформация делового климата) «Интеллектуальная собственность» в соответствии с пожеланиями бизнес-сообщества настоял первый заместитель председателя правительства Андрей Белоусов.

null