HTML5如何调用摄像头？

在HTML5中，你可以使用navigator.mediaDevices.getUserMedia() API来调用用户的摄像头。这个API返回一个Promise，解析为MediaStream对象，你可以将这个对象设置为一个<video>元素的源，从而显示摄像头的实时视频流。

以下是一个简单的示例，演示如何使用getUserMedia()来调用摄像头并在网页上显示视频流：

<!DOCTYPE html>
<html>
<head>
    <title>调用摄像头示例</title>
</head>
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <script>
        // 检查浏览器是否支持getUserMedia API
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            // 调用getUserMedia API，请求摄像头权限
            navigator.mediaDevices.getUserMedia({ video: true })
                .then(function(stream) {
                    // 将获取到的视频流设置为<video>元素的源
                    var video = document.getElementById('video');
                    video.srcObject = stream;
                })
                .catch(function(error) {
                    // 处理错误，例如用户拒绝了权限请求
                    console.error("摄像头访问出错:", error);
                });
        } else {
            // 浏览器不支持getUserMedia API
            console.error("你的浏览器不支持getUserMedia API");
        }
    </script>
</body>
</html>

在这个示例中，我们首先检查浏览器是否支持getUserMedia API。如果支持，我们调用getUserMedia({ video: true })来请求摄像头权限。这个调用返回一个Promise，我们在.then()块中处理成功的情况，将获取到的视频流设置为<video>元素的源。如果出现错误，例如用户拒绝了权限请求，我们在.catch()块中处理这些错误。

posted @ 2025-01-19 06:04  王铁柱6  阅读(113)  评论(0)    收藏  举报