HTML5 使用 navigator.mediaDevices.getUserMedia 调用手机摄像头和 WebRTC
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Camera Example</title>
<style>
#video {
width: 640px;
height: 480px;
border: 1px solid black;
}
</style>
</head>
<body>
<video id="video" autoplay></video>
<script>
const video = document.getElementById('video');
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err) {
console.error("Error accessing camera: ", err);
});
} else {
alert("Your browser does not support getUserMedia API");
}
</script>
</body>
</html>这段代码使用HTML5和JavaScript调用用户设备的摄像头，并在网页上显示视频流。它首先检查navigator.mediaDevices.getUserMedia是否存在，如果存在，则尝试获取视频流，并将其设置为视频元素的源。如果获取失败，则在控制台中报告错误。这是一个简单的WebRTC应用程序的开始，可以进一步用于视频聊天、视频标记等功能。
评论已关闭