快捷導(dǎo)航

WebRTC媒體權(quán)限申請getUserMedia實(shí)例詳解

更新時間：2022年11月15日 09:53:26 作者：時光足跡

這篇文章主要為大家介紹了WebRTC媒體權(quán)限申請getUserMedia實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

媒體權(quán)限申請

本文主要介紹了 getUserMedia 媒體權(quán)限申請的通用用法，包含權(quán)限申請配置、成功時媒體流預(yù)覽及銷毀處理、失敗時的通用提示處理等等

getUserMedia() 方法是用來申請麥克風(fēng)和攝像頭的使用權(quán)限的。該方法存在兼容性問題，需要單獨(dú)處理，如下是比較通用的處理方式：

// 申請媒體權(quán)限的兼容性寫法
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("瀏覽器不支持訪問用戶媒體設(shè)備，請升級或更換瀏覽器")
        );
      }
      return new Promise(function (resolve, reject) {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    };
  }
  navigator.mediaDevices
    // 參數(shù)配置
    .getUserMedia(constrains)
    // 成功回調(diào) 暴露出去
    .then(success)
    // 失敗回調(diào) 待通用處理
    .catch(mediaErrorCaptured);
}

媒體流預(yù)覽與停止

getUserMedia()方法的返回是一個 promise 對象，成功后會 resolve 一個 MediaStream 媒體流對象，包含了請求的媒體類型的軌道，如視頻軌道、音頻軌道。

一般我們會將返回的 MediaStream 媒體流賦值到 video 元素上，就可以實(shí)現(xiàn)視頻流的預(yù)覽了。

如下所示，同時申請了攝像頭和麥克風(fēng)權(quán)限，當(dāng)然，可以更改配置，單獨(dú)申請麥克風(fēng)或者攝像頭權(quán)限

getUserMedia(
  {
    // 需要攝像頭權(quán)限，優(yōu)先使用前置攝像頭 environment-后置攝像頭
    video: { facingMode: "user" },
    // 需要麥克風(fēng)權(quán)限，false則不需要
    audio: true,
  },
  // 成功的回調(diào)處理
  (stream) => {
    // 將流數(shù)據(jù)存起來，之后停止流時需要
    localStream = stream;
    // 流展示到video標(biāo)簽中
    localVideo.current.srcObject = stream;
    // 觸發(fā)播放：當(dāng)然這個也是存在兼容性問題的
    // 注意：有時候因?yàn)闉g覽器的安全限制，是需要與用戶進(jìn)行交互才能自動播放的
    localVideo.current.play();
  }
);

如下為 MediaStream 媒體流對象的打印展示，以及獲取音頻軌道(getAudioTracks)、獲取視頻軌道 getVideoTracks、獲取所有軌道(getTracks)等方法的打印結(jié)果展示。

注意：MediaStream 的 active 為 true 時，才能正常的預(yù)覽展示；為 false 時不能正常加載到 video 元素上

一般預(yù)覽成功后，在頁面銷毀之前，需要進(jìn)行關(guān)閉數(shù)據(jù)及清空流的操作

// 方式一：獲取對應(yīng)的軌道數(shù)據(jù)，進(jìn)行清空操作
localStream.getAudioTracks()[0].stop();
localStream.getVideoTracks()[0].stop();
localVideo.current.srcObject = null;
// 方式二：遍歷操作，關(guān)閉媒體軌道
localStream.getTracks().forEach((stream: MediaStreamTrack) => {
  stream.stop();
});

媒體申請拒絕處理

如果用戶拒絕了媒體的使用權(quán)限申請，則會 reject 回調(diào)一個錯誤對象。

因?yàn)殄e誤處理是很通用的，所以直接可以通過一個通用函數(shù)進(jìn)行處理，提高代碼的復(fù)用性。

function mediaErrorCaptured(error) {
  console.log("錯誤信息name打印", error?.name);
  console.log("錯誤信息message打印", error?.message);
  // 媒體權(quán)限失敗處理（通用 詳細(xì)）
  const nameMap = {
    AbortError: "操作中止",
    NotAllowedError: "打開設(shè)備權(quán)限不足，原因是用戶拒絕了媒體訪問請求",
    NotFoundError: "找不到滿足條件的設(shè)備",
    NotReadableError:
      "系統(tǒng)上某個硬件、瀏覽器或網(wǎng)頁層面發(fā)生的錯誤導(dǎo)致設(shè)備無法被訪問",
    OverConstrainedError: "指定的要求無法被設(shè)備滿足",
    SecurityError: "安全錯誤，使用設(shè)備媒體被禁止",
    TypeError: "類型錯誤",
    NotSupportedError: "不支持的操作",
    NetworkError: "網(wǎng)絡(luò)錯誤發(fā)生",
    TimeoutError: "操作超時",
    UnknownError: "因未知的瞬態(tài)的原因使操作失敗)",
    ConstraintError: "條件沒滿足而導(dǎo)致事件失敗的異常操作",
  };
  // 媒體權(quán)限失敗處理（通用 簡單）
  const messageMap = {
    "permission denied": "麥克風(fēng)、攝像頭權(quán)限未開啟，請檢查后重試",
    "requested device not found": "未檢測到攝像頭",
    "could not start video source": "無法訪問到攝像頭",
  };
  let nameErrorMsg = nameMap[error.name];
  if (!nameErrorMsg) {
    nameErrorMsg = messageMap[error.message.toLowerCase() || "未知錯誤"];
  }
  // todo
  alert(nameErrorMsg);
}

當(dāng)然，IOS 和 Android 的權(quán)限拒絕報(bào)錯中 message 可能會不一樣，但是 name 相同，可以結(jié)合二者進(jìn)行判斷

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

參考文檔：MediaDevices.getUserMedia()

以上就是WebRTC媒體權(quán)限申請getUserMedia實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于WebRTC getUserMedia的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: