打开摄像头

html代码

          打开摄像头拍照

method定义方法

// 调用权限（打开摄像头功能）    startVido() {      let constraints = {        video: {width: 180, height: 120},        //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);      })    },

拍照：

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

关闭摄像头

// 关闭摄像头    closeVideo() {      this.MediaStreamTrack && this.MediaStreamTrack.stop();    },

记得销毁

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

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