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);
  });
相关推荐
Daniel李华8 小时前
echarts使用案例
android·javascript·echarts
北原_春希8 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS8 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊8 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜8 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive8 小时前
Vue3使用ECharts
前端·javascript·echarts
竹秋…8 小时前
echarts自定义tooltip中的内容
前端·javascript·echarts
宝贝露.8 小时前
Axure引入Echarts图无法正常显示问题
前端·javascript·echarts
人良爱编程8 小时前
Hugo的Stack主题配置记录03-背景虚化-导航栏-Apache ECharts创建地图
前端·javascript·apache·echarts·css3·html5
来颗仙人掌吃吃8 小时前
解决Echarts设置宽度为100%发现宽度变为100px的问题(Echarts图标宽度自适应问题)
前端·javascript·echarts