> 文章列表 > 屏幕录制web

屏幕录制web

屏幕录制web

        //屏幕录制

        async screen(name) {

            let stream;

            await navigator.mediaDevices

                .getDisplayMedia({

                    video: true,

                })

                .then((e) => {

                    stream = e;

                    console.log("录制开启成功");

                })

                .catch((error) => {

                    this.$message({

                        message: webrtcError[error.name] || error.name + error.message,

                        type: "warning",

                    });

                });

            // 需要更好的浏览器支持

            const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")

                ? "video/webm; codecs=vp9"

                : "video/webm";

            let mediaRecorder = new MediaRecorder(stream, {

                mimeType: mime,

            });

            let chunks = [];

            mediaRecorder.addEventListener("dataavailable", function (e) {

                chunks.push(e.data);   //点击停止录制

                console.log(chunks, 'chunks');

            });

            var that = this

            mediaRecorder.addEventListener("stop", function () {

                let blob = new Blob(chunks, {

                    type: 'video/webm'

                });

                let url = URL.createObjectURL(blob);   //生成视频地址

                console.log('停止录制调用url', url);

                that.objVideo.paths = url

                if (url) {

                    addVideo(that.objVideo).then(({ data: res }) => {

                        console.log(res, 'ressssssssssssssssssssssssssssssssss123123123');

                    })

                }

                console.log('停止录制调用');

                // let a = document.createElement("a");

                // a.href = url;

                // a.download = name + ".mp4";

                // a.click();

            });

            // 必须手动启动

            mediaRecorder.start();

        },