内容共享

功能说明

通过小鱼易连Web SDK，可以实现多种类型的内容共享，包括：共享屏幕、应用程序、网页标签、采集系统声音。同时，SDK还支持以下功能：

暂停共享
恢复共享
分享中切换新的分享源
在共享时回显分享的内容画面

共享内容的状态变更将通过事件回调进行通知。

从v4.0版本开始，SDK重新实现了共享内容的架构逻辑，采用自定义Track轨道的方式进行采集和管理。具体由 ContentTrack 轨道模块负责处理，并且支持最新的采集配置参数，详见采集参数配置；

实现方法

开始内容共享

1、调用 XYRTCClient.createContentTrack 创建共享内容轨道实例；

let contentTrack = await XYClient.createContentTrack();

2、添加开始共享、停止共享、轨道错误事件监听

contentTrack.on('start-share-content', () => {
  // 推送 ContentTrack 模块
  XYClient.publish(contentTrack);
});

contentTrack.on('stop-share-content', () => {
  stopShareContent();
});

contentTrack.on('track-error', (e) => {
  const { msg = '' } = e;
  alert(msg);
});

监听 start-share-content 事件，用来获取是否允许开始共享，当遇到会控权限等原因被拒绝后，则收不到此信息；当收到此消息后，调用 XYRTCClient.publish 方法推送 ContentTrack 模块；
监听 stop-share-content 事件，用来获取结束共享内容消息，当收到此消息后，需要主动结束共享内容
监听 track-error 事件，用来获取轨道异常信息，例如采集共享内容流失败、权限拒绝等，可以给用户正确的提示

3、调用 ContentTrack.capture 方法开始采集共享视频流，并处理异常

try {
  const stream = await contentTrack.capture();
} catch (error) {
  stopShareContent();
}

调用完成后，浏览器开始执行选择分享内容源的操作：

选择一个合适的分享源后，SDK会开始采集视频流，同时推送给远端参会者进行接收画面；

结束内容共享

调用 ContentTrack.close 结束分享内容，并释放资源；

// 结束共享
const stopShareContent = async () => {
  if (contentTrack) {
    contentTrack.close();
    contentTrack = null;
  }
};

共享采集声音

调用 ContentTrack.capture 方法采集流数据时，可以提供一些列配置参数：ContentTrackConfig，其中配置 screenAudio 为 true，代表开启采集系统声音开关，启用后在选择分享源的Tab面板可以看到选择系统声音的配置：

暂停/恢复共享

小鱼易连Web SDK提供了暂停和恢复共享的功能，使用户在共享内容时能够灵活控制共享的状态。通过调用相应的接口，用户可以随时暂停正在进行的内容共享，并在需要时恢复共享。

通过调用 ContentTrack.pause 和 ContentTrac.resume 方法实现；

const pauseShareContent = async () => {
  if (contentTrack) {
    try {
      await contentTrack.pause();
    } catch (error) {
      console.log('暂停失败，请检查：', error);
    }
  }
};

const resumeShareContent = async () => {
  if (contentTrack) {
    try {
      await contentTrack.resume();
    } catch (error) {
      console.log('恢复失败，请检查：', error);
    }
  }
};

重新选择新的分享源

小鱼易连Web SDK允许用户在共享过程中重新选择新的分享源。用户可以灵活地在不同的内容源之间进行切换，例如从共享屏幕切换到共享应用程序或网页标签。

通过调用 ContentTrack.capture 方法采集新的视频源即可完成切换操作，切换过程中，无需停止上一次的分享；

// 切换新的分享源
const switchShareContent = async () => {
  try {
    const stream = await contentTrack.capture();
  } catch (error) {
    stopShareContent();
  }
};

Electron应用下共享内容

参考FAQ文档：是否支持Electron环境下共享内容？

示例代码

完整分享内容代码如下：

let contentTrack = null;

// 开始共享
const startShareContent = async () => {
  contentTrack = await XYClient.createContentTrack();

  contentTrack.on('start-share-content', () => {
    // 推送 ContentTrack 模块
    XYClient.publish(contentTrack);
  });

  contentTrack.on('stop-share-content', () => {
    // 停止分享
    stopShareContent();
  });

  contentTrack.on('track-error', (e) => {
    const { msg = '' } = e;
    alert(msg);
  });

  try {
    const stream = await contentTrack.capture();
  } catch (error) {
    stopShareContent();
  }
};

// 结束共享
const stopShareContent = async () => {
  if (contentTrack) {
    contentTrack.close();
    contentTrack = null;
  }
};

// 暂停共享
const pauseShareContent = async () => {
  if (contentTrack) {
    try {
      await contentTrack.pause();
    } catch (error) {
      console.log('暂停失败，请检查：', error);
    }
  }
};

// 恢复共享
const resumeShareContent = async () => {
  if (contentTrack) {
    try {
      await contentTrack.resume();
    } catch (error) {
      console.log('恢复失败，请检查：', error);
    }
  }
};

// 切换新的分享源
const switchShareContent = async () => {
  try {
    const stream = await contentTrack.capture();
  } catch (error) {
    stopShareContent();
  }
};

API 参考

2024-07-29 10:09:53

导出PDF文档