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);
  });
相关推荐
香芋芋圆19 小时前
AI 冲击内卷之下,普通前端如何破局?WebGIS—— 低门槛突围赛道
前端·javascript·人工智能·学习·职场发展
INS_KF19 小时前
【编程笔记】成员函数中两个 const 的区别(const Data &getData() const;)
前端·javascript·笔记
宿67420 小时前
vue3-async
前端·javascript·vue.js
excel21 小时前
Nuxt + Twin CSS 中宽度超过屏幕时底部出现空白的原因与解决方案
前端·javascript
一个游离的指针1 天前
函数管道:消除深度嵌套调用
前端·javascript
柚yuzumi1 天前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙1 天前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
用户938515635071 天前
大模型记忆指南:从短时缓存到永久记忆,手把手带你吃透 LangChain Memory 管理
javascript·人工智能
xqchen1 天前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript
爱丶不疚1 天前
写给前端工程师的现代 Python 工程化最佳实践:从 pnpm 到 uv,从 CommonJS 到 src-layout
javascript·python·typescript