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

媒体流预览与停止

getUserMedia()方法的返回是一个 promise 对象,成功后会 resolve 一个 MediaStream 媒体流对象,包含了请求的媒体类型的轨道,如视频轨道、音频轨道。

一般我们会将返回的 MediaStream 媒体流赋值到 video 元素上,就可以实现视频流的预览了。

如下所示,同时申请了摄像头和麦克风权限,当然,可以更改配置,单独申请麦克风或者摄像头权限

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

如下为 MediaStream 媒体流对象的打印展示,以及获取音频轨道(getAudioTracks)、获取视频轨道 getVideoTracks、获取所有轨道(getTracks)等方法的打印结果展示。

注意:MediaStreamactivetrue 时,才能正常的预览展示;为 false 时不能正常加载到 video 元素上

一般预览成功后,在页面销毁之前,需要进行关闭数据及清空流的操作

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

媒体申请拒绝处理

如果用户拒绝了媒体的使用权限申请,则会 reject 回调一个错误对象。

因为错误处理是很通用的,所以直接可以通过一个通用函数进行处理,提高代码的复用性。

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);
}

当然,IOSAndroid 的权限拒绝报错中 message 可能会不一样,但是 name 相同,可以结合二者进行判断

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

参考文档:MediaDevices.getUserMedia()

以上就是WebRTC媒体权限申请getUserMedia实例详解的详细内容,更多关于WebRTC getUserMedia的资料请关注脚本之家其它相关文章!

相关文章

  • js基于canvas实现时钟组件

    js基于canvas实现时钟组件

    这篇文章主要介绍了js基于canvas实现时钟组件的方法,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2021-02-02
  • JS显示表格内指定行html代码的方法

    JS显示表格内指定行html代码的方法

    这篇文章主要介绍了JS显示表格内指定行html代码的方法,涉及javascript获取行及innerHTML属性的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JS中的算法与数据结构之字典(Dictionary)实例详解

    JS中的算法与数据结构之字典(Dictionary)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之字典(Dictionary),结合实例形式详细分析了javascript数据结构中字典的概念、原理、定义与常见使用方法,需要的朋友可以参考下
    2019-08-08
  • JS回调函数深入理解

    JS回调函数深入理解

    这篇文章主要介绍了JS回调函数,结合实例形式深入分析了js回调函数的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
    2019-10-10
  • Webpack学习之动态import原理及源码分析

    Webpack学习之动态import原理及源码分析

    这篇文章主要为大家介绍了Webpack学习之动态import原理及源码分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 深入探寻javascript定时器

    深入探寻javascript定时器

    这篇文章主要介绍了深入探寻javascript定时器,十分的详尽,十分全面,需要的朋友可以参考下
    2015-01-01
  • JavaScript中的类继承

    JavaScript中的类继承

    JavaScript一种没有类的,面向对象的语言,它使用原型继承来代替类继承。
    2010-11-11
  • js中作用域的实例解析

    js中作用域的实例解析

    本文主要通过几个实例对js中作用域进行详细解析,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 初学js插入节点appendChild insertBefore使用方法

    初学js插入节点appendChild insertBefore使用方法

    由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
    2011-07-07
  • js判断一点是否在一个三角形内

    js判断一点是否在一个三角形内

    判断一个点是否在一个三角行内的代码
    2008-02-02

最新评论