Гусиная фабрика Youwen | пройти через аудио и видео апплета и WEBRTC

Приветствую всех вОблако Tencent + сообщество, получить больше крупной технической практики Tencent по галантерее~

Автор: Чанг Цин, технический директор Tencent Video Cloud Terminal, присоединился к Tencent после окончания учебы в 2008 г. и занимался клиентскими исследованиями и разработками. отвечает за аудио и видео в Tencent Video Cloud Team Оптимизация и внедрение терминальных решений помогают клиентам получать первоклассные аудио и видео решения в отрасли с контролируемыми затратами на исследования и разработки.В настоящее время наши линейки продуктов включают: интерактивную прямую трансляцию, по требованию , короткое видео, видеовызов в реальном времени, обработка изображений, искусственный интеллект и многое другое.

Ввести отдельно

Что такое мини-программа аудио и видео?

В 2017 году команда Tencent Video Cloud объединилась с командой WeChat, чтобы интегрировать Video Cloud SDK с апплетом WeChat и открыть внутренние функции в виде тегов и . С помощью этих двух тегов разработчики могут реализовывать прямые онлайн-трансляции, мониторинг с малой задержкой, видеозвонки для двух человек и видеоконференции для нескольких человек.

Так что же такое WebRTC?

WebRTC (Интернет-связь в реальном времени) — это технология, которая поддерживает веб-браузеры для голосовых или видеоразговоров в реальном времени. Это технология, полученная в результате приобретения компанией Google компании GIPS. В браузере Chrome нет необходимости устанавливать подключаемые модули. Напишите программы аудио- и видеозвонков в реальном времени.

Какая разница между двумя?

Если вы такой же прагматик, как и я, то просто выскажу свой вывод с прагматической точки зрения: апплет взял мобильный телефон, а WebRTC взял ПК.

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

• Принцип реализации: аудио и видео в мини-программе реализуются путем встраивания liteavsdk от Tencent Video Cloud в WeChat, а затем с помощью тегов и для предоставления возможностей аудио и видео внутри SDK. Поэтому метка апплета играет роль API разработчика, а внутренний SDK фактически используется для реализации аудио- и видеофункций.

WebRTC был приобретен Google в результате приобретения GIPS (здесь я должен упомянуть, что первой командой, в которой я работал, когда присоединился к Tencent, была команда QQ. В то время аудио- и видеопродукты QQ все еще покупались у GIPS, но из-за различных ненадежных , позже перешел на маршрут самообучения). Так что его технология полностью сохранена и добавлена ​​в ядро ​​браузера Google Chrome. А недавно Apple также начала поддерживать возможности, связанные с WebRTC, в браузере Safari.

• Низкоуровневый протокол Основными протоколами для аудио и видео мини-программ являются наиболее часто используемый протокол потоковой передачи RTMP в области прямых трансляций и протокол воспроизведения HTTP-FLV.

Нижний уровень WebRTC использует два протокола передачи данных, RTP и RTCP.RTP в основном используется для передачи аудио- и видеоданных, а RTCP обычно используется для управления.

• Фрагментация мобильного терминала Поскольку аудио и видео Мини-программ реализованы WeChat единообразно, и каждая версия команды WeChat пытается максимально согласовать функции, в противном случае было бы лучше этого не делать, поэтому проблема фрагментации в основном решает проблему фрагментации. не существует.

WebRTC здесь гораздо более смущает.С одной стороны,фрагментация самой системы Android делает специфическую производительность WebRTC похожей на сцену "цветения ста цветов".Встроенные веб-страницы) не поддерживает WebRTC - тоже очень хлопотная проблема .

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

Напротив, WebRTC — это не проблема команды или компании, потому что теперь он пошел по стандартному пути, поэтому каждая новая функция должна сначала определить стандарт, а затем подталкивать производителей браузеров (включая Apple) следовать им. Здесь больше историй и больше времени.

• Настольный браузер Я думаю, вы обнаружили, что при анализе предыдущих выпусков моя точка зрения склоняется в сторону аудио и видео апплета. Действительно, в нынешней отечественной мобильной сфере ни Google, ни Apple не имеют решающего слова, и последнее слово действительно принадлежит WeChat.

Однако в части настольных браузеров текущая позиция Chrome на рынке браузеров для ПК определяет, что WebRTC имеет большое преимущество: разработчики могут реализовать нужные им функции без установки плагинов.

Напротив, поскольку встроенной поддержки Chrome нет, если мы хотим подключить аудио и видео апплета на ПК, нам нужно установить плагин для браузера или вызвать локальное приложение exe через псевдопротокол, такой как wxlite://start (аналогично открытию окна чата QQ на веб-странице).

Не игра с нулевой суммой

Аудио и видео мини-программы и поддержка WebRTC не являются нулевой суммой, обе стороны имеют свои преимущества и недостатки, поэтому в соответствии с идеей «если вы не можете победить их, присоединяйтесь к ним», команда Tencent Video Cloud вернулся на Весенний фестиваль в 2018 году. Начал работу, связанную с взаимосвязью аудио и видео мини-программы и WebRTC.

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

// to-do

Конечно, если вы хотите узнать, как реализована эта функция, вы можете продолжить чтение:

Полностью понимать WebRTC

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

Точно так же, если мы хотим хорошо связать аудио и видео апплета с WebRTC, мы должны знать больше о WebRTC, Здесь я расскажу о своем понимании характера «человека» WebRTC.

Прежде всего, хотя она и не очень красива, она очень значима.

Сказать, что WebRTC выглядит не очень хорошо, для меня просто метафора. Я имею в виду, что стоимость обучения WebRTC не мала. Хотя Google сделал много простых для понимания PPT, чтобы научить вас, как начать, вам действительно нужно выучить ее полностью.Заходя, вам все же нужно успокоиться и потихоньку воспринимать ее как цель, которую вы осознаете, чтобы выучить. Но если вы впервые влюблены (то есть впервые соприкасаетесь с аудио и видео в реальном времени), вы обнаружите, что процесс изучения WebRTC сам по себе является процессом понимания технических деталей аудио и видео в реальном времени. видео.

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

Это также метафора, говорящая о том, что WebRTC любит приспосабливаться к людям.WebRTC поддерживает множество внутренних архитектур (таких как Mixer, Mesh, Router), и Google считает, что эти внутренние реализации относительно просты, поэтому нет ни открыть исходный код, связанный с серверной частью, и не предоставить унифицированное серверное решение. Эта идея открытого дизайна очень хороша, но побочным эффектом является высокая стоимость реализации. Когда запускается реальный проект, небольшие компании или разработчики легко блокируются этим техническим порогом. Особенно, если вы действительно хотите применить WebRTC к решению корпоративного уровня, сталкиваясь с жесткими требованиями к записи и архивированию, вам нужно потратить много времени на индивидуальную разработку.

разработка плана

После понимания этих характеристик WebRTC наш план взаимодействия относительно ясен:

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

Во-вторых, нет официальной реализации бэкэнда WebRTC, а это значит, что есть много возможностей для игры.Tencent Video Cloud может реализовать бэкэнд WebRTC и связать его с бэкендом RTMP, используемым аудио и видео апплета. Проще говоря, Tencent Video Cloud будет играть роль свахи (точнее, переводчика) между аудио и видео апплета и WebRTC.

Но любой, кто смотрел беседу национальных лидеров в «Новостной сети», знает, что такая трансляция повлияет на скорость общения. Аудио и видео апплета общается с WebRTC, а посередине вводится переводчик.Увеличивается ли задержка связи?

На самом деле нет, потому что стандарты кодирования видео аудио и видео Mini Program и WebRTC одинаковы в обычных сценариях приложений, оба из которых являются стандартами H.264, которые являются просто разными аудиоформатами. Это означает, что у переводчика очень мало работы, и обе стороны могут в основном согласиться с тем, что говорит другая, поэтому задержка не увеличится слишком сильно.

успешное рукопожатие

На следующем рисунке показано решение, принятое Tencent Video Cloud для взаимодействия между аудио и видео мини-программ и WebRTC:

(1) Во-первых, программа WeChat Mini передает аудио- и видеопотоки на RTMP-сервер Tencent Cloud через Tencent Video Cloud SDK.

(2) Во-вторых, RTMP-сервер Tencent Cloud сначала преобразует аудио- и видеоданные, а затем прозрачно передает их в фоновый аудио- и видеокластер Tencent Video Cloud в реальном времени.

(3) Опять же, фоновое аудио и видео в реальном времени снова передаст данные в модуль под названием WebRTC-Proxy, Здесь WebRTC-Proxy переводит аудио и видео данные из аудио и видео апплета в " язык», который понимает WebRTC.

(4) Наконец, в браузере Chrome на ПК вы можете общаться с WebRTC-Proxy через встроенный модуль WebRTC браузера, а затем просматривать видеоизображения в апплете.

(5) Вышеуказанные четыре процесса меняются местами, и могут быть реализованы двусторонние видеозвонки; в то время как Tencent Video Cloud используется в качестве центрального узла звездообразной структуры и нескольких терминалов (будь то небольшая программа или браузер Chrome). подключены, то может быть сформировано многопользовательское аудио- и видеорешение.

Логика открытой комнаты

Недостаточно просто выполнить рукопожатие между аудио- и видеоданными между апплетом и WebRTC, потому что за успешным аудио- и видеовызовом стоит не только передача аудио- и видеоданных с одного конца на другой конец. , но и статус Синхронизация и согласование состояния между членами.

Например, в видеовызове с участием нескольких человек задействован процесс вызова и соединения.Если один участник кладет трубку, остальные получают уведомление о прекращении связи. В то же время, если новый участник присоединяется, другие также будут уведомлены соответствующим образом. В WebRTC есть много компонентов, таких как RTCPeerConnection, который обрабатывает все виды логики. Однако в интерфейсе WebRTC введено много новых терминов, и есть еще определенный порог для начала работы новичков, поэтому для упрощения логики здесь мы вводим понятие под названием «комната».

Так называемая Комната — это то, что одновременно окружает стороны, участвующие в видеозвонке. Например, при вызове двух человек два человека A и B могут считаться находящимися в одной комнате. В качестве другого примера, при вызове с участием нескольких человек пять участников (A B C D E) также могут считаться находящимися в комнате.

С понятием комнаты мы можем описать состояние совместной работы уже сейчас двумя простыми действиями: если человек присоединяется к видеозвонку, можно понять, что он вошел в комнату (EnterRoom); если есть тот, кто выходит из видеозвонок, то можно понять, что он вышел из комнаты (LeaveRoom). А на двери комнаты всегда написано: «Сколько человек в комнате в данный момент?»

С концепцией комнаты мы можем функционально согласовать два простых тега и апплета со сложным набором API WebRTC, нам даже не нужно изменять наш интерфейс, определенный в первое издание может достичь этой цели:

(1) Интерфейс URL-адреса больше не передает адрес push-потока протокола rtmp://, а передает адрес push-потока протокола room://. Информацию об использовании протокола room:// см. в нашем документе с основной версией.DOC.

(2) После успешного запуска тега это эквивалентно успешному входу в комнату, после чего вы можете получать информацию об этих людях в комнате через событие onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020). Во время видеовызова вход и выход каждого участника в комнате также будет уведомлен об этом коде вашего апплета через это событие.

(3) Каждый элемент в ROOM_USERLIST состоит из двух кортежей (если это видеовызов 1 на 1, в ROOM_USERLIST будет только один человек): идентификатор пользователя и playurl. userid представляет, какой это пользователь, а playurl — это адрес воспроизведения удаленного экрана пользователя. Все, что вам нужно сделать, это использовать тег для воспроизведения изображения и звука этих удаленных экранов.

(4) Что касается WebRTC, вы можете обратиться к нашемуwebrtcAPI, этот набор API больше подходит для начинающих, чем собственный API WebRTC.

Как быстро получить доступ?

Если вы хотите за сутки пройти взаимосвязь между webrtc и апплетом аудио и видео, то рекомендую не начинать с нуля, ибо слишком много времени уйдет на то, чтобы наступать на ямы и багфиксы, рекомендую использовать наши упакованные пакеты напрямую<webrtc-room>, это решение может не только помочь вам выполнить быстрый доступ, но и удовлетворить определенные требования к настройке.

Кроме того, не забудьте испытать эффект взаимодействия WebRTC в официальной демонстрации Tencent Cloud в WeChat => Discover => Mini Program => Tencent Cloud Video Cloud.