vue 录制视频并压缩视频文件的方法

html:

<template>
    <div class="page">
        <div>
            <div>{{errMsg}}</div>
            <hr/>
            <input ref="changeInput" type="file" accept="audio/*;capture=camcorder" @change="changeVideo" />
            <hr/>
            <div>
                <div>视频大小：{{videoSize}}</div>
                <div>视频时长：{{videoLength}}</div>
                <div>
                <video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video>
                <canvas id="canvas" :width="winWidth" :height="winHeight"></canvas>
                </div>
            </div>
        </div>
    </div>
</template>

javascript：

<script>
import Vue from 'vue'
import { setInterval, clearInterval } from "timers";
import GIF from "../../../../assets/js/gifjs/gif.js"
export default {
        data(){
            return {
                videoSize: '',
                videoSrc: '',
                videoLength: '',
                isAndroid: false,
                fileAndroid: {},
                winWidth: window.innerWidth,
                winHeight: window.innerHeight,
                gifSetTime: false,
                gif: '',
            }
        },
        mounted(){
        },
        methods:{
            //input文件走向
            changeVideo(e){
                var file = e.target.files[0];
                const video = document.getElementById('myvideo');

                if(file !== undefined){
                    //判断走向
                    if(this.isAndroid){
                    //视频开始播放
                    video.removeEventListener('play', this.videoPlay, false);
                    //视频播放完
                    video.removeEventListener('ended', this.videoEnded, false); 
                    this.androidFile(file);
                    }else{
                    this.iphoneFile(file);
                    }
                }
            },
            //IOS拍摄视频
            iphoneFile(file){
                const that = this;
                //视频字节大小
                this.videoSize = file.size;
                    console.log( file.size)
                var url = null ; 
                //file转换成blob
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                this.videoSrc = url;
                if(file.size < 2100000 && file.size > 500000){
                    console.log('开始上传');
                }else if(file.size >= 2100000){
                    this.errMsg='视频太大，请限制在10秒内'
                    console.log('视频太大，请限制在10秒内');
                }else{
                    this.errMsg='视频录制不能少于5秒'
                    console.log('视频录制不能少于5秒');
                }
            },
            //安卓拍摄视频
            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);
                    that.fileAndroid = that.convertBase64UrlToFile(blob);
                    that.uploadVideo(that.fileAndroid);
                });
            },
        }
}
</script>

摘自：https://www.jb51.net/article/144573.htm