使用HTML5的getUserMedia API可以调用手机摄像头。
- 首先,在HTML文件中添加一个video标签,用于显示摄像头捕获的视频流。
- 使用JavaScript代码获取video标签并调用getUserMedia API获取用户授权访问摄像头。
- 在getUserMedia API的成功回调函数中,将视频流赋值给video标签的srcObject属性即可显示摄像头捕获的视频。
- 在HTML文件中添加video标签:
<video id="video" autoplay></video>
- 使用JavaScript代码获取video标签并调用getUserMedia API:
const video = document.getElementById("video");
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
// 成功获取用户授权访问摄像头
video.srcObject = stream;
})
.catch(error => {
// 用户拒绝访问摄像头或者其他错误
console.error(error);
});
- 在getUserMedia API的成功回调函数中,将视频流赋值给video标签的srcObject属性:
video.srcObject = stream;