前端如何在上传之前对视频文件进行压缩?

最近做了一个vue项目-的视频上传的功能,
需求是这样的:用户打开页面 ,会有一个打开摄像头的按钮,当用户点击按钮时,会打开手机摄像头对用户进行摄像。
问题:摄像完之后,iOS上传没有问题,安卓的一直在转圈,无法传成功。
之后检查 发现安卓前置摄像头录制10秒 文件就有20多M。而iOS只有几兆

想知道前端能不能压缩音频文件 有什么处理方法 对视频文件上传之前进行压缩?
网上搜索了很多方法 都没有用

视频上传方法:

<a href="javascript:;" class="a-upload">
  <input type="file" class="videoBtn" id="video"  @change="onUpload" accept="video/*" capture="user">
  开始录制视频
  </a>
 onUpload(event){
    var _this = this;
    let orderid = this.$route.query.orderid;
    console.log(event)
    var reader = new FileReader();
    var video = event.target.files[0];
    reader.readAsDataURL(video);
    reader.onloadend = function () {
        console.log(reader.result);
        _this.upLoadVideo(reader.result, orderid)
    }
},

回答:

这个问题已经解决了,一直忘了提交答案。
查询了很多资料,发现前端对视频进行压缩目前是做不到的。
想要在移动端把大内存视频传到服务端,目前我所知道的解决方式有两种:
1、前端对视频进行分块上传;
2、前端对视频进行转码后上传(不推荐);

最终我所选的就是用的七牛云存储,前端把视频上传到七牛云上。
七牛云的做法就是把前端的视频分块上传到服务端保存

大于 4M 时可分块上传,小于 4M 时直传
分块上传时,支持断点续传
图片描述
参考七牛云链接
七牛云JavaScript SDK

回答:

视频压缩应该是不可能了,要不换成分块上传?

回答:

上面说不可能的我就笑了,将视频等比例绘制到canvas上,再用canvas的captureStream api录制,就看你愿不愿意等了,视频多长就得等多久

回答:

跟楼主一样的问题 请问楼主解决了吗

回答:

前端压缩多半是不行的,只有服务器端程序才对视频处理,视频分片上传是一种解决思路

回答:

图片压缩你可以看https://zhuanlan.zhihu.com/p/… 视频压缩还是建议通过后端服务接口做,上传后通过ffmpeg就可以。

回答:

提一点,不要使用 readAsDataURL 用 readAsBinaryString. DataURL 是base64编码,编码后会暴涨 1/3 !或者用 formData 直接 append 这个 file 。

回答:

有个js的库,jszip吧,可以进行压缩,但是结果不理想,原视频12兆,压缩完11兆。
后来我用7zip在电脑上压缩,也是12兆压缩到11兆,好像是一样大小的。
估计不改变视频质量只靠压缩是很难了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注