评论

如何在小程序上实现视频剪辑?

如何在小程序上实现 视频剪辑 能力

微剪

技术创新点:

  1. 小程序适配浏览器webgl运行环境;视频编辑web应用,一般以性能强大的PC浏览器为运行环境,绝大部分功能依赖于浏览器环境的基础api;而在小程序环境内,其运行环境与浏览器有诸多不同,而且缺少诸如DOM/BOM等基础接口,使得在小程序内运行基本的视频相关应用都很容易出错;

举个例子,在小程序环境内无法通过new Image()生成一个图片,我们需要自己生成一个模拟的Image对象,伪代码如下:

function Image(){

let img = context.currCanvas.createImage

img.__proto__.__proto__ = context.window.HTMLImageElement.prototype

return img

}

类似上面的代码通过一个当前运行环境的canvas为我们创建了一个图片对象,使得基本的图片绘制可以进行。同时,在微剪小程序内我们还适配了Window/Document/Canvas/Video/Event/WebGLRenderingContext 等对象及相关方法,为之后扩展复杂的webgl功能奠定了基础;

  1. 小程序内逐帧视频渲染;在浏览器环境内,通过webgl技术渲染视频,底层会依赖于gl.textImage2D方法,可以直接输入video对象;但是在小程序内这样是无法渲染的


我们尝试了多种办法,最终使用了2d canvas作为一个中间数据代理层,通过2d canvas获取视频实时帧数据,传递给webgl canvas,达到了逐帧渲染的效果,由于可以拿到每帧的数据,因此可以再次基础上增加各种滤镜特效,视频渲染大体架构如下:



  1. 小程序纯前端视频文件导出;在大多数视频web应用内,导出功能完全依赖后端服务器,而在微剪小程序内,我们通过跟微信团队不断协作打磨,完善实现了纯前端的导出能力,导出大体流程如下:


名词解释:

mediaRecorder: 实现了canvas绘制过程中的帧数据录制,以及视频轨道文件的生成

mediaContainer:实现了视频轨道/音频轨道的分离与合成

最终架构如下:


             


详细接入流程~请访问: https://cloud.tencent.com/act/pro/weijianhttps://cloud.tencent.com/act/pro/weijian

最后一次编辑于  07-23  
点赞 0
收藏
评论
登录 后发表内容