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);
  });
相关推荐
万少5 分钟前
产品原型不用从零画 -GPT 出图,Gemini 生成 HTML
前端·javascript·后端
ZC跨境爬虫1 小时前
跟着 MDN 学JavaScript day_9:字符串方法实战挑战与解题思路
开发语言·前端·javascript
hewins2 小时前
NestJS 从入门到精通
javascript
柒和远方2 小时前
LeetCode 452. 用最少数量的箭引爆气球 —— 区间贪心经典:排序 + 扫描一箭穿心
javascript·python·算法
小小龙学IT2 小时前
Drizzle ORM:TypeScript 生态中冉冉升起的数据库工具链引言
javascript·数据库·typescript
旺王雪饼 www3 小时前
localStorage 和 sessionStorage区别与联系
服务器·前端·javascript
এ慕ོ冬℘゜4 小时前
【双月日期范围选择器】博客(可直接交作业 / 上线)
前端·javascript·交互·jquery
VidDown4 小时前
VidDown 使用介绍:一个免费、本地化的在线工具集
javascript·编辑器·音视频·视频编解码·视频
小牛itbull4 小时前
告别传统主题开发!ReactPress Theme Starter —— 用 Next.js 15 构建现代化无头博客
javascript·cms·react·wordpress·nextjs·reactpress·blog-theme
深蓝电商API5 小时前
逆向工程入门:从Chrome DevTools到JS混淆还原
前端·javascript·chrome·爬虫·chrome devtools