微信小程序裁剪视频部分内容导出

　　如果是单纯的想裁剪视频的话，微信小程序提供了一个非常便捷的API openVideoEditor

　　如果只是想获取视频的第一帧的话，可以参考我这个文章 从0开始的canvas学习(二)

　　如果要更换音频轨道，或者在为视频增加什么样式，就会分别获取到视频的视频轨道和音频轨道和视频的每一帧

　　首先是获取视频的每一帧

　　1·获取视频的帧 微信小程序提供了 createVideoDecoder API用来解析视频的帧数，虽然我用的时候总是感觉丢帧，但目前也没找到别的办法

　　步骤要获取视频的帧，首先要知道一个视频有多少帧通过wx.getVideoInfo获取到视频信息包括fps和duration我们可以通过上面获取的信息获取视频总共有多少帧数(fps*duration) 下面我们来获取视频的帧，并生成每一帧的图片，会用到 createOffscreenCanvas这个API用来创建一个离屏画布

　　首先如果是选择视频的话可以直接获取到视频信息，如果是网络链接的要通过 wx.downloadFile 把视频下拉获取到本地的临时链接

　　可以是网络视频 也可以是自己的视频，下面的案例是我本地的视频，视频时长不宜太长，不然小程序容易崩掉

　　关键逻辑处理在这个方法中，大致意思：获取的帧的数据是一个数组里面存储着图片的像素值

　　如果是1px*1px的图像那这个数组的长度就为4，图像就是由这么一个一个的像素组成，我们可以通过canvasAPI把这些像素绘制出来并且导出

　　需要注意的是，如果导入像素点的数量和画布实际的绘制大小有出入会导致错误，就像上面说的一样，如果你要把

　　2·展示视频的帧 获取到视频的帧之后，当然就要展示出来，下面是我展示的一些样式以及代码

　　

　　代码部分

　　index.wxml index.wxss 3·绘制视频的帧 目前已经将视频的帧读出来了，然后要把这些图片再转化为视频，我们需要微信官方提供的APIwx.createMediaRecorder画面录制器，根据官方介绍我们知道这个是把webgl画布上的内容逐帧录制然后导出，这webgl我们使用插件

　　

　　首先我们先在canvas中绘制一些内容

　　

　　可以看到有一个正方体，可以把图片当作材质渲染到上面，那么方向就会明确了(这个是一直旋转的)

　　下面的操作步骤

　　1、获取视频的帧

　　2、把视频的帧绘制到webGL上面

　　3、通过画面录制器逐帧录制webGL上的当作视频的帧

　　注:部分方法在上面可以搜到，就不重复写了

　　

　　4·添加音轨 完成上面的步骤之后我们会发现视频没有声音，那是因为我们只是把帧转化为视频导出，所以才没有声音

　　只有视频轨道没有音频轨道

　　我们要实现视频轨道和音频轨道结合的话，这里微信提供了wx.createMediaContainer，这个API可以视频将视频的视频轨道和音频轨道分离，如果视频没有声音的话那就没有音频轨道，分离的轨道tracks是一个数组，没有声音的话只有一个内容就像下面这样

　　

　　这里是获取视频轨道或者音频轨道的方法

　　这里我创建这个对象的时候用了单例设计思想 因为如果不这样写的话导出视频一直为空

　　使用(在之前的方法里面进行内容补充)

　　下面的代码逻辑是在视频被选中后获取到它的音频轨道，然后在视频处理结束后导出的时候将之前的音频轨道和处理之后的视频结合

　　然后导出的视频就会有声音了

　　所有代码