WebRTC媒体权限申请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
    // 参数配置
    .getUserMedia(constrains)
    // 成功回调 暴露出去
    .then(success)
    // 失败回调 待通用处理
    .catch(mediaErrorCaptured);
}

getUserMedia(
  {
    // 需要摄像头权限，优先使用前置摄像头 environment-后置摄像头
    video: { facingMode: "user" },
    // 需要麦克风权限，false则不需要
    audio: true,
  },
  // 成功的回调处理
  (stream) => {
    // 将流数据存起来，之后停止流时需要
    localStream = stream;
    // 流展示到video标签中
    localVideo.current.srcObject = stream;
    // 触发播放：当然这个也是存在兼容性问题的
    // 注意：有时候因为浏览器的安全限制，是需要与用户进行交互才能自动播放的
    localVideo.current.play();
  }
);

// 方式一：获取对应的轨道数据，进行清空操作
localStream.getAudioTracks()[0].stop();
localStream.getVideoTracks()[0].stop();
localVideo.current.srcObject = null;
// 方式二：遍历操作，关闭媒体轨道
localStream.getTracks().forEach((stream: MediaStreamTrack) => {
  stream.stop();
});

function mediaErrorCaptured(error) {
  console.log("错误信息name打印", error?.name);
  console.log("错误信息message打印", error?.message);
  // 媒体权限失败处理（通用 详细）
  const nameMap = {
    AbortError: "操作中止",
    NotAllowedError: "打开设备权限不足，原因是用户拒绝了媒体访问请求",
    NotFoundError: "找不到满足条件的设备",
    NotReadableError:
      "系统上某个硬件、浏览器或网页层面发生的错误导致设备无法被访问",
    OverConstrainedError: "指定的要求无法被设备满足",
    SecurityError: "安全错误，使用设备媒体被禁止",
    TypeError: "类型错误",
    NotSupportedError: "不支持的操作",
    NetworkError: "网络错误发生",
    TimeoutError: "操作超时",
    UnknownError: "因未知的瞬态的原因使操作失败)",
    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);
}

if (
  error.message.toLowerCase() === "permission denied" ||
  error.name == "NotAllowedError"
) {
  console.log(`麦克风、摄像头权限未开启，请检查权限`);
}