一、打開攝像頭
打開攝像頭首先需要有一個html的video標簽：
id = "local-video"，是為了后續的js腳本調用這個對象autoplay是設置打開后自動播放，playsinline則是為了兼容移動端
<video id = "local-video" autoplay playsinline></video>
添加<script>腳本標簽：
- 需要定義一個
constraints對象，內部需要設置音頻和視頻的打開情況，比如這里只打開攝像頭，則：
//媒體限制
const constraints = {audio:false,video:true
};
- 通過
document的querySelector方法，返回對應標簽id的對象，比如這里要得到<video>標簽，就傳入"#local-video"，如果要得到對應的<button>標簽對象，則查找"#showVideoBtn"
const video = document.querySelector("#local-video");
document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);
- 要在點擊按鈕后，打開攝像頭，我們要實現下面三個回調函數：
handleSucess
function handleSuccess(stream){//document是內置全局變量，表示當前HTML文檔，這里是選擇對應的video對象const video = document.querySelector("#local-video"); //#local-video選擇對應的id，返回的是引用video.srcObject = stream; //把視頻流賦值給video對象
}function handleError(error){//console是內置全局變量，表示瀏覽器端的控制臺console.error("getUserMedia error:" + error); //控制臺打印錯誤
}
這個函數在打開攝像頭成功之后調用，會傳入一個stream對象，表示對應的媒體流，我們在這個回調函數中要將媒體流傳入上述<video>標簽對象，具體的方法是賦值<video>對象的srcObject屬性：
video.srcObject = stream;
handleError
function handleError(error){//console是內置全局變量，表示瀏覽器端的控制臺console.error("getUserMedia error:" + error); //控制臺打印錯誤
}
這個函數用于打開攝像頭失敗之后的回調函數，傳入錯誤信息，我們可以在控制臺打印對應的信息：
onOpenCamera
function onOpenCamera(e){//navigator也是內置全局變量，表示導航對象//mediaDevice是對應的媒體設備對象//getUserMedia是獲取用戶媒體的方法，返回一個Promise對象，promise執行成功后調用then函數，失敗觸發catch函數navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}
這個函數在我們按鈕點擊后觸發，是按鈕點擊的事件回調函數，傳入一個事件對象，我們可以在這個事件回調函數內部調用navigator對象的mediaDevices.getUserMedia方法，也就是先獲得媒體設備，然后在將我們的媒體限制、回調函數綁定，具體如下：
getUserMedia函數返回一個promise對象，這個對象執行完打開攝像頭任務后，會調用對應的函數- 如果任務成功，調用
then里面的回調函數 - 如果任務錯誤，調用
catch里面的回調函數
- 如果任務成功，調用
navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
最后，我們需要將按鈕的點擊事件回調函數綁定在showVideoBtn上
document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);
完整代碼如下：
<!DOCTYPE html><html> <body><video id = "local-video" autoplay playsinline></video><button id = "showVideoBtn"> 打開攝像頭</button><p>通過getUserMedia獲取視頻</p></body><script>//媒體限制const constraints = {audio:false,video:true};function handleSuccess(stream){//document是內置全局變量，表示當前HTML文檔，這里是選擇對應的video對象const video = document.querySelector("#local-video"); //#local-video選擇對應的id，返回的是引用video.srcObject = stream; //把視頻流賦值給video對象}function handleError(error){//console是內置全局變量，表示瀏覽器端的控制臺console.error("getUserMedia error:" + error); //控制臺打印錯誤}function onOpenCamera(e){//navigator也是內置全局變量，表示導航對象//mediaDevice是對應的媒體設備對象//getUserMedia是獲取用戶媒體的方法，返回一個Promise對象，promise執行成功后調用then函數，失敗觸發catch函數navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}//綁定按鈕的點擊事件，點擊后調用onOpenCamera函數document.querySelector("#showVideoBtn").addEventListener("click",onOpenCamera);</script></html>
Web頁面效果如下：
二、打開麥克風
打開麥克風和打開攝像頭類似，把對應的<video>標簽改為audio標簽，然后添加上controls模塊，這個模塊是添加一些暫停、聲音調節等功能
<audio id = "local-audio" autoplay controls></audio>
還需要要修改對應的媒體限制對象constraints，關閉video，打開audio
const constraints = {video: false,audio: true
}
其他部分和打開攝像頭保持一致
<!DOCTYPE html>
<html><body><audio id = "local-audio" autoplay controls></audio><button id = "showAudioBtn"> 打開麥克風</button><p>通過getUserMedia獲取音頻</p></body><!--類似video部分的js腳本--><script>const constraints = {video: false,audio: true}function handleSuccess(stream){const audio = document.querySelector("#local-audio");audio.srcObject = stream;}function handleError(error){console.error("getUserMedia error" + error);}function onOpenMicrophone(e){navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}showAudioBtn = document.querySelector("#showAudioBtn");showAudioBtn.addEventListener("click",onOpenMicrophone);</script></html>
Web頁面效果如下：
三、同時打開攝像頭和麥克風
同時打開攝像頭和麥克風，和打開攝像頭一致，唯一需要修改的就是媒體限制對象constraints，將視頻和音頻都設置為true
const constraints = {video: true,audio: true
}
完整代碼如下：
<!DOCTYPE html><html><body><video id = "local-video" autoplay playsinline></video><button id = "showVideoAudioBtn"> 打開攝像頭和麥克風</button><p>通過getUserMedia獲取攝像頭和麥克風</p></body><script>const constraints = {video: true,audio: true}function handleSuccess(stream){const video = document.querySelector("#local-video");video.srcObject = stream;}function handleError(error){console.error("getUserMedia error" + error);}function onOpenVideo_Audio (e){navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);}showVideoBtn = document.querySelector("#showVideoAudioBtn");showVideoBtn.addEventListener("click",onOpenVideo_Audio);</script></html>
更多資料：https://github.com/0voice
![Matrix Theory study notes[6]](http://pic.xiahunao.cn/Matrix Theory study notes[6])
