Руководство для начинающих по мультимедийным интерфейсным технологиям

Архитектура внешний интерфейс Разработка аудио и видео

С быстрым ростом платформ живого видео, таких как Station B, Douyin, Kuaishou, Taobao Live и т. д., фронт-энд получил направление мультимедийных технологий, и в традиционной команде фронт-энда каждого из них появилась новая армия. компания: команда веб-мультимедиа. Глядя на название команды, это должна быть группа с редкими навыками в области интерфейса x мультимедиа. В Alibaba также есть много команд веб-мультимедиа.Внутренне мы составили руководство по внедрению передовых мультимедийных технологий для новичков.Сегодня это руководство также распространяется извне, чтобы каждый мог знать, в каком направлении мы движемся в этой области в последнее время. Каковы практики и реализация работы, эта статья даст вам представление о следующих аспектах:

  1. Что такое мультимедийный интерфейс?

  2. Стандартная мультимедийная технология W3C

  3. Игровые сценарии и решения

  4. Ориентированность на потребление: бизнес-система в прямом эфире

  5. Ориентирован на производство: инструменты для прямой трансляции, редактирования видео и т. д.

  6. Разработка и планирование мультимедийного направления Alibaba Front-end Committee

Что такое мультимедийный интерфейс?

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

Стандартная мультимедийная технология W3C

Когда я впервые столкнулся с разработкой мультимедийного интерфейса, общий сценарий был относительно простым, например воспроизведение видео/аудио на веб-странице и реализация основных элементов управления воспроизведением (воспроизведение, пауза, индикатор выполнения, громкость, отключение звука и т. д.). ). До стандарта HTML5, если вы хотите воспроизводить видеоконтент в браузере, вам нужно использовать плагины, такие как Adobe Flash или Microsoft Silverlight, но плагины имеют такие проблемы, как неудобство и небезопасность, которые необходимо установить пользователям, поэтому стандарт W3C HTML5 определяет серию новых медиа-элементов, чтобы избежать использования плагинов. Следующие элементы HTML обычно используются разработчиками медиа:

HTML-элемент

  • <video>Тег используется для воспроизведения видео или прямой трансляции, и к нему можно получить доступ через объект JS HTMLVideoElement, который можно комбинировать с API мультимедиа и другими технологиями DOM для создания более богатых мультимедийных приложений.

  • <audio>Тег используется для воспроизведения аудио, и доступ к нему можно получить через объект JS HTMLAudioElement.

  • <source>этикетка на<audio>или<video>Внутри, чтобы указать источник мультимедиа для воспроизведения, вы можете добавить несколько источников мультимедиа с разными форматами, размерами и разрешениями, доступ к которым можно получить через объект JS HTMLSourceElement.

  • <track>этикетка на<audio>или<video>Внутренне субтитры или дорожки заголовков в формате WebVTT предоставляются во время воспроизведения мультимедиа. Доступ к ним можно получить через объект JS HTMLTrackElement.

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

Медиа API

  • API расширения источника мультимедиа

    MSE (расширение источника мультимедиа) расширяет функцию воспроизведения мультимедиа в браузере, позволяя динамически создавать объект MediaSource медиапотока с помощью JS, а затем передавать его в<video>а также<audio>вкладки для более точного управления воспроизведением. Вы также можете использовать JS для инкапсуляции некоторых неподдерживаемых форматов видеопотока в поддерживаемые форматы. Flv.js с открытым исходным кодом станции B является типичной реализацией этой технологии. Используя технологию MSE, источник FLV инкапсулируется в поддерживаемое HTML5 видео в режиме реального времени с помощью Формат JS. Более подробная информация содержится в следующем разделе «Игровые сценарии и решения».

  • API веб-аудио

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

  • API для захвата и потоковой передачи мультимедиа

    API Media Stream позволяет разработчикам использовать локальную камеру и микрофон для захвата и записи аудио и видео, захвата экрана компьютера или чтения локального видео для синтеза. Он часто используется для веб-камер, фотографирования, записи экранов, видеозвонков. , и т. д. В следующей главе по редактированию видео 1688 также использует эту технологию для создания веб-видеоклипов. MediaStream — это средний уровень, который соединяет API WebRTC и лежащий в его основе физический поток.После того как WebRTC обрабатывает аудио и видео с помощью движка Vocie/Video, они затем передаются на верхний уровень через API MediaStream.

  • WebRTC

    WebRTC — это набор W3C Javascript API, который поддерживает аудио- и видеоразговоры в реальном времени в браузерах, включая сбор аудио- и видеофайлов, кодирование и декодирование, передачу по сети, отображение и другие функции, позволяющие любым двум пользователям в Интернете достичь реального время без сервера.передача аудио, видео и произвольных данных. Примерно в 2010 году общение в режиме реального времени можно было осуществлять только с помощью проприетарного программного обеспечения, плагинов или Adobe Flash; в 2013 году был совершен первый кросс-браузерный видеозвонок между Chrome и Firefox, что позволило осуществлять аудио- и видеозвонки без плагинов между браузеры. Использование WebRTC в настоящее время очень разнообразно, и использование WebRTC можно увидеть в таких сценариях, как аудио- и видеосвязь, потоковая передача в реальном времени, облачное редактирование и облачные игры.

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

Технологии, используемые с Media API

  • Canvas API

    API холста позволяет<canvas>Рисуйте, манипулируйте и изменяйте содержимое изображения. Это можно использовать с носителями различными способами, включая настройку<canvas>Элемент действует как узел воспроизведения видео или захвата камеры для захвата видеокадров или управления ими.

  • WebGL

    WebGL предоставляет API-интерфейс, совместимый с OpenGL ES, поверх существующего API-интерфейса Canvas, что позволяет создавать мощную трехмерную графику в Интернете. Холст для добавления 3D-изображений к медиаконтенту.

  • WebVR

    Web Virtual Reality API поддерживает устройства виртуальной реальности (VR), позволяя разработчикам преобразовывать положение и движение пользователя в движение в трехмерной сцене, которая затем отображается на устройстве. Ожидается, что WebVR будет постепенно заменен WebXR, который охватывает более широкий спектр вариантов использования.

  • WebXR

    WebXR, разработанная для того, чтобы в конечном итоге заменить WebVR, представляет собой технологию, которая позволяет создавать контент виртуальной реальности (VR) и дополненной реальности (AR). Содержимое смешанной реальности может отображаться на экране устройства, в очках или наушниках.

Игровые сценарии и решения

Как упоминалось ранее, в браузере<video>Воспроизведение видео может быть достигнуто, так что еще нам нужно сделать во внешнем интерфейсе? фактически<video>Ограничений тоже много, начинать надо с формата инкапсуляции и формата кодирования медиаконтента.

Исходные файлы медиаконтента относительно велики. Чтобы облегчить передачу и хранение, исходный видеофайл необходимо закодировать для сжатия размера файла, а затем сжатое видео, аудио и субтитры объединяются в контейнер посредством упаковки контейнера. являетсякодированиеа такжеконтейнерная упаковкапроцесс (можно использоватьпрессованное печеньеа такжеЗапечатанная упаковкачтобы понять, что будет много разных процессов сжатия и спецификаций упаковки).

Затем при воспроизведении на стороне воспроизведения необходимо выполнить соответствующиеДекапсуляцияа такжерасшифровка(Сначала распакуйте печенье и выньте печенье. Вы можете съесть печенье сразу, растолочь его или замочить в молоке.) встроенный в браузер плеер<video>Тег имеет функции декапсуляции и декодирования, но формат медиаконтента ограничен (браузер распаковывает только определенный способ упаковки и переваривает только определенный способ употребления файлов cookie). Когда браузер обнаруживает «файлы cookie, которые не открываются и не обрабатываются», как мы их загружаем?<video>Шерстяная ткань?

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

Многопротокольный, многоконтейнерный формат

С развитием бизнеса потокового мультимедиа появилось много новых протоколов передачи, а медиаконтент дополнительно включается в уровень протокола передачи (взяв в качестве примера протокол HLS, добавляется индексный файл m3u8, а содержимое исходного файл фрагментирован и инкапсулирован в отдельный формат контейнера TS), так что<video>не может быть идентифицирован. Для поддержки воспроизведения многопротокольных и многоконтейнерных форматов разработчики могут использовать MSE, чтобы помочь браузерам идентифицировать и обрабатывать мультимедийный контент.Переупаковкав узнаваемый контейнерный формат (например, MP4), чтобы<video>Вы можете идентифицировать и воспроизводить различное мультимедийное содержимое.

Flv.js станции B и hls.js упомянутого выше сообщества — это все библиотеки проигрывателей, которые используют MSE для решения многопротокольных и многоконтейнерных форматов.

1. flv.js

flv.js — это проигрыватель файлов формата HTML5 с открытым исходным кодом на веб-сайте Bilibili, основанный на протоколе потоковой передачи мультимедиа HTTP-FLV и реализующий инкапсуляцию FLV с помощью чистого JS, так что файлы формата flv можно воспроизводить в Интернете.

Однако не все видео в формате flv можно воспроизводить в flv.js, и существуют определенные требования к среде браузера. Ниже приведены ограничения использования flv.js:

  • Видео должно быть закодировано в формате AVC (H.264), аудио должно быть закодировано в формате AAC или MP3.

  • Среда браузера должна поддерживать MSE, см. список поддержки:rub network.com/#feat=media...Система 13 выше, мобильный терминал ios полностью не работает, требуется система Android 4.4 выше

  • Браузер должен поддерживать видео, fetch api, xhr и websocket поддерживать один из них.

2. hls.js

hls.js — это библиотека воспроизведения js, разработанная на основе протокола Http Live Stream и использующая расширение Media Source для реализации воспроизведения HLS в Интернете.

Поскольку протокол HLS был предложен Apple и широко поддерживается на мобильных устройствах, его можно широко использовать в сценариях прямых трансляций. На стороне ПК hls.js требуется только поддержка MSE для применения, а мобильная сторона может использовать собственный тег видео, чтобы установить src для завершения воспроизведения. hls.js сначала запросит файл m3u8, а затем прочитает список фрагментов файла, а также формат кодирования и продолжительность видео. Затем выполняются запросы к фрагментам TS по порядку, а затем содержимое двоичного буфера объединяется с помощью MSE для формирования воспроизводимого файла медиаресурсов.

В Alibaba также есть несколько команд, у которых есть похожие продукты для проигрывателей, такие как Aliplayer от Alibaba Cloud, VideoX от Taobao и KPlayer от Youku, Идеи реализации в основном одинаковы.

3. Алибаба Облако Алиплеер

После нескольких версий итеративной эволюции Alilayer имеет более разумную архитектуру, предоставляя себе и пользователям больше возможностей расширения, а также возможность независимого увеличения типов и функций воспроизведения.Например, если h5 поддерживает возможности воспроизведения flv, ему нужно только добавить Flv Расширение функции.Расширяйте модули без изменения кода других модулей, таких как HLS Extend и т. д., чтобы гарантировать, что нормальная работа других функций не будет затронута, и для поддержания стабильности каждого выпуска версии.

4. Сямэнь ВидеоX

Базовый уровень воспроизведения Videox также претерпел несколько изменений, начиная с простого<video>теги для расширения различных форматов через MSE<video>теги, чтобы расширить формат кодека через WebAssembly<canvas>+ Путь API веб-аудио, в будущем может быть расширение базовой связи и расширение возможностей взаимодействия верхнего уровня.

5. Юку Кплеер

Текущее решение KPlayer разделено на несколько частей, включая несколько библиотек и компонентов, в основном включая библиотеку перепаковки KMux, подключаемый модуль KDRM WebDRM, базовую абстракцию поведения управления проигрывателем KCTRL, базовую абстракцию декодирования, рендеринга и воспроизведения MediaEngine, встроенный пользовательский интерфейс KUI. Основной дизайн воспроизведения KPlayer выглядит следующим образом:

Несколько форматов кодирования

Предыдущий подраздел относится к браузеру<video>Неподдерживаемые протоколы и форматы (куки не распаковываются). Что делать, если я столкнулся с неподдерживаемыми форматами кодирования (неудобоваримый процесс сжатия)?

Новые стандарты кодирования видео H.265, AV1 и т. д. имеют более высокую степень сжатия, чем традиционный H.264, но браузер<video>Он не поддерживается сам по себе, и бизнес переключается на новые форматы кодирования, такие как H.265, во всей ссылке, чтобы снизить затраты, тогда мультимедийный интерфейс должен сам реализовать JS-плеер на стороне браузера. Поскольку Javascript является динамически интерпретируемым языком, его производительность намного хуже, чем у C++ и других языков, а его недостатки производительности отражаются на обработке мультимедийных данных.Появление WebAssembly устраняет недостатки производительности Javascript и значительно расширяет возможности обработки мультимедиа. возможности и производительность браузера.Сцены.

Для проигрывателя H.265 на веб-стороне несколько команд в Alibaba предприняли соответствующие попытки, включая Youku, Alibaba Cloud, Taoxie, ICBU и т. д. Идеи в основном одинаковы, и все они реализуют проигрыватель JS через FFmpeg + Webassembly. , использовать JS для извлечения потока, декапсуляции и компиляции возможностей декодирования 265 FFmpeg в модуль wasm для вызова JS.Видео декодируется FFmpeg для получения данных кадра YUV, а данные кадра изображения рисуются через WebGL, и аудио потому, что браузер поддерживает AAC, MP3 и т. д. Основной формат аудио, аудиоданные воспроизводятся непосредственно через API веб-аудио. Идеи оформления следующие:

Несколько контейнеров рендеринга

Сценарии, описанные выше, в основном относятся к веб-браузерам на ПК, но большинство наших бизнес-сценариев относятся к мобильной стороне, а сценарии, ориентированные на потребителя, предъявляют очень высокие требования к воспроизведению и производительности, поэтому проблема перекрестной поддержки для плееров введен, особенно контейнер кросс-рендеринга (Webview/Weex/applet). Конечный проигрыватель в основном использует собственный проигрыватель, а внешний интерфейс инкапсулирован в компоненты рендеринга Weex/того же слоя, которые запускаются в каждом контейнере рендеринга.

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

  • Родной игрок: Отвечает за основные возможности проигрывателя.После того, как ядро ​​проигрывателя извлекает адрес потока, оно декапсулирует (демультиплексор) и декодирует его (декодирует), а затем выводит его на уровень компонентов того же уровня Naitve верхнего уровня. предоставляет возможности вещания по запросу / в прямом эфире.

  • Собственные однослойные компоненты: инкапсулирует базовый экземпляр проигрывателя, в основном отвечающий за подключение уровня коммуникационного соединения и управление рендерингом.

  • Уровень коммуникационного соединения: Управление каналом рендеринга через windmix, затем привязка событий через windvane, передача свойств, мобилизация возможностей API и подключение к интерфейсному проигрывателю.

  • Ядро внешнего плеера: Выступать в качестве выходных данных внешнего проигрывателя, сводить события/API/атрибуты, предоставляемые нижним уровнем, в стандарт проигрывателя, сформулированный W3C, и нести ответственность за возможности проигрывателя, связанные со стабильностью.

  • Сервисный пакет плеера: Инкапсулировать протокол управления воспроизведением для ядра внешнего проигрывателя более низкого уровня и управлять возможностями воспроизведения каждого проигрывателя через центр событий; в то же время, с точки зрения бизнеса, контролировать производительность сети и оборудования. чтобы определить, является ли он пониженным

многоэкземплярный контроль

Вышеупомянутые сценарии — это все сценарии воспроизведения одного видео.В реальном бизнесе существуют сценарии нескольких проигрывателей на одной странице, такие как потоки списков, заголовки и т. д. В настоящее время проблема многоэкземплярного управления проигрывателями введено, и необходимо убедиться, что на странице есть только один игрок для воспроизведения (игра в сладкое место), управление памятью и т. д.

Плеер должен иметь мощные возможности управления воспроизведением, то есть возможности планирования воспроизведения:

  • Центр событий

  • Игрок внутри поддерживает очередь для воспроизведения, которая реализуется onAppear и onDisappear rax-view.Когда onAppear выполняется, очередь для воспроизведения сохраняет уникальный идентификатор соответствующего игрока в очереди.Когда соответствующий игрок выполняет onDisappear , очередь удаляется из очереди.

  • Формы воспроизведения в очереди в основном делятся на 3 типа: 1, непрерывное воспроизведение; 2, воспроизведение с указанным идентификатором; 3, воспроизведение сцены onAppear; все они контролируются событиями. Затем центр событий распределяет его между разными игроками, чтобы сообщить, с каким игроком можно играть, а с каким нельзя.

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

  • Планирование управления трансляцией

  • Использование памяти экземпляром проигрывателя составляет около 20-40 МБ.Для страницы H5, если использование памяти слишком велико, очень легко сделать использование памяти страницы слишком большим, что приведет к серьезным проблемам, таким как сбой. Таким образом, одновременно с воспроизведением, управляемым событиями, центр событий гарантирует, что воспроизводится только один экземпляр проигрывателя.

Ориентированность на потребление: бизнес-система в прямом эфире

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

Если взять в качестве примера прямую трансляцию, то к аудитории предъявляются два требования: смотреть прямую трансляцию и участвовать во взаимодействии. Общая схема прямого эфира выглядит следующим образом:

Обычная архитектура комнаты для прямых трансляций делится на три типа: комната для прямых трансляций в Интернете, комната для прямых трансляций в гибридном формате и комната для прямых трансляций для небольших программ. , и т. д. использовать комнату прямой трансляции апплета Архитектура, подавляющее большинство других предприятий используют архитектуру комнаты гибридной прямой трансляции.

Архитектура студии веб-трансляций

Комната прямой трансляции Pure Web относится к комнате прямой трансляции H5, в основном работающей в веб-браузере, в основном включая проигрыватель H5, канал событий, компоненты пользовательского интерфейса и т. Д. Однако совместимость мобильных браузеров плохая, а задержка воспроизведения мобильных терминалов относительно высока, поэтому архитектура гибридной комнаты для прямых трансляций обычно выбирается для бизнес-сценариев с высокими требованиями к опыту и производительности.

Hybrid Live Breadcast Room использует возможности для игрока, с лучшей совместимостью и более гладким опытом; в то же время канал события является родным каналом, который является более безопасным, чем Websocket в вещательной комнате.

Гибридная студийная архитектура

Хост гибридной живой комнаты — Native, который использует собственный проигрыватель.Интерактивный игровой процесс заключается в том, чтобы покрыть проигрыватель интерактивным слоем (веб-просмотр или контейнер WEEX), и он может взаимодействовать с проигрывателем.

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

Контейнер прямой трансляции имеет следующие характеристики:

  • Единая спецификация для протокола компонентных сообщений: включая имя пакета компонента, поведение компонента, настраиваемые бизнес-поля и т. д.

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

  • Кэш и дедупликация зависимостей: одно и то же взаимодействие, хост может отправлять несколько раз, а базовые библиотеки (rax-xxx, universal-xxx), от которых зависит каждое взаимодействие, также имеют много повторений, поэтому разработка разумного механизма кэширования и дедупликации зависимостей также очень важна для производительности. улучшение.

  • Компоненты высшего порядка HOC: развитие бизнеса в live-студии отличается от других независимых исходных страниц, таких как сбор данных в прямом эфире, мониторинг сообщений и событий, получение состояния экрана по горизонтали и вертикали, прыжки с небольшими окнами, продолжительность просмотра в реальном времени и т. д., все зависит от живая студия или клиентский API и бизнес-компоненты нуждаются в этих базовых возможностях, а бизнес-компоненты должны быть улучшены с помощью HOC

Для разработки и отладки компонентов в гибридной архитектуре требуется полноценная живая студийная среда и живой контейнер для разработки и отладки.Без поддерживающей инженерной системы разработка компонентов очень неэффективна. Следовательно, под эту архитектуру также требуется поддерживающая инженерная система, которая в основном включает в себя следующие части:

  • определенная сюита: Создание шаблонов для разработки компонентов в live-студии для расширения возможностей отладки, включая моделирование в live-студии, прокси-сервер отладки, горячее обновление, обнаружение компиляции и другие функции.

  • Инструмент отладки Live Room: Разработайте компонент отладки на основе живого контейнера, обеспечивающий отладку журнала, контейнерные вызовы API, фиктивные данные, фиктивные сообщения и другие функции.

  • Плагин VS Code: Эквивалентное решение инструмента отладки в живой комнате на стороне ПК в сочетании с симулятором, его можно независимо разрабатывать и отлаживать на стороне ПК.

Команда мультимедийного интерфейса может эффективно и стабильно строить бизнес-систему в прямом эфире, создавая контейнер для прямой трансляции и инженерную систему.

Конечно, гибридная архитектура усложняет архитектуру из-за сочетания Native и внешнего интерфейса, особенно управления состоянием, экземпляром проигрывателя и управлением экземпляром веб-просмотра в комнате прямой трансляции, когда прямая трансляция и видео скользят вверх и вниз, что приведет к к некоторым проблемам с состоянием, таким как определенная ошибка «волшебной трехстрочной строки» на платформе прямой трансляции:ЧерезПрямая трансляция естьЛи Цзяци, но показываяЕ Ицяньпродукт:

Основываясь на гибридной архитектуре, мы можем рассмотреть возможность дальнейших обновлений, чтобы сделать проигрыватель и интерактивный слой более интегрированными для формирования «супервидео» или интерактивного видеорешения, или даже определить новое<video>стандарт.

Мини-программа Архитектура живого зала

С появлением перекрестного бизнеса, особенно в сценариях с несколькими приложениями, структура комнаты для прямых трансляций Hybrid похожа на большого толстяка, и, естественно, нет никакого кросс-конечного преимущества (затраты на интеграцию клиента и обслуживание SDK чрезвычайно высоки). ) В этом контексте появляется небольшая программа прямого эфира «Архитектура». Дизайн Mini Program Live Room разделен на следующие слои:

  • Живой подключаемый модуль: в дополнение к самым основным проигрывателям, неограниченным спискам и официальным компонентам, подключаемый модуль также инкапсулирует основные возможности, такие как правила компоновки компонентов, центры событий и модули API контейнеров.

  • Межконечный коммуникационный уровень: поскольку контекст js между подключаемым модулем и хост-экземпляром апплета полностью изолирован, @alipay/armer-x использует функцию, заключающуюся в том, что appx не сериализует объявление конкретных функций для выполнения соединения между подключаемый модуль и хост-апплет. Мост связи, например, для подключаемых модулей

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

  • Небольшой экземпляр программы: после того, как у нас есть сторонние компоненты и плагины для прямых трансляций, мы можем интегрировать и упаковать их для создания нового экземпляра апплета. : «Morophu», текущая стратегия заключается в создании и создании экземпляров на Alipay. сторону через Morpho, а на стороне Baichuan загрузите через IDE и используйте платформу разработки Taobao для доставки Baichuan

Решение для прямых трансляций мини-программ, созданное совместно Ant и Taobao Live, широко используется во многих приложениях (включая приложения для внешних носителей).

Ориентирован на производство: инструменты для прямой трансляции, редактирования видео и т. д.

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

прямая трансляция

Есть два основных решения для фронтенда прямой трансляции:

  • настольный клиент: Принять схему Electron + OBS (OBS — это бесплатный пакет программного обеспечения с открытым исходным кодом для записи и веб-трансляции, OBS написан на языке C и C++, обеспечивая захват источника и устройства в реальном времени, композицию сцены, кодирование, запись и трансляцию и т. д. ). По дизайну OBS не отвечает за бизнес-функции и служит только SDK для потоковой передачи. Интерфейс OBS инкапсулируется в интерфейс V8 посредством связи IPC, а затем упаковывается в модуль Node через CMake или GYP для внешнего вызова. Область воспроизведения (размер, отступы и т. д.), поведение элементов при взаимодействии (поворот, масштабирование и т. д.), параметры потоковой передачи и т. д. инкапсулируются в интерфейсы и доступны интерфейсу. Все приложение представляет собой BrowerView в Electron, который использует React для поддержки представления, Mobx для управления данными, межстраничной связи и соответствующего потока данных, кеша и управления окнами — все это управляется основным процессом Electron. дескриптор окна веб-просмотра для процесса OBS. Обеспечьте плавное отображение потоковых изображений.

    Верстак Taobao для прямых трансляцийа также1688 Живой компаньонВсе придерживаются этой схемы:

  • Сторона веб-браузера: Принято решение WebRTC, которое имеет более низкое разрешение и более высокую производительность, чем потоковая передача на рабочем столе. Например, из-за бизнес-характеристик команда Convergent Media не может использовать стороннее программное обеспечение с открытым исходным кодом OBS, поэтому они выбрали это решение и создали SDK для захвата веб-страницы и передачи смешанных потоков SDK, который поддерживает камеру, экран компьютера и пуш-стриминг

видеоклип

По сравнению с производством прямых трансляций охват производства видео шире, и в этом направлении задействовано больше команд, в том числе Alimama, Tao Department, Hema, 1688, Ali Xiaomi, Ant и так далее. Для создания контента статьи требуется редактор форматированного текста, а для создания видеоконтента требуется инструмент для редактирования видео.Конечно, сложность этих двух процессов совершенно разная. Мы создаем интеллектуальное производство или эффективные и простые в использовании инструменты глубокого редактирования, которые, как ожидается, снизят производственные затраты и редактируют видео так же легко, как редактируют статьи.

Традиционное программное обеспечение для настольного редактирования предоставляет интерфейс с графическим интерфейсом для предоставления пользователям обратной связи по эффекту редактирования WYSIWYG и генерирует данные описания редактирования после завершения редактирования, которые, наконец, передаются модулю графики и изображения, модулю обработки звука и модулю кодирования видео для создания окончательный вывод.видеофайл. Что касается реализации большинства программного обеспечения для редактирования с открытым исходным кодом, первая половина графического интерфейса пользователя реализуется через графический интерфейс операционной системы или кросс-платформенный, такой как QT, SDL и SWT, Мы называем эту часть.«Графический интерфейс», а последний включает части, связанные с графикой, изображениями, звуком и кодированием, большая часть которых будет поддерживаться набором ядер редактирования мультимедиа, таких как знаменитые MLT, GStreamer и т. д. под Linux, которые мы здесь называем."редактировать ядро".

На основании идеи интерфейса GUI + редактирование ядра выше, мультимедийный интерфейс обычно имеет следующие схемы внедрения для редактирования инструментов:

  • Настольный клип: Решение Electron, внешний интерфейс с графическим интерфейсом находится в Webview, ядро ​​редактирования находится в Native, и оно упаковано в модуль Node для внешнего вызова (аналогично прямой трансляции Electron выше). Инструменты редактирования Marvel на основе Amoy, использующие это решение, используются для профессиональной съемки.

  • Чистые веб-клипы: схема браузера, интерфейс GUI и ядро ​​редактирования находятся в браузере. Возможности редактирования, рендеринга и компоновки, предоставляемые ядром редактирования, реализуются через API Media Stream или FFmepg + WebAssembly. Это решение принято видеоредактором 1688 (Magic) и инструментом для создания видео Xiaomi от Ali Xiaomi.В качестве примера возьмем решение Xiaomi:

  • Клип веб-облака: решение браузер + сервер, внешний интерфейс GUI находится в браузере, а ядро ​​редактирования — на сервере. Поскольку интерфейс GUI и ядро ​​редактирования разделены на обоих концах, также необходимо решить проблему того, как GUI представляет содержимое ядра редактирования. Обычно есть два решения: браузер активно использует эффект рендеринга, а прямая трансляция WebRTC передается в пользовательский интерфейс.Последний имеет меньшую задержку и лучший опыт. Облачные решения для редактирования включают Aliwood от Alimama, Hema Video Editor от Hema, Amoy PC Taopai и инструмент для создания коротких видео FMS от Ant.В качестве примера возьмем решение Aliwood:

  • Тем не менее, текущее использование веб-редактирования в облаке - это решение для браузера, позволяющее активно использовать эффект рендеринга.Автор не видел решения WebRTC (аналогично облачным играм).В настоящее время отдел Tao создает решение для редактирования в облаке WebRTC.

Производство игр

В дополнение к прямой трансляции и редактированию видео, есть также производство геймплея в сочетании с распознаванием потокового мультимедиа, таким как распознавание лиц, распознавание жестов, распознавание объектов и другие специальные эффекты, такие как наложенные фильтры, наклейки, красота лица, текст и т. д., чтобы добиться прямой трансляции и видео медиа.Умная игра. Есть AR Studio от Facebook, Lens Studio от Snapchat, Создатель эффектов от Douyin и MAI от Taobao (MediaAI Studio), которые широко используются в прямых трансляциях Taobao, покупках и других бизнесах.

Разработка и планирование мультимедийного направления Alibaba Front-end Committee

С развитием мультимедийного бизнеса в последние годы в Alibaba Group уже есть много интерфейсных команд мультимедиа, включая Lazada, CBU 1688, ICBU, Alimama, Alibaba Cloud, Local Life, Alibaba Learning, Cainiao, Rong Media, Ant, Youku. , Lai Crazy, Taobao Live, DingTalk и т. д. В связи с широким использованием аудио-, видео- и аппаратных обновлений комитет по внешнему интерфейсу выбрал область мультимедиа как одно из направлений будущей компоновки и прорывов в этом году и начал разрабатывать область мультимедиа в соответствии со стандартом Web.

Мы тщательно изучили текущую ситуацию мультимедийных технических команд различных подразделений Alibaba Group, в том числе основные бизнес-сценарии, основные проблемы, с которыми они столкнулись, технические решения, которые можно экспортировать в экономику, и требования к мультимедийному направлению бизнеса. комитет по интерфейсу.Для создания высокоскоростных веб-видеоклипов и направлений воспроизведения нашими целями являются:Глубительную мультимедийную промышленность, потяните через веб-мультимедийную технологию группы, установите расширенные решения для редактирования и воспроизведения веб-видео и воспроизведения, а также выложите хотя бы одно направление в прямом направлении мультимедийных технологий (например, WebXR).

Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь со мной, WeChat ID:JovenPan.

Категории