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);
  });
相关推荐
毕设源码-赖学姐22 分钟前
【开题答辩全过程】以 基于VUE的环保网站设计为例,包含答辩的问题和答案
前端·javascript·vue.js
小J听不清42 分钟前
CSS 字体样式全解析:字体类型 / 大小 / 粗细 / 样式
前端·javascript·css·html·css3
进击的尘埃1 小时前
LangGraph.js 核心机制拆解:从状态管理到完整数据分析 Agent 实战
javascript
进击的尘埃1 小时前
Cursor Rules 配置指南:提示词工程与多模型切换
javascript
张元清1 小时前
React Hooks 性能优化:如何避免不必要的重新渲染
前端·javascript·面试
不甜情歌1 小时前
JavaScript this绑定规则:告别踩坑指南!
前端·javascript
小J听不清1 小时前
CSS 三种引入方式全解析:行内 / 内部 / 外部样式表(附优先级规则)
前端·javascript·css·html·css3
一步一个脚印一个坑2 小时前
用 APM 全链路追踪,29ms 内定位到 Docker 部署的 SSL 配置错误
javascript·后端·监控
aircrushin2 小时前
端到端AI决策架构如何重塑实时协作体验?
前端·javascript·后端
紫_龙2 小时前
最新版vue3+TypeScript开发入门到实战教程之DOM操作
javascript·vue.js·typescript