JavaScript 调用相机并拍照

file形式访问

<body>
<button id="takePhoto">takePhoto</button>
<div id="app"></div>
<script>
  class Camera {
    constructor(root, width = 480, height = 320) {
      this.root = root
      this.width = width
      this.height = height
      this.video = null
      this.canvas = null
      this.canvasCtx = null
      this.stream = null
      this.photo = []
      this.init()
    }

    init() {
      const constraints = {
        video: {
          width: this.width,
          height: this.height
        }
      }
      navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
          this.mount(stream)
        })
        .catch(error => {
          console.log(error)
          alert('打开相机失败')
        })
    }

    mount(stream) {
      const video = document.createElement('video')
      const canvas = document.createElement('canvas')
      video.width = this.width
      video.height = this.height
      video.style.display = 'block'
      video.autoplay = 'autoplay'
      video.srcObject = stream
      canvas.width = this.width
      canvas.height = this.height
      this.video = video
      this.canvas = canvas
      this.canvasCtx = canvas.getContext('2d')

      if (!this.root) {
        document.body.appendChild(this.video)
        return false
      }
      if (typeof this.root === 'string') {
        this.root = document.querySelector(this.root)
      }
      this.root.appendChild(this.video)
    }

    takePhotos(showPhoto) {
      if (!this.canvas) return ''
      this.canvasCtx.drawImage(this.video, 0, 0, this.width, this.height)
      const base64 = this.canvas.toDataURL('image/jpg')
      if (showPhoto) {
        const wrapper = document.createElement('div')
        wrapper.style.position = 'relative'
        wrapper.style.display = 'inline-block'
        const image = new Image()
        image.style.display = 'block'
        image.src = base64
        const download = document.createElement('a')
        download.setAttribute('download', `${Date.now()}.jpg`);
        download.innerText = '下载照片';
        download.href = base64
        download.style.position = 'absolute'
        download.style.top = '0px'
        download.style.right = '0px'

        wrapper.appendChild(image)
        wrapper.appendChild(download)

        if (!this.root) {
          document.body.appendChild(wrapper)
        } else {
          this.root.appendChild(wrapper)
        }
      }
      this.photo.push(base64)
      return base64
    }
  }

  const camera = new Camera()

  const takePhoto = document.querySelector('#takePhoto')
  takePhoto.addEventListener('click', function () {
    camera.takePhotos(true)
  })

</script>
</body>
posted @ 2020-12-14 19:42  demo_you  阅读(675)  评论(0)  编辑  收藏  举报