通话前设备管理

功能说明

在多人音视频通话前，设备的正确管理和配置是确保会议顺畅进行的关键。小鱼易连 Web SDK 提供强大的会前设备管理功能，支持以下操作：

获取设备列表（摄像头、麦克风、扬声器等）。
切换默认设备或指定设备。
测试设备的可用性。
实现本地视频流预览。
实时获取麦克风音量大小。
设备权限的检查与错误处理。
检测和处理设备权限变更。

通过这些功能，用户能够在会议开始前调试设备，确保会议过程的顺利进行和优质体验。

实现方法

小鱼易连 Web SDK 支持通过调用 XYRTC.createClient 方法创建

实现步骤

1、初始化

初始化日志和XYRTCClient模块

import XYRTC from '@xylink/xy-rtc-sdk';

let XYClient = null;

// 创建Logger模块
const logger = XYRTC.createLogger({
  dbName: 'XYRTC_SETTING_LOG',
  // 配置Scope字段，生成带有SETTING标示的日志数据
  scope: 'SETTING',
  // 最大存储10000条数据，覆盖存储
  maxSize: 10000,
});

// 创建客户端模块
XYClient = XYRTC.createClient({}, logger);

2、创建轨道并启动采集

let peopleTrack = null;

peopleTrack = await XYClient.createVideoAudioTrack();
// 初始化事件
initEvent();
await peopleTrack.capture();

// 监听事件
const initEvent = () => {
  // 监听设备权限变动
  peopleTrack.on('permission', (e) => {
    console.log('permission event: ', e);
  });

  // 监听设备变动
  peopleTrack.on('device', (e) => {
    console.log('device event: ', e);
  });

  // 监听错误
  peopleTrack.on('track-error', (e) => {
    console.log('track-error event: ', e);
  });
};

3、视频预览

通过getVideoStream获取视频流，并绑定到video元素上：

// 本地画面预览
const ele_preview_video = document.getElementById('preview_video');

const startPreviewVideo = () => {
  // 调用getVideoStream获取MediaStream流
  const videoMediaStream = XYClient.getVideoStream();

  if (videoMediaStream) {
    // 给video元素设置播放
    ele_preview_video.srcObject = videoMediaStream;
  }
};

// UI
<video id="preview_video" style="width: 200px; height: 100px" autoplay controls></video>

4、音量大小

// 音量大小
const ele_audio_level = document.getElementById('audio_level');
let interval = null;

const startAudioLevel = () => {
  interval = setInterval(async () => {
    const level = await peopleTrack.getAudioLevel();

    ele_audio_level.innerText = level;
  }, 100);
};

// UI
<div>
  <span>音量大小：</span>
  <span id="audio_level"></span>
</div>

5、切换设备

调用 VideoAudioTrack模块的 switchDevice 方法切换扬声器、麦克风、摄像头设备即可；

提示

在业务中缓存用户选择的设备 ID，入会时直接使用缓存配置设备，提升用户体验。

示例代码

上述介绍的完整的代码如下；

HTML内容：

<button id="startSetting">打开设置</button>
<button id="stopSetting">关闭设置</button>

<div id="preview">
  <div>
    <video id="preview_video" style="width: 200px; height: 100px" autoplay controls></video>
  </div>
  <div>
    <span>音量大小：</span>
    <span id="audio_level"></span>
  </div>
</div>

Javascript内容：

import XYRTC from '@xylink/xy-rtc-sdk';

// 本地画面预览
const ele_preview_video = document.getElementById('preview_video');
// 音量大小
const ele_audio_level = document.getElementById('audio_level');

let XYClient = null;
let peopleTrack = null;
let interval = null;

const startSetting = async () => {
  // 创建会前单独的Logger模块
  const logger = XYRTC.createLogger({
    dbName: 'XYRTC_SETTING_LOG',
    // 配置Scope字段，生成带有SETTING标示的日志数据
    scope: 'SETTING',
    // 最大存储10000条数据，覆盖存储
    maxSize: 10000,
  });

  XYClient = XYRTC.createClient({}, logger);

  peopleTrack = await XYClient.createVideoAudioTrack();
  initEvent();
  await peopleTrack.capture();

  startPreviewVideo();
  startAudioLevel();
};

const stopSetting = async () => {
  await XYClient.destroy();
  if (interval) {
    clearInterval(interval);
  }

  XYClient = null;
};

const startAudioLevel = () => {
  interval = setInterval(async () => {
    const level = await peopleTrack.getAudioLevel();
    console.log('level: ', level);

    ele_audio_level.innerText = level;
  }, 100);
};

const startPreviewVideo = () => {
  // 调用getVideoStream获取MediaStream流
  const videoMediaStream = XYClient.getVideoStream();

  if (videoMediaStream) {
    // 给video元素设置播放
    ele_preview_video.srcObject = videoMediaStream;
  }
};

const initEvent = () => {
  peopleTrack.on('permission', (e) => {
    console.log('permission event: ', e);
  });

  peopleTrack.on('device', (e) => {
    console.log('device event: ', e);
  });

  peopleTrack.on('track-error', (e) => {
    console.log('track-error event: ', e);
  });
};

document.getElementById('startSetting').addEventListener('click', startSetting);
document.getElementById('stopSetting').addEventListener('click', stopSetting);

提示

更多完整的会前设置功能参考：Demo示例程序，整体功能更丰富，UI更完善；

API参考

事件

方法

2025-01-10 17:02:59

导出PDF文档

事件	描述
device	设备变更事件，获取全量设备列表和新切换设备信息
permission	设备权限变动事件
track-error	监听轨道异常信息，例如音频/视频采集失败

方法	描述
createLogger	创建自定义日志Logger实例
createClient	创建会议客户端 XYRTCClient 模块，提供实时音视频通话框架能力
createVideoAudioTrack	创建摄像头和麦克风轨道实例
capture	采集麦克风和摄像头流，支持分别采集
getAudioLevel	获取本地麦克风实时音量大小，范围：0-100
getVideoStream	获取视频的流数据
switchDevice	切换麦克风/摄像头/扬声器设备
destroy	挂断会议，销毁资源