如何使用vue实现录制视频并压缩视频文件
本篇内容介绍了“如何使用vue实现录制视频并压缩视频文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
专注于为中小企业提供网站制作、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业金城江免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了数千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
一、下载gif.js相关文件,可以到这里下载,然后将这几个文件放在根目录的static/js里面。
gif.js相关文件及存放路径
二、下载依赖包:
npm i timers
三、在页面中声明:
import { setInterval, clearInterval } from "timers"; import GIF from "../../static/js/gif.js"
四、html代码块:
视频大小:{{videoSize}}视频时长:{{videoLength}}
五、在页面加载完成时初始化GIF:
mounted(){ //初始gif this.gif = new GIF({ workers: 1, quality: 1000, width: window.innerWidth, height: window.innerHeight, workerScript: '../../static/js/gif.worker.js', }); },
六、当input录制完视频返回页面中,获取到这个视频文件,每次拿到视频文件需要先移除之前的监听:
//input文件走向 changeVideo(e){ var file = e.target.files[0]; const video = document.getElementById('myvideo'); //视频开始播放 video.removeEventListener('play', this.videoPlay, false); //视频播放完 video.removeEventListener('ended', this.videoEnded, false); this.androidFile(file); },
七、上一步提到的this.androidFile方法,是通过这个视频文件,在页面播放一遍,在这个播放过程处理视频,完成整个转换过程,获取到最终的文件:
//安卓拍摄视频 androidFile(file){ //视频字节大小 this.videoSize = file.size; const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); this.gifSetTime = true; this.gif.abort() this.gif.frames = []; //file转base64 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { that.videoSrc = this.result; video.play(); } //视频开始播放 video.addEventListener('play', this.videoPlay, false); //视频播放完 video.addEventListener('ended', this.videoEnded, false); //获取到所有的图片并渲染完后执行 this.gif.on('finished', function(blob) { if(that.fileAndroid.size == blob.size) return; console.log("gif的blob文件",blob); //file that.fileAndroid = that.convertBase64UrlToFile(blob); //上传视频文件 that.uploadVideo(that.fileAndroid); }); },
八、步骤七所说的this.videoPlay方法。视频在页面播放过程中,每200毫秒通过canvas截取一张图片,把这些图片一张张给gif.js堆叠:
//视频开始播放 videoPlay(){ const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); console.log("视频时长",video.duration); this.videoLength = video.duration; //画布上画视频,需要动态地获取它,一帧一帧地画出来 var times = setInterval(function(){ context.drawImage(video, 0, 0, that.winWidth, that.winHeight); that.gif.addFrame(context, { copy: true }); if(that.gifSetTime == false){ clearInterval(times); } }, 200); },
九、步骤七所说的this.videoEnded方法。视频播放完,通过gif.js将图片堆叠的动态图渲染出来:
//视频播放完 videoEnded(){ this.gifSetTime = false; console.log("视频播放完毕!") this.gif.render(); },
十、步骤七所说的that.convertBase64UrlToFile方法。将gif.js生成的Blob文件转换成File格式:
//blob to file convertBase64UrlToFile(blob) { var d = new Date().getTime(); var type = 'image/gif' return new File([blob],"fileGif-" + d + '.gif', {type:type}); },
最后通过步骤七所说的that.uploadVideo方法,上传图片给服务器:
//上传视频 uploadVideo(file){ console.log("上传的视频文件", file) },
在这提供我的全部代码,Android的视频文件比较大所以做压缩,而IOS本身存在视频压缩,所以我这里做了区分
视频大小:{{videoSize}}视频时长:{{videoLength}}
“如何使用vue实现录制视频并压缩视频文件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
本文题目:如何使用vue实现录制视频并压缩视频文件
文章URL:http://pwwzsj.com/article/gpoocc.html