video js的录制

// 开始录制视频
        start() {
            //设置画布背景
            let canvasElement = document.createElement("canvas"); //  生成canvas;
            this.canvasContext = canvasElement.getContext("2d")
            this.canvasContext.fillStyle = "deepskyblue";
            this.canvasContext.fillRect(0, 0, 500, 522);

            //创建MediaRecorder,设置媒体参数
            this.stream = canvasElement.captureStream(60);
            this.recorder = new MediaRecorder(this.stream, {
                mimeType: "video/webm;codecs=vp8"
            });
            //收集录制数据
            this.recorder.ondataavailable = e => {
                this.chunks.push(e.data);
            };
            this.recorder.start(10);
            this.drawFrame();
        },
        drawFrame() {   // this.videoOk = $(`#video_${remoteStream.id_}`).get(0); //  获取video  视频id
            this.canvasContext.drawImage(this.videoOk, 0, 0, 300, 180);
            this.frameId = window.requestAnimationFrame(this.drawFrame);
        },
        // 停止视频录制
        stop() {
            this.recorder.stop();
            cancelAnimationFrame(this.frameId);
            this.download();
        },
                 // 下载   或   上传
        download() {
            let blob = new Blob(this.chunks);
            let url = window.URL.createObjectURL(blob);
            // debugger
            // let link = document.createElement("a");
            //      link.href = url;
            let formData = new FormData();
            let media = new File([blob], "mark.mp4");
            formData.append("file", media); // 变formData  进行上传
            upload(formData).then(response => {
                this.formData.evidenceVideo = response.fileName
            })

        },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容