关于 h5 获取摄像头图像

关于 h5 获取摄像头图像

视频转 canvas

用于实时视频的快照, 仅拥有视频源分辨率, 通常低于相机的静止图像功能.

<canvas></canvas>
<script>
  new Promise(async () => {
    mediaStream = await navigator.mediaDevices.getUserMedia({video: true})
    imageCapture = new ImageCapture(mediaStream.getVideoTracks()[0])
    imageBitmap  = await imageCapture.grabFrame()

    canvas = document.querySelector('canvas')
    canvas.width = imageBitmap.width;
    canvas.height = imageBitmap.height;
    canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
  })
</script>

html 标签

调用相机, 目前仅移动端有限的支持.

<input type="file" name="image" accept="image/*" capture>

视频流截图

使用最高可用的摄影相机分辨率.

<img />
<script>
  new Promise(async () => {
    mediaStream = await navigator.mediaDevices.getUserMedia({video: true})
    imageCapture = new ImageCapture(mediaStream.getVideoTracks()[0])
    url =  URL.createObjectURL(await imageCapture.takePhoto())

    img = document.querySelector('img');
    img.src = url
  })
</script>

参考

​
posted @ 2022-05-13 15:02  程序媛李李李李蕾  阅读(405)  评论(1)  编辑  收藏  举报