在这里,我为您起草了一段代码,这是一种比您正在尝试的更简单、更小的方法。我只是从视频元素中提取流并将其绘制到画布上。右键单击可下载图像。
注意:示例在StackOverflow中不起作用
<video id="player" controls autoplay></video>
<button id="capture">Capture</button>
<canvas id="canvas" width=320 height=240></canvas>
<script>
const player = document.getElementById('player');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');
const constraints = {
video: true,
};
captureButton.addEventListener('click', () => {
// Draw the video frame to the canvas.
context.drawImage(player, 0, 0, canvas.width, canvas.height);
});
// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});
</script>
如果需要,还可以根据需要进行一些编辑,例如:
-
选择要使用的相机
-
隐藏视频流
-
添加一种更简单的方法将照片下载到设备上
-
如果你有一张照片,你也可以添加一个功能,直接将照片上传到服务器上
