HTML5调用摄像头和麦克风Demo
以下是一个简单的HTML5调用摄像头和麦克风的示例代码。这个示例使用了HTML5的navigator.mediaDevices.getUserMedia() API来访问设备的摄像头和麦克风。
<!DOCTYPE html>
<html>
<head>
<title>摄像头和麦克风 Demo</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="start">开始</button>
<script>
const video = document.getElementById('video');
const start = document.getElementById('start');
start.addEventListener('click', function() {
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err) {
console.error("出错了：" + err);
});
});
</script>
</body>
</html>在这个示例中，当用户点击"开始"按钮时，会触发navigator.mediaDevices.getUserMedia()函数，请求获取视频（摄像头）和音频（麦克风）的媒体流。如果用户同意，摄像头将开始捕捉视频，麦克风捕获声音，这些媒体流会实时显示在<video>元素中，并且可以被用户的浏览器进一步处理或展示。
评论已关闭