视频转 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>
