前端调用摄像头，并将拍到的内容渲染到页面上

最新推荐文章于 2024-09-11 14:07:35 发布

ZuckD

最新推荐文章于 2024-09-11 14:07:35 发布

阅读量798

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45817392/article/details/129673874

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该代码段展示了如何在浏览器中获取用户摄像头权限，然后播放视频流到video元素，并将摄像头画面绘制到canvas上，最后将canvas内容转换为图片显示在页面上。

摘要由CSDN通过智能技术生成

代码：

// 获取访问摄像头的权限！
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // 不添加 `{ audio: true }`，因为我们现在只想要视频
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}
// 获取页面上的div元素
const snapshotDiv = document.getElementById('snapshot');

// 获取摄像头画面的canvas元素
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

// 将摄像头画面渲染到canvas上
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

// 将canvas转换为图片
const img = new Image();
img.src = canvas.toDataURL();

// 将图片渲染到页面上的div元素上
snapshotDiv.appendChild(img);