1，首先来说打开摄像头

html部分

<div style="height:300px;width:600px;">
    <video   id="video" width="300px" height="300px" autoplay="autoplay">
    </video>
    <canvas class="zp"  id="canvas" width="300px" height="300px">        
    </canvas>
</div>
<el-button type="primary"  @click="getVido" >打开摄像头</el-button>

在method定义方法

// 打开摄像头
        getVido(){
            this.yincang=true
                    let constraints = {
                        video: { width: 500, height: 500 },
                        //audio: true //开启麦克风
                    };
                    /*
                    这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
                    这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
                    返回的是一个Promise对象。
                    如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
                    如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
                    */
                    let _this=this;
                    let promise = navigator.mediaDevices.getUserMedia(constraints);
                    promise.then(function (MediaStream) {
                        // mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
                        // video.srcObject = MediaStream;
                        // console.log(mediaStreamTrack);
                        video.srcObject = MediaStream;
                        _this.MediaStreamTrack=typeof MediaStream.stop==='function'?MediaStream:MediaStream.getTracks()[0];
                        video.play();
                       
                    }).catch(function (PermissionDeniedError) {
                        console.log(PermissionDeniedError);
                    })
        },

以上是打开摄像头的功能

2，我们在加一个拍照功能

创建一个按钮

<el-button type="primary"  @click="takePhoto()" >拍照</el-button>

定义方法

// 注册拍照
takePhoto() {
   //获得Canvas对象
   let canvas = document.getElementById("canvas");
   let ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0, 300, 300);
   var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
            
    // console.log(photoSrc, 12121)
    this.form1.img=photoSrc
            
        },

3，关闭摄像头  在这里我踩了很多坑 百度查了下说h5 video 没有关闭摄像头的方法 只能刷新页面 我去尝试了下

我的代码

虽然可以关闭但是有一些小bug

我让他跳转到admin 但是他一直是跳过去然后又跳回当前页

然后我有去查了下 把问题解决了

先在method定义一个方法

cancalCloseVideo(){
            this.MediaStreamTrack && this.MediaStreamTrack.stop();
        }

然后当换页面的时候销毁掉当前页 用beforeDestroy钩子函数

// 关闭摄像头
    beforeDestroy(){
        this.cancalCloseVideo();
    }
}

在打开摄像头的时候一定别忘了加这一段

 最后就可以了