WebRTC媒體權限申請getUserMedia實例詳解
媒體權限申請
本文主要介紹了 getUserMedia
媒體權限申請的通用用法,包含權限申請配置、成功時媒體流預覽及銷毀處理、失敗時的通用提示處理等等
getUserMedia()
方法是用來申請麥克風和攝像頭的使用權限的。該方法存在兼容性問題,需要單獨處理,如下是比較通用的處理方式:
// 申請媒體權限的兼容性寫法 function getUserMedia(constrains, success) { if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (!getUserMedia) { return Promise.reject( new Error("瀏覽器不支持訪問用戶媒體設備,請升級或更換瀏覽器") ); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); }; } navigator.mediaDevices // 參數(shù)配置 .getUserMedia(constrains) // 成功回調 暴露出去 .then(success) // 失敗回調 待通用處理 .catch(mediaErrorCaptured); }
媒體流預覽與停止
getUserMedia()
方法的返回是一個 promise
對象,成功后會 resolve
一個 MediaStream
媒體流對象,包含了請求的媒體類型的軌道,如視頻軌道、音頻軌道。
一般我們會將返回的 MediaStream
媒體流賦值到 video
元素上,就可以實現(xiàn)視頻流的預覽了。
如下所示,同時申請了攝像頭和麥克風權限,當然,可以更改配置,單獨申請麥克風或者攝像頭權限
getUserMedia( { // 需要攝像頭權限,優(yōu)先使用前置攝像頭 environment-后置攝像頭 video: { facingMode: "user" }, // 需要麥克風權限,false則不需要 audio: true, }, // 成功的回調處理 (stream) => { // 將流數(shù)據(jù)存起來,之后停止流時需要 localStream = stream; // 流展示到video標簽中 localVideo.current.srcObject = stream; // 觸發(fā)播放:當然這個也是存在兼容性問題的 // 注意:有時候因為瀏覽器的安全限制,是需要與用戶進行交互才能自動播放的 localVideo.current.play(); } );
如下為 MediaStream
媒體流對象的打印展示,以及獲取音頻軌道(getAudioTracks
)、獲取視頻軌道 getVideoTracks
、獲取所有軌道(getTracks
)等方法的打印結果展示。
注意:MediaStream
的 active
為 true
時,才能正常的預覽展示;為 false
時不能正常加載到 video
元素上
一般預覽成功后,在頁面銷毀之前,需要進行關閉數(shù)據(jù)及清空流的操作
// 方式一:獲取對應的軌道數(shù)據(jù),進行清空操作 localStream.getAudioTracks()[0].stop(); localStream.getVideoTracks()[0].stop(); localVideo.current.srcObject = null; // 方式二:遍歷操作,關閉媒體軌道 localStream.getTracks().forEach((stream: MediaStreamTrack) => { stream.stop(); });
媒體申請拒絕處理
如果用戶拒絕了媒體的使用權限申請,則會 reject
回調一個錯誤對象。
因為錯誤處理是很通用的,所以直接可以通過一個通用函數(shù)進行處理,提高代碼的復用性。
function mediaErrorCaptured(error) { console.log("錯誤信息name打印", error?.name); console.log("錯誤信息message打印", error?.message); // 媒體權限失敗處理(通用 詳細) const nameMap = { AbortError: "操作中止", NotAllowedError: "打開設備權限不足,原因是用戶拒絕了媒體訪問請求", NotFoundError: "找不到滿足條件的設備", NotReadableError: "系統(tǒng)上某個硬件、瀏覽器或網頁層面發(fā)生的錯誤導致設備無法被訪問", OverConstrainedError: "指定的要求無法被設備滿足", SecurityError: "安全錯誤,使用設備媒體被禁止", TypeError: "類型錯誤", NotSupportedError: "不支持的操作", NetworkError: "網絡錯誤發(fā)生", TimeoutError: "操作超時", UnknownError: "因未知的瞬態(tài)的原因使操作失敗)", ConstraintError: "條件沒滿足而導致事件失敗的異常操作", }; // 媒體權限失敗處理(通用 簡單) const messageMap = { "permission denied": "麥克風、攝像頭權限未開啟,請檢查后重試", "requested device not found": "未檢測到攝像頭", "could not start video source": "無法訪問到攝像頭", }; let nameErrorMsg = nameMap[error.name]; if (!nameErrorMsg) { nameErrorMsg = messageMap[error.message.toLowerCase() || "未知錯誤"]; } // todo alert(nameErrorMsg); }
當然,IOS
和 Android
的權限拒絕報錯中 message
可能會不一樣,但是 name
相同,可以結合二者進行判斷
if ( error.message.toLowerCase() === "permission denied" || error.name == "NotAllowedError" ) { console.log(`麥克風、攝像頭權限未開啟,請檢查權限`); }
參考文檔:MediaDevices.getUserMedia()
以上就是WebRTC媒體權限申請getUserMedia實例詳解的詳細內容,更多關于WebRTC getUserMedia的資料請關注腳本之家其它相關文章!
相關文章
JS中的算法與數(shù)據(jù)結構之字典(Dictionary)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之字典(Dictionary),結合實例形式詳細分析了javascript數(shù)據(jù)結構中字典的概念、原理、定義與常見使用方法,需要的朋友可以參考下2019-08-08Webpack學習之動態(tài)import原理及源碼分析
這篇文章主要為大家介紹了Webpack學習之動態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-04-04初學js插入節(jié)點appendChild insertBefore使用方法
由于可見insertBefore()方法的特性是在已有的子節(jié)點前面插入新的節(jié)點但是兩種情況結合起來發(fā)現(xiàn)insertBefore()方法插入節(jié)點,是可以在子節(jié)點列表的任意位置。2011-07-07