【JavaScript】网页中调用摄像头-程序员社区

关注我们

微风软件

看以下代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Webcam Access Example</title>  
</head>  
<body>  
  
<video autoplay="true" id="videoElement"></video>  
  
<script>  
    // 确保在支持getUserMedia的浏览器中使用  
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {  
        // 请求访问摄像头  
        navigator.mediaDevices.getUserMedia({ video: true })  
        .then(function(stream) {  
            // 将视频流设置为video元素的源  
            var videoElement = document.querySelector("video");  
            videoElement.srcObject = stream;  
        })  
        .catch(function(err0r) {  
            console.log("Something went wrong!");  
        });  
    }  
</script>  
  
</body>  
</html>

注意事项：

浏览器兼容性：不是所有的浏览器都支持getUserMedia()。你应该检查你的目标浏览器是否支持这个API。
安全性：由于getUserMedia()涉及到用户隐私，因此它只能在安全的上下文中使用（例如，通过HTTPS提供的页面）。
用户权限：每次调用getUserMedia()时，都需要用户的明确许可。如果用户拒绝，你的代码应该能够适当地处理这种情况。
错误处理：你应该始终包含错误处理代码，以处理用户拒绝访问、浏览器不支持或其他潜在问题。