vue-pc打开本地摄像头并对画面进行截图

在vuePc端打开本地摄像头。
实现效果，在pc端项目中打开本地摄像头，然后对此画面进行截屏，并以文件的格式上传到服务器。

• 1.打开本地摄像头

/**
获取方法1
*/
getVideo(){
            let video = this.$refs.video//获取要放视频的video标签节点
            if (navigator.mediaDevices.getUserMedia === undefined) { //判断当前设备是否有摄像设备
                navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先获取现存的getUserMedia(如果存在)
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia
                // 有些浏览器不支持，会返回错误信息
                // 保持接口一致
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
                }
                // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject)
                })
                }
            }
            var constraints = { audio: false, video:true }
            navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                // 旧的浏览器可能没有srcObject
                if ('srcObject' in video) {
                    video.srcObject = stream
                } else {
                // 避免在新的浏览器中使用它，因为它正在被弃用。
                    video.src = window.URL.createObjectURL(stream)
                }
                video.onloadedmetadata = function (e) {
                    video.play() //打开摄像头
                }
            }).catch(err => {
                console.log("报错123",err)
            })

        },

/*
获取方法2
*/

    getVideo(){
            navigator.getUserMedia(
                {
                    video: true,
                    audio: true
                },
                (stream)=> {
                      this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1]
                    //创建video元素
                    var video = document.getElementById("video");
                    console.log("video",video)
                    //指定src
                    if (window.URL) {
                        console.log("window.URL",window.URL)
                        try {
                            video.src = window.URL.createObjectURL(stream);
                        } catch (e) {

                            video.srcObject = stream;
                        }
                    } else {
                        video.src = stream;
                    }
                    //视频播放
                    video.play();
                },
                 (error)=> {
                    console.log("调用摄像头错误error",error);
                }
            ) 
        },

• 2.对画面进行截图

 crooper(){
                var video =document.getElementById("video")
                var canvas1 = document.getElementById('testImg');
                var context1 = canvas1.getContext('2d');
                context1.drawImage(video,0,0,500,500);
               /*  context1.fillStyle = "#ff0";
                // 设置水平对齐方式
                context1.textAlign = "center";
                // 设置垂直对齐方式
                context1.textBaseline = "middle";
                // 绘制文字（参数：要写的字，x坐标，y坐标）
                context1.fillText("要写的文字", 100, 100); */
                 var base64 = canvas1.toDataURL('images/png'); //将base64格式转为图片
                
                /* 将图片转为文件对象 */
                var arr = base64.split(',');
                var mime = arr[0].match(/:(.*?);/)[1];
                var bstr = window.atob(arr[1]); // 解码base-64编码的数据
                var n = bstr.length; 
                console.log("n",n)
                var u8arr = new Uint8Array(n);// 无符号整型数组
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                //转换成file对象
                this.crooperImg = new File([u8arr], 'filename', {type:mime});
        },