欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

WebRTC媒體權限申請getUserMedia實例詳解

 更新時間:2022年11月15日 09:53:26   作者:時光足跡  
這篇文章主要為大家介紹了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)等方法的打印結果展示。

注意:MediaStreamactivetrue 時,才能正常的預覽展示;為 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);
}

當然,IOSAndroid 的權限拒絕報錯中 message 可能會不一樣,但是 name 相同,可以結合二者進行判斷

if (
  error.message.toLowerCase() === "permission denied" ||
  error.name == "NotAllowedError"
) {
  console.log(`麥克風、攝像頭權限未開啟,請檢查權限`);
}

參考文檔:MediaDevices.getUserMedia()

以上就是WebRTC媒體權限申請getUserMedia實例詳解的詳細內容,更多關于WebRTC getUserMedia的資料請關注腳本之家其它相關文章!

相關文章

  • js基于canvas實現(xiàn)時鐘組件

    js基于canvas實現(xiàn)時鐘組件

    這篇文章主要介紹了js基于canvas實現(xiàn)時鐘組件的方法,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2021-02-02
  • JS顯示表格內指定行html代碼的方法

    JS顯示表格內指定行html代碼的方法

    這篇文章主要介紹了JS顯示表格內指定行html代碼的方法,涉及javascript獲取行及innerHTML屬性的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • JS中的算法與數(shù)據(jù)結構之字典(Dictionary)實例詳解

    JS中的算法與數(shù)據(jù)結構之字典(Dictionary)實例詳解

    這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之字典(Dictionary),結合實例形式詳細分析了javascript數(shù)據(jù)結構中字典的概念、原理、定義與常見使用方法,需要的朋友可以參考下
    2019-08-08
  • JS回調函數(shù)深入理解

    JS回調函數(shù)深入理解

    這篇文章主要介紹了JS回調函數(shù),結合實例形式深入分析了js回調函數(shù)的概念、原理、使用方法及相關操作注意事項,需要的朋友可以參考下
    2019-10-10
  • Webpack學習之動態(tài)import原理及源碼分析

    Webpack學習之動態(tài)import原理及源碼分析

    這篇文章主要為大家介紹了Webpack學習之動態(tài)import原理及源碼分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • 深入探尋javascript定時器

    深入探尋javascript定時器

    這篇文章主要介紹了深入探尋javascript定時器,十分的詳盡,十分全面,需要的朋友可以參考下
    2015-01-01
  • JavaScript中的類繼承

    JavaScript中的類繼承

    JavaScript一種沒有類的,面向對象的語言,它使用原型繼承來代替類繼承。
    2010-11-11
  • js中作用域的實例解析

    js中作用域的實例解析

    本文主要通過幾個實例對js中作用域進行詳細解析,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • 初學js插入節(jié)點appendChild insertBefore使用方法

    初學js插入節(jié)點appendChild insertBefore使用方法

    由于可見insertBefore()方法的特性是在已有的子節(jié)點前面插入新的節(jié)點但是兩種情況結合起來發(fā)現(xiàn)insertBefore()方法插入節(jié)點,是可以在子節(jié)點列表的任意位置。
    2011-07-07
  • js判斷一點是否在一個三角形內

    js判斷一點是否在一個三角形內

    判斷一個點是否在一個三角行內的代碼
    2008-02-02

最新評論