首页/文章/javascript

一个 API,带你打开前端摄像头之门

2024-09-18

666 字约 3 分钟

...

学习

当然不想了解就直接跳转看完整代码

获取设备列表 navigator.mediaDevices.enumerateDevices
获取视频流 navigator.mediaDevices.getUserMedia

需要注意的是,此功能仅在本地环境或者线上的安全环境（HTTPS）下可用

言归正传,在日常业务开发中,我们经常会遇到调用摄像头的场景

最常见的就是前端调用摄像头,然后生成一张照片,用于业务开发

常规开发

首先我们来看看常规开发模式

代码其实非常简单,直接上代码(已附上完整注释)

渲染视频流

const video = document.querySelector('#video')

navigator.mediaDevices.enumerateDevices().then((devices) => {
  
  const videoDevices = devices.filter(
    (device) => device.kind === 'videoinput'
  )
  if(!videoDevices) return console.error(`暂无摄像头`)
  deviceId = videoDevices[0].deviceId
  
  renderStream(deviceId)
})

function renderStream(deviceId){
  
  
  const constraints = {
    video:{
      width: 500,
      height: 500,
      deviceId
    }
  }
  navigator.mediaDevices.getUserMedia(constraints).then(stream => {
    
    video.srcObject = stream
    
    video.onloadedmetadata = () => {
      video.play()
    }
  })
  .catch((err) => {
    console.log(err.name + ': ' + err.message)
  })
}

拍照功能

常规的思路,我们肯定是截取 video 的某一帧,然后渲染到 canvas 上面,利用 canvas.toDataURL 转换成数据

function generateScreenshot(video) {
  
  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

  
  const imageSrc = canvas.toDataURL('image/png');

  
  return imageSrc;
}

其实也是因为笔者在真实项目开发中遇到的

canvas.drawImage 在 chromium 有个内存泄露的问题

详见 issues.chromium.org/issues/4047…

才进行了优化后的改造

注意点

vue 等单页面项目特别要注意的是,在 beforeDestroy 钩子函数我们需要把视频流给释放

beforeDestroy(){
  
  this.stream.getTracks().forEach(track => {
    track.enabled = false
    track.stop()
    stream.removeTrack(track)
  })
  
  video.srcObject = null
}

改用 useUserMedia hook

先上完整代码,便于后续阅读

完整代码

useUserMedia.js

function useUserMedia(constraints) {
  if (!navigator.mediaDevices) {
    return `navigator.mediaDevices is undefined`
  }
  return new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {
        
        const stop = () => {
          stream.getTracks().forEach(track => {
            track.enabled = false
            track.stop()
            stream.removeTrack(track)
          })
        }
        
        const track = stream.getVideoTracks()[0]
        const imageCapture = new ImageCapture(track)
        resolve({
          stream,
          stop,
          imageCapture
        })
      })
      .catch(reject)
  })
}

stop 方法就不做赘述了, 就是基于上面的封装了一下

主要介绍下 ImageCapture api

实验性的：这是一项实验性技术。在将其用于生产之前，请仔细查看浏览器兼容性表。

它可以从 MediaStreamTrack 中捕获静止帧（也就是我们所说的拍照功能）

下文会对拍照功能做详解

渲染视频流

有了这个 hook 我们渲染视频流就非常简单了

renderStream(deviceId){
  const constraints = {
    video:{
      width: 500,
      height: 500,
      deviceId
    }
  }
  const {stream,stop,imageCapture} = useUserMedia(constraints)
  this.imageCapture = imageCapture
  this.stop = stop 
  video.srcObject = stream
  video.onloadedmetadata = () => {
    video.play()
  }
}

beforeDestroy(){
  this.stop() 
}

拍照功能

重点来看下使用 hook 的拍照功能有多方便吧

function takePhoto(){
  this.imageCapture.takePhoto().then((blob) => {
    
    
    
  })
}

本期内容,主要还是代码,没有过多的花里胡哨的注释

相信彦祖们能够一眼秒懂

主要还是对于使用业务的 api 的使用和调研

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <video id="video">

  </video>

  <img width="200" height="200" id="img"/>

  <button>拍照</button>
</body>
<script>
function useUserMedia(constraints) {
  if (!navigator.mediaDevices) {
    return `navigator.mediaDevices is undefined`
  }
  return new Promise((resolve, reject) => {
    navigator.mediaDevices.getUserMedia(constraints)
      .then(stream => {
        
        const stop = () => {
          stream.getTracks().forEach(track => {
            track.enabled = false
            track.stop()
            stream.removeTrack(track)
          })
        }
        
        const track = stream.getVideoTracks()[0]
        const imageCapture = new ImageCapture(track)
        resolve({
          stream,
          stop,
          imageCapture
        })
      })
      .catch(reject)
  })
}

const video = document.querySelector('#video')
const img = document.querySelector('#img')

navigator.mediaDevices.enumerateDevices().then((devices) => {
  
  const videoDevices = devices.filter(
    (device) => device.kind === 'videoinput'
  )
  if(!videoDevices) return console.error(`暂无摄像头`)
  deviceId = videoDevices[0].deviceId
  
  renderStream(deviceId)
})
let _imageCapture = null
async function  renderStream(deviceId){
    const constraints = {
      video:{
        width:200,
        height:200,
        deviceId
      }
    }
    const {stream,imageCapture} = await useUserMedia(constraints)
    _imageCapture = imageCapture
    video.srcObject = stream
    video.onloadedmetadata = () => {
      video.play()
    }
}

document.querySelector('button').addEventListener('click',takePhoto)

function takePhoto(){
  _imageCapture.takePhoto().then((blob) => {
    const imgSrc = URL.createObjectURL(blob); 
    img.src = imgSrc
  })
}

</script>

</html>