实现一个web网页调用摄像头并实时显示在网页的video标签中的功能
这里有WebRTC官网，直接有更多功能的例子参考~~
还有在线的例子=>传送门
WebRTC相关的文档可以参考=>传送门
话不多说开始抛砖引玉
WebRTC是什么
WebRTC（Web实时通信）是一个免费的开源项目，它通过简单的应用程序编程接口（API）为Web浏览器和移动应用程序提供实时通信（RTC ）。它允许直接的对等通信，从而允许音频和视频通信在网页内运行，而无需安装插件或下载本机应用程序。由Apple，Google，Microsoft，Mozilla和Opera支持，WebRTC正在通过万维网联盟（W3C）和Internet工程任务组（IETF）进行标准化。
它的任务是“启用要为浏览器，移动平台和IoT设备开发的丰富，高质量的RTC应用程序，并允许它们全部通过一组通用协议进行通信 ”。
实现一个web网页调用摄像头并实时显示在网页的video标签中的功能
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>WebRTC</title>
<script src="./demo.js"></script>
</head>
<body>
<video id="videoElm" autoplay playsinline></video>
</body>
</html>
'use strict'
// 检测浏览器的支持情况
if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
throw new Error("enumerateDevices is not supported");
}
// 列出电脑支持的设备
navigator.mediaDevices.enumerateDevices().then(devices => {
console.log("devices", devices);
}).catch(error => {
throw error; //抛出异常
});
let openCamera = (videoId)=>{
/**
* 成功回调函数
* @param stream 视频流
*/
let success = (stream) => {
let videoElement = document.getElementById('videoElm');
mediaTrack = stream.getTracks()[0];
console.log(stream)
let CompatibleURL = window.URL || window.webkitURL;
try {
videoElement.src = CompatibleURL.createObjectURL(stream);
console.log(videoElement.src)
} catch (e) {
videoElement.srcObject = stream;
console.log(videoElement.srcObject)
}
videoElement.play();
};
let error = (error) => {
console.log('无法访问媒体设备', error);
}
let constraints = {
video: {
}
};
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
};
openCamera('videoElm');
需要注意的环境问题
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境：
localhost 域
开启了 HTTPS 的域
使用 file:/// 协议打开的本地文件
其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined。