拍照 in HTML5

Desktop

// MARK: ViewFinder

const player = document.createElement('video')

// MARK: Switch

const switchOn = document.createElement('button')
switchOn.addEventListener('click', (e) => {
	navigator.mediaDevices
  	.getUserMedia({ video: true })
		.then((stream) => player.srcObject = stream)
})

const switchOff = document.createElement('button')
switchOn.addEventListener('click', (e) => {
  player.srcObject.getVideoTracks().forEach((track) => track.stop())
})

// MARK: Shutter

const shutter = document.createElement('button')
shutter.addEventListener('click', (e) => {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  const { width, height } = player.getBoundingClientRect()
  context.drawImage(player, 0, 0, width, height)
  
  canvas.toBlob((blob) => {
  // NOTE: Export as `File`
    console.log(new File([blob], 'filename.png', {
      type: 'image/png'
    }))
  })
  
  // NOTE: Export as **base64**
  console.log(canvas.toDataURL())
})

Mobile

const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.setAttribute('capture', 'true') // value 可以為 `user` 或 `environment`
input.addEventListener('change', (e) => {
  // NOTE: Export as `File`
  console.log(e.target.files[0])
})

// MARK: Shutter

const shutter = document.createElement('button')
shutter.addEventListener('click', (e) => {
  input.click()
})

Reference

• https://developers.google.com/web/fundamentals/media/capturing-images
• https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia