html5 webcam snippet

html5 webcam.js

    initVideo () {
      // init video
      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        console.log('video not support')
        return
      }
      navigator.mediaDevices.enumerateDevices()
        .then((xs) => {
          this.videoDevices = xs
            .filter((x) => x.kind.indexOf('video') >= 0)
            .map((x) => ({ deviceId: x.deviceId, label: x.label }))
          if (this.videoDevices[0]) {
            this.currentVideoDevice = this.videoDevices[0].deviceId
          }
        })
    },
    selectVideoDevice (deviceId) {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: deviceId } } })
          .then((stream) => {
            this.$refs.video.src = window.URL.createObjectURL(stream)
            this.$refs.video.play()
          })
      }
    },
    changeVideoDevice () {
      this.selectVideoDevice(this.currentVideoDevice)
    },
    capturePhoto () {
      const ctx = this.$refs.canvas.getContext('2d')
      // const w = this.$refs.video.videoWidth
      // const h = this.$refs.video.videoHeight
      const w = this.$refs.video.clientWidth
      const h = this.$refs.video.clientHeight
      this.$refs.canvas.width = w
      this.$refs.canvas.height = h
      ctx.drawImage(this.$refs.video, 0, 0, w, h)
      this.captured = true
    },