【WebRtc】获取媒体设备信息

程序员小菜鸡QAQ

已于 2023-06-30 17:43:34 修改

阅读量237

点赞数

分类专栏： WebRtc 文章标签： webrtc 媒体 javascript

于 2023-03-10 16:17:55 首次发布

本文链接：https://blog.youkuaiyun.com/Java_Wxlin/article/details/129445086

版权

WebRtc 专栏收录该内容

2 篇文章

订阅专栏

该代码段用于初始化并加载当前浏览器支持的音视频设备信息，包括音频输入、音频输出和视频输入设备。如果浏览器不支持navigator.mediaDevices接口，将显示警告通知。通过enumerateDevices方法获取设备列表，并过滤掉已添加的设备，将新设备添加到相应数组中。加载完成后，会关闭加载指示器。如果在枚举设备时出现错误，会调用handleError函数进行处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载设备信息页面

加载完设备信息页面

Code

 /**
     * 加载当前设备的音视频信息
     */
    initInnerLocalDevice() {
      let that = this;
      // 判断是否支持
      if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        that.$notify({
          title: '警告',
          message: '浏览器不支持获取媒体设备',
          type: 'warning'
        });
        return;
      }
      this.loading = true
      navigator.mediaDevices.enumerateDevices()
          .then(devices => {
            devices.forEach(function (device) {
              let obj = {id: device.deviceId, kind: device.kind, label: device.label}
              if (device.kind === 'audioinput') {
                if (that.audioInArray.filter(e => e.id === device.deviceId).length === 0) {
                  that.audioInArray.push(obj)
                }
              } else if (device.kind === 'audiooutput') {
                if (that.audioOutArray.filter(e => e.id === device.deviceId).length === 0) {
                  that.audioOutArray.push(obj)
                }
              } else if (device.kind === 'videoinput') {
                if (that.videoOutArray.filter(e => e.id === device.deviceId).length === 0) {
                  that.videoOutArray.push(obj)
                }
              }
            });
            this.loading = false
          }).catch(this.handleError);
    }