實現一個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。