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

拼搏现实的明天。 2021-10-19 07:22 466阅读 0赞

**在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});
            },