视频转 canvas

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

12345678910111213
<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 标签

• https://addpipe.com/html-media-capture-demo/

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

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

视频流截图

• https://github.com/GoogleChromeLabs/imagecapture-polyfill
• https://developer.chrome.com/blog/imagecapture/

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

1234567891011
<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>