瀏覽器API
瀏覽器使用設(shè)備的限制
需要使用https協(xié)議才能訪問設(shè)備诀黍，并且瀏覽器會彈窗詢問用戶是否允許使用設(shè)備髓抑，大多數(shù)瀏覽器在同一個域名下只要詢問一次就會記住咙崎，也有個別瀏覽器每次訪問都需要詢問(說的就是Safari)。
如果是http吨拍，只有在127.0.0.1和localhost下可以訪問設(shè)備褪猛。
瀏覽器獲取麥克風(fēng)
通過瀏覽器的API來獲取麥克風(fēng)
<audio id="localAudio" ></audio>
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({audio: true}).then((mediastream) => {
// 返回的是Mediastream，并不是audiotrack
let audioTrack = mediastream.getAudioTracks()[0];
// 如果需要播放羹饰，則可以直接使用auido播放
let audioElement = document.getElementById("localAudio");
audioElement.srcObject = mediastream;
audioElement.play().then(() => {
// 播放成功
}).catch((err) => {
// 播放失敗
})
}).catch((err) => {
// 獲取麥克風(fēng)失敗伊滋，可以通過 err.name 或者 err.message 來判斷錯誤原因，err并沒有返回錯誤錯誤碼
})
} else {
// 瀏覽器不支持獲取設(shè)備權(quán)限队秩，有可能是當前頁面不是https笑旺，也可能是當前瀏覽器不支持獲取設(shè)備權(quán)限
}
運行以上代碼，瀏覽器會彈出一個窗口馍资，詢問是否允許使用麥克風(fēng)
image.png
如果點擊允許筒主，會進入到then部分的代碼。禁止則會進入到catch中.
瀏覽器獲取攝像頭
通過瀏覽器的API來獲取攝像頭
<video id="localVideo" controls ></video>
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true}).then((mediastream) => {
// 返回的是Mediastream鸟蟹，并不是videotrack
let videoTrack = mediastream.getVideoTracks()[0];
// 如果需要播放乌妙，則可以直接使用auido播放
let videoElement = document.getElementById("localVideo");
videoElement.srcObject = mediastream;
videoElement.play();
}).catch((err) => {
// 獲取攝像頭失敗，可以通過 err.name 或者 err.message 來判斷錯誤原因建钥，err并沒有返回錯誤錯誤碼
})
} else {
// 瀏覽器不支持獲取設(shè)備權(quán)限藤韵，有可能是當前頁面不是https，也可能是當前瀏覽器不支持獲取設(shè)備權(quán)限
}
運行以上代碼熊经，瀏覽器會彈出一個窗口泽艘，詢問是否允許使用攝像頭
image.png
如果點擊允許，會進入到then部分的代碼镐依。禁止則會進入到catch中.
在video中我們能看到攝像頭捕獲的內(nèi)容
image.png
瀏覽器獲取屏幕共享
通過瀏覽器的API來獲取屏幕共享
<video id="localVideo" controls ></video>
if (navigator && navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({video: true}).then((mediastream) => {
// 返回的是Mediastream悉盆，并不是videotrack
let videoTrack = mediastream.getVideoTracks()[0];
// 如果需要播放，則可以直接使用auido播放
let videoElement = document.getElementById("localVideo");
videoElement.srcObject = mediastream;
videoElement.play();
}).catch((err) => {
// 獲取攝像頭失敗馋吗，可以通過 err.name 或者 err.message 來判斷錯誤原因焕盟，err并沒有返回錯誤錯誤碼
})
} else {
// 瀏覽器不支持獲取屏幕共享，有可能是當前頁面不是https，也可能是當前瀏覽器不支持屏幕共享
}
運行以上代碼脚翘，瀏覽器會彈出一個窗口灼卢，讓用戶選擇想要分享的內(nèi)容
image.png
選擇要分享的內(nèi)容然后點擊分享，會進入到then部分的代碼来农。取消則會進入到catch中.
瀏覽器支持
獲取設(shè)備權(quán)限
image.png
獲取屏幕共享
image.png
其他
如果你也是專注前端多媒體或者對前端多媒體感興趣鞋真，可以搜索微信公眾號"前端多媒體"
