js调用摄像头

<template>
<div>
  <el-button type="primary" @click="useVideo2">调用摄像头</el-button>
  <video id="video" ></video>
</div>
</template>

<script>
export default {
  name: 'useVideo',
  data(){

    return {
      video:'',

    }
  },
  mounted () {
  },
  methods:{
    useVideo2 () {
      this.video = document.getElementById('video')
      //兼容性写法,判断getUserMedia方法是否存在
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia;
      if(navigator.getUserMedia){
        //调用用户媒体设备, 访问摄像头
        this.getUserMedia({video : {width: 270, height: 150}}, this.success, this.error);
      } else {
        alert('不支持访问用户媒体');
      }

    },
    // 调用成功的方法
    success(stream) {
      //兼容webkit核心浏览器
      let CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      //将摄像头拍摄的视频赋值给viedeo的srcObject属性
      //src是视频文件,srcObject是实时流
      //摄像头是实时流
      this.video.srcObject = stream;
      //并播放
      this.video.play();
    },
    // 调用失败的方法
    error(error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    },

    //采集图片
    getUserMedia(constraints, success, error) {
      if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
      } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
      } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
      } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
      }
    },





  }
}
</script>

<style scoped>

</style>