用js写一个摄像头拍照代码
时间: 2023-05-21 17:03:34 浏览: 78
以下是用 JavaScript 写一个摄像头拍照的代码:
```javascript
// 获取摄像头视频流
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// 将视频流绑定到 video 标签上
var video = document.querySelector('video');
video.srcObject = stream;
video.play();
// 绑定拍照按钮事件
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
// 创建 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 将视频帧绘制到 canvas 上
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 将 canvas 转换为图片并下载
var link = document.createElement('a');
link.download = 'photo.png';
link.href = canvas.toDataURL();
link.click();
});
})
.catch(function(err) {
console.log(err);
});
```
这段代码会获取摄像头视频流,并将视频流绑定到一个 video 标签上。当用户点击拍照按钮时,会将视频帧绘制到一个 canvas 元素上,并将 canvas 转换为图片并下载。