web多媒体技术在视频编辑场景的应用

2024-03-23 20:48

本文主要是介绍web多媒体技术在视频编辑场景的应用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

大家上午好,很高兴来到咱们腾讯LIVE开发者大会。我今天分享的web多媒体技术在视频编辑场景的应用是个非常有意思的主题,希望大家能有所收获。

首先介绍下自己,我是袁运辉,2010年就加入了腾讯,目前主要在腾讯云视频中心负责web团队。


视频云的web团队是一个偏多媒体前端技术的团队,致力于为客户提供更多创新的场景化云服务,近期我们在视频制作领域中有一些实践经验,我觉得和前端技术以及大会的主题都比较契合,所以非常有意愿来这与大家做一次分享。

我的分享主要分为四部分:第一部分介绍下业务背景;第二部分介绍云剪,这是一个web端的视频制作平台;第三部分介绍微剪,是一个小程序端的视频编辑插件;最后会分享后续的一些规划以及前端的技术挑战。

首先为大家介绍一下腾讯视频云正在大力发展的制作云框架。随着数字化的不断推进,可以看到内容媒体行业云端化、智能化变革已成趋势,制作云是依托于腾讯云强大的直播、点播、视频ai等能力,为行业提供的一体化内容制作分发云服务。包括有云剪辑、云导播、云转推、云媒资等丰富的场景化应用,助力客户实现"采、编、播、发、存"等全链路云化改造升级,提升从业者内容制作分发效率。我今天分享的云剪、微剪是这个大框架中的重要一环。

先介绍云剪,可以看到界面很酷,这是一个web端的在线视频剪辑工具,和Mac客户端iMovie类似,提供音视频剪切、画面调整,添加标题、音乐、字幕、贴片、特效、滤镜、转场等功能,能够满足绝大部分视频非线编需求。

说到视频剪辑,大家一般会联想到原生客户端的软件app,在原生端技术上一般是如何实现的呢,这里我以安卓的流程图为例介绍一下,其他平台基础原理上也类似。

首先对视频需要解封装,提取出视频轨进行解码,并使用opengl绘制画面数据。这是由于视频的后期处理,需要使用到opengl强大的图形渲染能力,便于添加特效、滤镜及更多多媒体元素等。然后将opengl绘制内容进行编码,最后与音频一起封装成媒体文件。这只一个基础原理,在实际应用中当然会复杂很多。

那么在浏览器端如何实现,浏览器原生并不支持编解码这种高级接口,与mediaExtractor、mediaMuxer相对应的倒是有mediaStream,是否能为之所用,整体如何设计?

带着疑问,我分享三个问题:如何渲染视频帧,如上述流程里如何将视频绘制在浏览器webgl中;如何实时操作预览,即如何设计代码架构,做到方便实时预览视频剪辑各种操作;以及分享导出的几种方式。

渲染视频帧的第一个方案,我们可以使用ffmpeg的webassembly版本对视频进行解码,解出yuv数据转rgb再绘制到canvas上,业界也有很多使用这种方案来播放h265编码和flv等不支持的格式视频。有两点需要注意的是:第一虽然wasm性能比js好,但也是软解,每帧需要耗时25-30ms左右;第二需要实现类似浏览器video的音画同步方案,整体会很复杂。

第二个方案是我们正在使用的,在webgl接口中,texImage2D指定纹理是可以接收video对象的,那么我们可以通过离屏video绘制到webgl中。浏览器video是原生硬件解码,性能更好,而wasm的方案只能做到30帧,在视频编辑场景肉眼就能看到并不流畅,加上比较复杂,所以video纹理的方案性价比更佳。当然大家会说也可以使用2d canvas drawImage,但是这不便于我们使用webgl的更多能力。

再来看如何实时操作预览,做过游戏的同学可能会意识到,其实视频编辑软件,和游戏或动画制作工具有一定相似性。都有时间轴序列,拖拽生成实时预览,并有一个主计时器去驱动。我们目前的播放器采用的就是游戏开发的思路,通过操作时间轴实时输入轨道数据,播放器管理调度场景中剪辑对象,最终形成影片序列。

说下最重要的导出,前端是否可以导出,答案是可以的!

我给大家介绍两种方案:

第一种通过ffmpeg wasm版本,可以完全模拟出原生端的处理流程,ffmpeg run指的是我们熟知的ffmpeg命令行接口,功能很强大;

第二种可以通过captureStream、mediaStream等浏览器原生接口实现。

这两个接口,一般用于做录屏之类的应用,云剪里也有使用到录屏素材。画面和声音都可以通过captureStream来得到mediaStream对象,然后通过它的addTrack方法合在一起。但是这个方法只能合入一个音频流,当有多个音频时就有点捉襟见肘,这时可以使用web audio的一些高级技巧,例如动态connect维持一个流,其实也能够实现。

整体对于前端导出来说,captureStream的方式简单,但在复杂场景下还得进一步验证,导出质量是一个问题。ffmpeg能力上会更强大,他们的共同问题是,ffmpeg受限于浏览器端性能,captureStream则必须等canvas正常播放完,所以导出性能可能只能做到1:1。

那第三种方法就是后端导出了,ffmpeg、opencv、opengl都是后端很成熟的组件了。后端的好处是原生编译型程序性能更好,同时便于通过api调用或ai批量化生产。不太方便的是,前后端实现的效果要对齐统一挺麻烦。我们处于整体业务考虑,目前选择的是这一种方案。

在整体架构方面,我们也充分考虑了各种客户使用场景。可以支持多种层次的paas集成方案,如使用我们的SDK,可以用iframe方式完整嵌入云剪编辑器,同时配合完善的云api接口打通开发者业务流程。而对于有能力的开发者,我们也能够提供如播放器等核心组件给开发者二次开发。同时,也支持通过saas换皮的方式使用,在saas版本中,能够使用导播台、媒资管理等更多场景化应用打通整个制作链路。

性能方面,可以看到我们的编辑器在核心的预览播放场景下,有接近60帧渲染效率。素材导入上,也尽可能利用到浏览器的本地file能力,即传即编,云端同步,保证编辑的效率和随处使用。

接下来介绍一下微剪。微剪是一个小程序端的视频剪辑插件,开发者可以嵌入到自己的小程序中,完成视频编辑业务逻辑。搜索微剪或者扫描二维码可以体验,目前实现了一个简版的类原生短视频剪辑能力。

先说一下大家感兴趣的技术原理,从图中可以看到和前面介绍的原生处理流程很像,这里的核心是微信近期提供了一个decoder模块的小程序接口,编辑预览可以利用这个方式拿到视频帧画面绘制到webgl上。

在导出上,则提供了一个MediaRecorder可以录制canvas画面,最后与音频合成封装。这是小程序的一个基本原理,在官方文档上都能看到。

在前端方案上,同样作为web的一个方案,基于webgl,它与云剪是一脉相承的。但是呢,事情也没有这么简单。

我们遇到了各种各样的挑战,说下印象比较深刻的:第一点是环境适配,我们这个类游戏而形式又是小程序插件,微信的小程序和小游戏是完全隔离的,意味着在小游戏里发展了好几年的接口和做法,在这里都不能用,例如不能动态创建canvas、video,不能使用worker等,需要使用各种方式去规避和兼容;第二点是在渲染播放上面,微信的底层接口如decoder暂时还不是很完善,会遇到许多如seek错乱和音画同步等问题;第三点做视频编辑的话,少不了需要用到类微视抖音的特效,这个需要用到shader着色器,这一块也是前端接触得较少的领域,传统设计师根本做不了,需要花费大量的精力去攻关;第四点就是复杂导出了,多视频图片合并、多音频位置等,这些微信还没有准备好,暂时只是给了一个最基础的原子能力,需要使用到很多技巧来实现,比较零散就不细说了。我们通过努力,基本上解决了这些问题。

成果方面,我们在小程序上率先实现了从媒体选择、摄像,到多个视频图片的裁切合并,文字、特效、滤镜、音乐的添加,客户端导出这一整套完整核心流程,未来会持续增强能力,性能体验方面也会与微信的同事一起持续打磨。

微剪插件架构设计上,对于开发者,可以使用我们开箱即用的一个clip组件,能够配置丰富的参数如裁切时间、UI样式、水印等。同时,也可以使用我们的子组件做二次开发,例如相机、裁切器、播放器等,可以按需使用,开发出符合自己业务场景的编辑工具。我们这是一个组件集,即使不做编辑工具,也有许多业务场景,例如拿播放器组件作为一个多媒体展示方案等,欢迎大家试用。

最后分享下规划展望。在这一块的技术上,我觉得可能有这么几个方向:

第一点:编辑体验

我们目前的编辑工具能力还不是很完善,如何做到能媲美专业原生工具,让更多用户愿意使用,需要下很多功夫。编辑能力、易用性以及一些技术和体验的创新非常重要。

第二点:内容生态

我们做为to b的服务商,如何为客户提供素材方案,例如一些图文动画、动态贴纸等。其实这块挺难的,首先在技术上就不是一个标准的东西,有较多细节,它是设计与平台技术架构的融合体现。我们自己做都难,客户就更难,所以我认为这里会产生很大用户价值。

第三点:智能化

前端与AI/AR的结合在移动端已经很常见了,那么在web和小程序端是否可能大规模使用,需要持续探索场景,这里也会有很大的性能挑战。以及一些场景化的模版、后端智能生产等也是必不可少。

第四点:在线协同

因为疫情,这个词现在特别火,任何行业都需要协同,包括内容媒体行业,我们可以看到业界已经有一些如审查、修改批注等工作流应用出现,这里可能涉及比较复杂的协作、多端同步和许多媒体技术细节等。

这些对前端技术都是较大的挑战,同时也充满机遇。发现现在很多前端在研究serverless,这是往后,那么往前,可能就是webgl、媒体技术、webassembly等,例如webgl,我们熟知的前端AI、VR、AR、游戏等都离不开它。光shader就足够复杂,它可以用来做很多高级的特效、动画等可视化的东西,涉及到程序语言知识、数学知识、图形学知识,甚至需要一定审美。所以,学无止境,前端技术的天花板一直就很高。

最后,感谢大家,我今天的分享就是这些。

后台回复关键词【TLC】可获取嘉宾分享PPT。

这篇关于web多媒体技术在视频编辑场景的应用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/839491

相关文章

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

python中Hash使用场景分析

《python中Hash使用场景分析》Python的hash()函数用于获取对象哈希值,常用于字典和集合,不可变类型可哈希,可变类型不可,常见算法包括除法、乘法、平方取中和随机数哈希,各有优缺点,需根... 目录python中的 Hash除法哈希算法乘法哈希算法平方取中法随机数哈希算法小结在Python中,

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》:本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.