// 获取摄像头权限
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// 创建一个video元素来显示摄像头画面
var video = document.createElement('video');
video.srcObject = stream;
video.play();
// 创建一个canvas元素来显示拍照后的图片
var canvas = document.createElement('canvas');
// 有个获取不到 video.videoWidth 的问题
canvas.width = video.videoWidth || 500;
canvas.height = video.videoHeight || 300;
// 在video播放时,每隔一段时间截取一张图片
video.addEventListener('timeupdate', function() {
// 将当前视频帧绘制到canvas上
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
});
// 创建一个按钮来触发拍照
var button = document.createElement('button');
button.textContent = '拍照';
button.addEventListener('click', function() {
// 将canvas上的图片转换为base64编码的字符串
var dataURL = canvas.toDataURL('image/png');
// 将图片显示在页面上
var img = document.createElement('img');
img.src = dataURL;
document.body.appendChild(img);
});
// 将video、canvas和button添加到页面上
document.body.appendChild(video);
document.body.appendChild(canvas);
document.body.appendChild(button);
})
.catch(function(error) {
console.log(error);
});
javascript调用摄像头并截图
猜你喜欢
转载自blog.csdn.net/qq_41579327/article/details/130730479
今日推荐
周排行