首页html调用摄像头代码

html调用摄像头代码

时间: 2024-10-26 19:01:22 浏览: 70

HTML本身并不直接支持调用浏览器内置的摄像头，因为这涉及到用户的隐私和安全问题，通常是由JavaScript通过Web API来控制。在现代浏览器中，主要使用`getUserMedia`方法，这是从W3C的MediaStream API引入的。以下是简单的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webcam Test</title> </head> <body> <button id="startCamera">Start Camera</button> <video id="cameraVideo" width="640" height="480" autoplay></video> <script> const startCameraButton = document.getElementById('startCamera'); const cameraVideo = document.getElementById('cameraVideo'); startCameraButton.addEventListener('click', function() { navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { cameraVideo.srcObject = stream; }) .catch(function(error) { console.error('Error accessing camera:', error); }); }); </script> </body> </html> ``` 在这个例子中，当你点击“开始相机”按钮时，会请求用户允许访问他们的摄像头，并将捕获到的视频流显示在`<video>`元素上。

阅读全文