ref版的 摄像头 读取 因为id的时候，id不能重复 还要用时间戳，比较麻烦

 

<!--
* @description 摄像头vue版实例
* @fileName cameraObject.vue
* @author 彭成刚
* @date 2019/03/18 10:46:55
* @version V1.0.0
!-->
<template>
  <div id="cameraObject">
    <!-- <div style="width:505px;float:left;">

    </div> -->
    <video ref="video"
           width="480"
           height="320">
    </video>
    <Button type='primary'
            @click="handleCamera"
            icon="md-camera"
            style="margin-bottom:5px;">拍照</Button>
    <canvas ref="canvas"
            width="480"
            height="320"></canvas>
    <!-- <div style="width:100px;float:left;">

    </div>
    <div style="width:480px;float:left;">

    </div> -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: new Date().getTime().toString(),
      picIsHave: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
      // 调用用户媒体设备, 访问摄像头
      this.getUserMedia({ video: { width: 480, height: 320 } }, this.success, this.error)
    } else {
      alert('不支持访问用户媒体')
    }

    // document.getElementById('capture').addEventListener('click', function () {
    //   context.drawImage(video, 0, 0, 480, 320)
    // })
  },

  methods: {
    getPicBase64 () {
      // let canvas = document.getElementById('canvas')
      let canvas = this.$refs['canvas']
      let base64 = canvas.toDataURL('image/png', 1)
      let ret = {
        picIsHave: this.picIsHave,
        base64: base64
      }
      return ret
    },
    handleCamera () {
      this.picIsHave = true
      // let canvas = document.getElementById('canvas' + this.timer)
      let canvas = this.$refs['canvas']
      // let video = document.getElementById('video' + this.timer)
      let video = this.$refs['video']
      let context = canvas.getContext('2d')
      context.drawImage(video, 0, 0, 480, 320)
    },

    // 访问用户媒体设备的兼容方法
    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)
      }
    },
    success (stream) {
      // 兼容webkit核心浏览器
      // let CompatibleURL = window.URL || window.webkitURL
      // 将视频流设置为video元素的源
      // console.log('stream', stream)
      // console.info('success')

      // video.src = CompatibleURL.createObjectURL(stream);
      // let video = document.getElementById('video' + this.timer)
      let video = this.$refs['video']
      video.srcObject = stream
      video.play()
    },

    error (error) {
      console.log(`访问用户媒体设备失败${error.name}, ${error.message}`)
    }
  }
}

</script>
<style lang='less'>
#cameraObjectVideo {
  transition: rotate(90deg);
}
</style>