JS调用摄像头

var _this = this
let a = JSON.stringify(navigator);
this.$nextTick(() => {
  var _this = this
  // 访问用户媒体设备的兼容方法
  const getUserMedia = (constrains, success, error) => {
	/*var video = _this.$refs['vd'];
	if (navigator.mediaDevices.getUserMedia) {
	  // 最新标准API
	  let myCons = {...constrains,video:true}
	  navigator.mediaDevices
		.getUserMedia(constrains)
		.then((stream)=>{
		  video.srcObject =stream
		  video.play();
		  _this.vdstate = true
		})
		.catch(error)
	} else if (navigator.webkitGetUserMedia) {
	  // webkit内核浏览器
	  navigator
		.webkitGetUserMedia(constrains)
		.then(success)
		.catch(error)
	} else if (navigator.mozGetUserMedia) {
	  // Firefox浏览器
	  navagator
		.mozGetUserMedia(constrains)
		.then(success)
		.catch(error)
	} else if (navigator.getUserMedia) {
	  // 旧版API
	  navigator
		.getUserMedia(constrains)
		.then(success)
		.catch(error)
	}
  }
  var video = this.$refs['vd']
  var canvas = this.$refs['cav']
  // debugger
  var context = canvas.getContext('2d')

  // 成功的回调函数
  function success(stream) {
	_this.vdstate = true
	// 兼容webkit内核浏览器
	var CompatibleURL = window.URL || window.webkitURL
	// 将视频流设置为video元素的源
	video.src = CompatibleURL.createObjectURL(stream)
	// 播放视频
	video.play()*/
	// H5调用电脑摄像头API
	navigator.mediaDevices.getUserMedia({
	  video: true
	}).then(success => {
	  // 摄像头开启成功
	  this.$refs['video'].srcObject = success
	  // 实时拍照效果
	  this.$refs['video'].play()
	}).catch(error => {
	  console.error('摄像头开启失败，请检查摄像头是否可用！')
	})
  }
  // 异常的回调函数
  function error(error) {
	console.log('访问用户媒体设备失败：', error.name, error.message)
  }
  if (
	navigator.mediaDevices.getUserMedia ||
	navigator.getUserMedia ||
	navigator.webkitGetUserMedia ||
	navigator.mozGetUserMedia
  ) {
	// 调用用户媒体设备，访问摄像头
	getUserMedia(
	  {
		video: {width:200,height:200}
	  },
	  success,
	  error
	)
	// this.getCompetence()
  } else {
	alert('你的浏览器不支持访问用户媒体设备')
  }
  // 获取图片
})

注释的部分自己研究一下 很简单