H5 js方式实现前端视频压缩

1.项目做人脸识别,要求录制人脸读数视频后进行上传处理。但是手机上录制的视频非常大,安卓上3s的视频就有5M左右大小。所以尝试做了前端的js压缩处理。一般来说视频压缩是在服务端通过ffmpeg做压缩。但是这个据说对服务器的要求也很高。前端是不好做压缩处理的,但是也不是不可以做,性能不好而已。在github上查了下试了几种前端的压缩组件。最后我试了一个用的比较好用顺手,是轻量级的,适合H5。链接如下https://github.com/ffmpegjs/ffmpeg.js

2.用法github上已经有了。我这里贴一下它examples里这次参考的html 的代码做备份。


  
    
    
  
  
    

Record video from webcam and transcode to mp4 (x264) and play!

3.下面是我的总结。这个前端的ffmpeg.js首先引用有两种,如果你是js直接写的H5,可以通过下面的方式直接引入


const { createWorker } = FFmpeg;

如果是ES的方式,需要通过npm安装

npm install @ffmpeg/ffmpeg

const { createWorker } = require('@ffmpeg/ffmpeg');
const worker = createWorker();

4.那么在我的项目里,前端压缩的时候我其实一开始就是借鉴上面的代码,只用了transcode方法的部分,通过把uni.chooseVideo调取本地摄像头,录制的视频用webm读取然后转为mp4格式,达到压缩目的

const { createWorker } = FFmpeg;
const worker = createWorker();
uni.chooseVideo({
          sourceType: ['camera'],
          camera: 'front',
          success(chooseRes) {
               //chooseRes.tempFilePath为本地录制好的视频blob格式的地址   
                 await worker.load();
                 const name = 'record.webm';
                 await worker.write(name, chooseRes.tempFilePath);
                 await worker.transcode(name,  'output.mp4');
                 const { data } = await worker.read('output.mp4');
                 const src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
                 self.uploadVideo(chooseRes.tempFilePath)
          }
        })

5.这种方法可以达到效果,但是会有两个新的问题,【1】耗时很长,4s的视频在手机上需要快40s左右进行压缩,时间太久了。微信浏览器录制的视频非常大,都压不动。可见这种方法性能并不好。【2】uni-app的uni-chooseVideo不支持H5方法调用前置摄像头,而这边希望调前置摄像头,用这种方法无法调用前置摄像头。后来采用上面html的方法,进行改造。通过测试发现,读取前置摄像头的数据然后在video里呈现,这样的video src本身就比较小,不需要压缩,这样的方式可以避开录制本地视频非常大,同时能调用H5前置摄像头。在uni-app的Hbuilder中自己写了camera录制视频的组件,代码如下





   

这种方式在我的安卓机上chrome浏览器支持,微信浏览器也支持,但是原生的华为浏览器不支持,IOS不可以用。具体如何在IOS中做到兼容还在探索中。有好方法的朋友欢迎指正。

你可能感兴趣的:(前端,视频压缩,H5,视频压缩,前端,js,H5)