Облачное редактирование Tencent Cloud Audio and Video позволяет клиентам быстро интегрировать возможности редактирования в свои собственные приложения (веб-приложения, мини-программы). В то же время мощные возможности шаблонов могут значительно повысить эффективность производства видео. В процессе изучения продуктов онлайн-редактирования B-end мы столкнулись со многими проблемами: как реализовать два сценария интеграции: быстрый и индивидуальный? Как спроектировать универсальный, высокопроизводительный и гибко расширяемый механизм рендеринга? Как обеспечить эффективность и качество синтеза облачного видео? LiveVideoStackCon 2022 Beijing Station пригласил учителя Ченг Жуйлиня поделиться с нами тем, как их команда ответила на эту серию вопросов.

Текст/Чэн Жуйлинь

Редактор/LiveVideoStack

Привет всем, меня зовут Ченг Жуйлинь, и я отвечаю за модуль облачного редактирования Tencent Cloud Intelligent Creation Platform. Сегодня я хотел бы поделиться с вами некоторыми интересными вещами, которые я сделал, работая над инструментом внешнего редактирования облачного видео. Сегодняшний обмен в основном сосредоточен на трех содержаниях:

①Во-первых, почему существует облачное редактирование, чтобы каждый мог понять сценарии применения облачного редактирования на стороне B;

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

③Третья частьОнлайн-редактирование видеоТехнологические перспективы для бизнеса。Онлайн-редактирование Практики видеобизнеса, естественно, заинтересуются Chrome. Меня больше интересует WebCodecs, официально поддерживаемый 94. ​​Давайте поговорим о некоторых ограничениях и перспективах его применения в сфере видеопроизводства.

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

-01-

Облачное приложение для редактирования

Для сценариев облачного редактирования на стороне Интернета мы внедрили мощный инструмент онлайн-редактирования, который позволяет пользователям выполнять работу по редактированию видео, открывая веб-страницу. Соответствующие возможности также были перенесены в мини-программы WeChat, создав WeChat. Приложение под названием WeChat Плагин Jian Mini Program позволяет каждому быстро интегрировать сервис редактирования в свою собственную мини-программу.

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

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

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

Прежде всего, цифровой человек и монтажный процесс были глубоко объединены. Пользователи могут гибко настраивать и редактировать цифровые видеоролики людей;

Вторая особенность заключается в том, что он поддерживает как текстовый, так и аудиорежим для создания цифровых видео с участием людей;

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

Клиенты могут использовать функцию облачного редактирования двумя способами. Давайте посмотрим, как клиенты используют наше облачное редактирование. Первый метод — доступ PaaS. Если вы следите за первоначальной разработкой официального веб-сайта Tencent Cloud, вы можете встроить полную функцию редактирования в собственное веб-приложение клиента. На рисунке слева показано, как Tencent Conference получает доступ к проекту внешнего редактирования через iFrame. Второй метод — через наши интерфейсные компоненты и серверный API. На изображении справа показана сцена встречи Tencent, похожая на простую обрезку на YouTube, которая позволяет клиентам просто обрезать ключевой контент видео, чтобы создать новое видео после встречи. При этом имеется адрес C-стороны. По сути, наш адрес C-стороны также является клиентом B-стороны Cloud Clip, и все возможности и интерфейсы такие же, как у внешних клиентов. Tencent Conference использует интерфейсные компоненты и серверный API для создания простой сцены редактирования. Облачное редактирование предлагает гораздо больше. Клиенты могут комбинировать стиль дизайна и бизнес-возможности своих собственных веб-приложений, чтобы создать совершенно другую интерфейсную страницу редактирования.

Облачное редактирование обеспечивает разработку B-конца в три этапа. Первым шагом является создание учетной записи Tencent Cloud и активация облака по требованию. Все медиа-ресурсы Tencent Cloud хранятся в облаке по требованию. Второй шаг — создать проект через API, импортировать медиа-ресурсы из облака в проект по требованию, а затем вернуть подпись во внешний интерфейс. На третьем этапе внешний интерфейс инициализирует страницу iFrame с помощью подписи, возвращенной на предыдущем шаге. На этом этапе проект редактирования можно открыть немедленно, и он содержит мультимедийные ресурсы, внедренные сервером. Конечная страница может взаимодействовать с iFrame через API и может быть изменена в любое время. Добавляйте новые элементы в контент и позволяйте пользователям загружать свои собственные медиа-ресурсы.

-02-

Проектирование и эволюция внешней и внутренней архитектуры облачного редактирования.

Основные возможности и сценарии применения облачного редактирования B-стороны были представлены ранее. Далее мы представим базовые возможности и сценарии применения облачного редактирования B-стороны.

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

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

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

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

Третье — обновление Clip. Clip — базовый класс для всех элементов. Например, основные атрибуты, такие как ширина, высота и положение элемента, перетаскивание, вращение, масштабирование и другие операции. Наконец, есть обновления поведения пользователей. Пользователи могут выполнять множество операций в механизме рендеринга, например перетаскивать видеонаклейки. Мы синхронизируем обновления элементов экрана с данными об орбите, чтобы обеспечить согласованность данных.

Проекты видеомонтажа незаменимы без добавления различных спецэффектов. В проекте через Shader были реализованы некоторые видеоэффекты, такие как спецэффекты-переходы, маски, домашняя анимация и т. д.

Это некоторые распространенные эффекты в коротких видеороликах. Как добиться разработки и повторного использования таких эффектов?

Это код исходного шейдера. Основная часть этого кода — основная функция. Возвращаемое значение функции — это значение цвета RGBA. Если никакие операции не выполняются и возвращается 0000, экран справа будет полностью черным. Если разрешение картинки справа 720×1280, основная функция будет выполнена 720×1280 раз. Второй — входные данные для текстуры. Введите две текстуры изображения в эту программу. В основной функции вы можете получить значение цвета этого пикселя текстуры. Если вы ничего не сделаете и вернете значение цвета, представленное на рисунке 1, окончательное изображение будет полным изображением, показанным на рисунке 1. Если возвращается значение цвета рисунка 2, окончательным изображением будет рисунок 2.

Это логика анимации. Если продолжительность анимации составляет 2 секунды, а текущее время выполнения — одну секунду, эффект жалюзи будет находиться в среднем состоянии анимации. В результате расчета некоторые пиксели будут отображать цвет пикселя, как на рисунке 1, а некоторые пиксели будут отображать пиксель. цвет рисунка 2. Здесь есть интересный момент. Формы, начинающиеся с #, такие как #iChannel и #iUniform, не являются стандартными методами записи шейдеров и будут преобразованы в стандартный входной параметр нашим плагином VSCode.

После написания вы можете выполнить отладку шейдеров в реальном времени, настроив эту вещь в правом нижнем углу. Написание шейдера более непринужденно. При написании спецэффектов можно вводить любые текстуры и переменные. В то же время нет встроенного режима повторного использования компонентов импорта, что не способствует проектированию и повторному использованию программы. Tencent Cloud решает эти проблемы с помощью подключаемого модуля VSCode. При разработке модуля Shader Controller механизма рендеринга накладываются строгие ограничения на унифицированные входные параметры, используются только входные параметры с указанными переменными, а повторно используемые методы инкапсулируются в максимально возможной степени. Позже разработчикам нужно будет написать только часть рендеринга, и им не придется беспокоиться об общей логике. Общая форма — это переменная, начинающаяся с #, упомянутого выше. Например, с помощью переменной Progress вы можете получить текущий прогресс анимации в основной функции, а затем рассчитать стиль анимации, который должен отображаться на основе текущего прогресса в основной функции. Подобные общедоступные входные параметры включают некоторые стандартизированные координаты пикселей, UV, соотношение холста и т. д., которые можно настроить в правом нижнем углу для предварительного просмотра в реальном времени.

Метод импорта реализуется путем слияния шейдера. Сам шейдер не предоставляет встроенных этапов и механизмов ввода. Объединение общих методов используется на этапе компиляции инструмента. На этапе написания разработчикам нужно только написать конкретную логику в основной функции, а затем они смогут использовать ее общие методы, такие как вычисление пропорций, вычисление положения, вычисление цвета, вычисление прогресса и т. д. На этапе генерации кода это часть кода. Объедините его с кодом рендеринга, написанным более поздними разработчиками. После отладки нажмите «Экспорт» в правом верхнем углу, чтобы создать новый файл шейдера, необходимый редактору, и добавить новые специальные эффекты.

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

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

Логика работы не может быть отделена от элементов мультимедиа. В настоящее время существует два основных режима управления ресурсами для инструментов онлайн-редактирования. Один — чисто облачный, а другой — чисто локальный. Вначале использовалась чисто облачная модель, и все ресурсы предоставлялись вокруг облака по требованию. Чисто локальный режим аналогичен зарубежному Clipchamp. Чисто локальный режим не работает на разных устройствах и сопряжен с риском потери файла кэша. Однако пользователям чистого облачного режима приходится ждать загрузки и перекодирования видео, прежде чем они смогут его редактировать. Tencent Cloud использует двойной локальный и облачный режимы для поддержки рабочего процесса редактирования. При импорте файла видео анализируется, чтобы определить, можно ли напрямую редактировать медиа-ресурс. Если его можно редактировать напрямую, запустите локальный рабочий процесс редактирования, запишите изображение обложки и изображение спрайта и импортируйте видео в дорожку редактирования. За редактором стоит загрузка и перекодирование ресурсов. После завершения загрузки и перекодирования будет произведена замена облака. После этого, независимо от того, меняет ли пользователь оборудование или пользователей, проект всегда поддерживает стабильность и доступность данных.

Зеленая часть — это сценарий внешнего приложения. Механизм рендеринга в реальном времени Tencent Cloud хорошо поддерживает работу рендеринга в Интернете и в мини-программах. В части экспорта на стороне сервера протокол и серверная часть соединяются через один и тот же протокол рендеринга, а серверная часть объединяет окончательные данные дорожки через FFmpeg и OpenGL. Это не только приведет к несогласованности между передней и задней частями, но и потребует много рабочей силы на внутренней стороне.

После проверки есть возможность закинуть движок рендеринга на сервер. Вся программа управляется процессом Node механизма рендеринга, инкапсулируя модуль расширения Node с общей памятью для быстрой передачи данных видеокадра и аудиокадра, а затем инкапсулируя модуль расширения Node кодирования и декодирования. Нижний слой основан на модифицированном FFmpeg. Когда механизм рендеринга используется во внешнем интерфейсе, он управляется на основе данных и времени. Из-за многоуровневой архитектуры большинство модификаций требуют только модификации части предварительного загрузчика, предназначенной для загрузки данных. API внешнего рендеринга Clip является согласованным, и часть логики рендеринга можно использовать повторно.

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

Расширение узла модуля кодирования и декодирования. Здесь инкапсулирована программа расширения узла кодека, которая предоставляется основному процессу механизма рендеринга для вызова. Механизм рендеринга сначала создаст подпроцесс кодирования. Во время процесса рендеринга он также создаст подпроцесс декодирования по запросу на основе предварительно загруженных результатов. Информация передается между процессами через общую память. Будет возвращено выравнивание частоты кадров, количество декодированных кадров, аудиокадры и видеокадры с соответствующим объемом данных. Механизм рендеринга получит данные этого кадра для рендеринга изображения и обработки звука.

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

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

После завершения вышеуказанного процесса вы можете выйти в Интернет. Как обеспечить согласованность эффектов рендеринга? Путем написания набора тестовых примеров для всех элементов и эффектов сначала генерируется MP4 ожидаемых результатов. Каждая последующая итерация использует структурное сходство SSMI для покадрового сравнения различий между двумя видео, что в конечном итоге гарантирует, что синтезированное видео не соответствует действительности. отличается от оригинального. Однако во многих случаях эффект редактирования видео является сложным. Если вы хотите обеспечить согласованность рендеринга в сложных ситуациях, вы должны напрямую использовать онлайн-данные в качестве набора тестовых примеров. Перед каждым выпуском теневая среда будет отбираться и сравниваться. Каждая задача также заключается в сравнении различий каждого кадра по структурному сходству SSMI. Выпуск будет разрешен только в том случае, если все сравнения пройдены. Случаи, подверженные ошибкам, будут объединены в плохие случаи, и мы продолжим их улучшать, чтобы обеспечить качество выпусков в ходе итеративного процесса. Благодаря набору локальных тестовых сценариев и предварительной теневой среде выпуск фоновой службы является наименее обременительным во всем центре. Если его можно запустить, это доказывает, что его можно выпустить.

-03-

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

Chrome представил WebCodecs, начиная с версии 86. Также начиная с 86 версии всегда есть какие-то необъяснимые баги в рендеринге. Вероятно, это было исправлено и стабилизировано в версии 92. WebCodecs предназначен для предоставления эффективных API-интерфейсов кодирования и декодирования аудио и видео в браузерах. До появления WebCodecs уже существовало два набора API-интерфейсов, связанных с кодеками, VideoRecorder и MSE, но оба они имели множество ограничений. Появление WebCodecs предоставило аудио- и видеобизнесу больше возможностей для воображения.

Хотя чистое редактирование в браузере не требует использования сервера, оно не позволяет избежать перекодирования видео. Поскольку браузеры имеют ограниченную поддержку видеоформатов, многие форматы невозможно воспроизвести непосредственно в браузере. Некоторые неподдерживаемые форматы видео необходимо перекодировать перед редактированием. Я думаю, что все слышали об этом или использовали версию FFmpeg для Wasm в бизнесе. Ограничение памяти Wasm затрудняет монтаж сцен видео. Кроме того, наиболее важным моментом является проблема производительности. Даже если SIMD поддерживается, транскодирование видео MOV 1080p может достигать кратности только 0,3, что приводит к ухудшению пользовательского опыта. Чтобы повысить эффективность транскодирования, вы можете настроить в браузере десять воркеров и использовать тех, кто свободен. Сначала получается исходная информация видео, перекодируется распределенным образом и, наконец, инкапсулируется. Чтобы избежать проблем со звуком, звук можно извлечь напрямую и инкапсулировать. В этом режиме эффективность транскодирования может быть достигнута в три или четыре раза быстрее. Одноминутное видео можно закодировать примерно за десять секунд.

Когда WebCodecs сочетается с механизмом рендеринга, эффективность значительно повышается. Для 33-секундного оригинального фильма весь процесс декодирования, рендеринга и кодирования занимает всего более девяти секунд. В процессе я обнаружил, что API WebCodecs отвечает только за декодирование и кодирование. Вам нужно самостоятельно справиться с декапсуляцией и инкапсуляцией. Видеокадр и аудиоданные являются очень легкими объектами, но содержат большие ссылки на память. Если во время кодирования передаются разные значения ширины и высоты, кодировщик автоматически масштабируется. На этом этапе в кодировщик можно поместить некоторую логику масштабирования, что может снизить вероятность рендеринга и повысить производительность.

WebCodecs имеют отличную производительность. Но до сих пор существует большой пробел в его использовании для полной замены FFmpeg на стороне браузера. До конца 2021 года его форматом кодирования звука был только формат Opus, который не поддерживался родными плеерами MAC и WINDOWS. Хотя вы можете использовать версию FFmpeg для Wasm для преобразования звука в AEC, при этом вы потеряете удовольствие от создания видео с помощью чистого браузера. Соглашение о кодировании AAC было окончательно заключено в мае 2022 года. Поддержка H265 была очень громкой на форуме, и Chrome версии 104 наконец-то поддерживает жесткое декодирование H265. В то же время WebCodecs также поддерживает декодирование H265. Для интеграции декапсуляции и инкапсуляции основным решением является поддержка ее через версию FFmpeg для Wasm. Либо склеить чисто вручную через MP4 box. Разработчики WebCodecs были вынуждены разработать декапсулятор Wasm.

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

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

На этом на сегодня все, спасибо всем!

LiveVideoStackCon 2023 Шанхайские лекторы набираются

LiveVideoStackCon — это площадка для всех. Если вы уникальны в команде или компании, имеете многолетний опыт работы в определенной области или технологии и заинтересованы в техническом обмене, вы можете подать заявку на роль лектора на LiveVideoStackCon. Пожалуйста, отправьте содержание вашего выступления по электронной почте:peaker@livevideostack.com.