// 申請媒體權(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è)備，請升級(jí)或更換瀏覽器")
        );
      }
      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);
}

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

// 方式一：獲取對(duì)應(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();
});

function mediaErrorCaptured(error) {
  console.log("錯(cuò)誤信息name打印", error?.name);
  console.log("錯(cuò)誤信息message打印", error?.message);
  // 媒體權(quán)限失敗處理（通用 詳細(xì)）
  const nameMap = {
    AbortError: "操作中止",
    NotAllowedError: "打開設(shè)備權(quán)限不足，原因是用戶拒絕了媒體訪問請求",
    NotFoundError: "找不到滿足條件的設(shè)備",
    NotReadableError:
      "系統(tǒng)上某個(gè)硬件、瀏覽器或網(wǎng)頁層面發(fā)生的錯(cuò)誤導(dǎo)致設(shè)備無法被訪問",
    OverConstrainedError: "指定的要求無法被設(shè)備滿足",
    SecurityError: "安全錯(cuò)誤，使用設(shè)備媒體被禁止",
    TypeError: "類型錯(cuò)誤",
    NotSupportedError: "不支持的操作",
    NetworkError: "網(wǎng)絡(luò)錯(cuò)誤發(fā)生",
    TimeoutError: "操作超時(shí)",
    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() || "未知錯(cuò)誤"];
  }
  // todo
  alert(nameErrorMsg);
}

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