趣味小教学-html获取摄像头权限

个人练习生xx

已于 2023-04-06 14:52:53 修改

阅读量1.1k

点赞数

文章标签： html 前端 javascript

于 2023-04-06 14:48:41 首次发布

本文链接：https://blog.csdn.net/m0_56235386/article/details/129989340

版权

该代码示例展示了如何利用HTML5的MediaCaptureAPI和getUserMedia方法获取摄像头视频流，并在网页中进行预览。用户同意授权后，视频会在video元素上自动播放。注意浏览器兼容性和权限问题。

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

话不多说，直接上代码

下面是一个基于HTML5的打开摄像头并显示预览的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>摄像头预览</title>
</head>
<body>
    <video id="preview" autoplay></video>

    <script>
        // 获取video元素
        var video = document.getElementById('preview');

        // 使用getUserMedia获取视频流
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false
        }).then(function(stream) {
            // 将视频流绑定到video元素上
            video.srcObject = stream;
            video.play();
        }).catch(function(error) {
            console.log('无法获取摄像头视频流：', error);
        });
    </script>
</body>
</html>

这段代码使用了HTML5的Media Capture API，通过调用navigator.mediaDevices.getUserMedia()方法来获取摄像头的视频流。它将视频流绑定到一个video元素上，并通过JavaScript启用自动播放功能。当用户打开这个网页时，他们就可以看到摄像头预览图像。

需要注意的是，不同浏览器的getUserMedia方法可能存在兼容性问题，所以你需要检查你的浏览器是否支持该方法。此外，当用户尝试访问摄像头时，浏览器会提示用户是否授权访问。如果用户拒绝了请求，则无法获取摄像头视频流。