WebRTC中获取当前采集设备的deviceId

在做webRTC项目离不开切换摄像头,但是怎么拿到当前采集的设备id就成了问题,查阅资料后发现官方其实有提供相关方法,简单记录下;

通用玩法获取采集设备id
javascript 复制代码
// 请求访问用户媒体设备
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    // 获取视频轨道
    let videoTrack = stream.getVideoTracks()[0];
    if (videoTrack) {
      console.log('视频设备ID:', videoTrack.getSettings().deviceId);

      // 获取音频轨道
      let audioTrack = stream.getAudioTracks()[0];
      if (audioTrack) {
        console.log('麦克风设备ID:', audioTrack.getSettings().deviceId);
      }
    } else {
      console.log('未找到可用的视频设备');
    }
  })
  .catch((error) => {
    console.error('获取媒体流失败', error);
  });
相关推荐
mayaairi1 小时前
Vue2 组件通讯(三):全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen2 小时前
面试官问我:AI 都能写代码了,前端凭什么还值 25K
前端·javascript·人工智能
福大大架构师每日一题2 小时前
mediamtx v1.21.0 发布:Media-over-QUIC、RTSP、HLS、WebRTC 与安全能力全面升级
安全·webrtc
BillKu3 小时前
全局样式变量:CSS 自定义属性(--border-color)和SCSS 变量($border-color)的说明
javascript·css·scss
默_笙4 小时前
❗ 给金鱼装记忆(上):从白板到笔记本,AI 的短期记忆生存指南
前端·javascript
兜里只有三分钱~4 小时前
翻卡_3D 的仪式感,和三个让它穿帮的写法
javascript·css·3d
mayaairi5 小时前
Vue2 组件通讯(四):v-model、scoped样式、mixins与plugins
前端·javascript·vue.js
前端炒粉5 小时前
DOM 常用 API 速查表
开发语言·javascript·ecmascript
星云API技术支持5 小时前
企业微信二次开发:如何建立统一的错误处理、日志与请求追踪机制
javascript·企业微信·ruby
mayaairi8 小时前
Vue2 组件通讯(二):ref、自定义事件与provide/inject实战
前端·javascript·vue.js