在互动直播或视频通话场景下,主播或视频通话用户可以使用屏幕共享功能,将自己的屏幕内容分享给观众或其他用户观看,以提高沟通效率。
屏幕共享在如下场景中应用广泛:
Windows 或 macOS 系统为每个屏幕分配一个唯一的 Display ID,为每个窗口分配一个唯一的 Window ID,由此,声网提供以下两种屏幕共享方案:
API 的调用时序如下图所示:
在实现屏幕共享前,请确保已在你的项目中实现基本的实时音视频功能。详见开始视频通话或开始互动直播。
本节介绍如何实现屏幕共享。
调用 getScreenCaptureSources
方法,获取需要共享屏幕的 Display ID 或窗口的 Window ID,示例代码如下:
const sources = engine.getScreenCaptureSources(
{ width: 1920, height: 1080 },
{ width: 64, height: 64 },
true
);
以下示例代码演示如何在 macOS/Windows 上通过 Display ID 共享指定屏幕:
engine.startScreenCaptureByDisplayId(
targetSource.sourceId,
{},
{
dimensions: { width, height },
frameRate,
bitrate,
captureMouseCursor,
excludeWindowList,
excludeWindowCount: excludeWindowList.length,
highLightWidth,
highLightColor,
enableHighLight,
}
);
以下示例代码演示如何在 macOS/Windows上 通过 Window ID 共享指定窗口:
engine.startScreenCaptureByWindowId(
targetSource.sourceId,
{},
{
dimensions: { width, height },
frameRate,
bitrate,
windowFocus,
highLightWidth,
highLightColor,
enableHighLight,
}
);
如果仅需发布屏幕共享流,在你的项目中添加如下代码:
agoraRtcEngine.joinChannel(token, channelId, uid, {
autoSubscribeAudio: true,
autoSubscribeVideo: true,
publishMicrophoneTrack: false,
publishCameraTrack: false,
clientRoleType: ClientRoleType.ClientRoleBroadcaster,
publishScreenTrack: true,
});
如需同时发布屏幕共享流和本地摄像头采集的视频流,在你的项目中添加如下代码:
// 调用 joinChannel 发布本地摄像头采集的视频流
agoraRtcEngine.joinChannel(token, channelId, uid, {
autoSubscribeAudio: true,
autoSubscribeVideo: true,
publishMicrophoneTrack: true,
publishCameraTrack: true,
clientRoleType: ClientRoleType.ClientRoleBroadcaster,
publishScreenTrack: false,
});
// 调用 joinChannelEx 发布屏幕共享流
agoraRtcEngine.joinChannelEx(
token2,
{ channelId, localUid: uid2 },
{
autoSubscribeAudio: false,
autoSubscribeVideo: false,
publishMicrophoneTrack: false,
publishCameraTrack: false,
clientRoleType: ClientRoleType.ClientRoleBroadcaster,
publishScreenTrack: true,
}
);
介绍更多相关信息和参考页面的链接。
视频共享编码属性 ScreenCaptureParameters
类中各参数的设置可能会影响计费。如果你将 dimensions
参数设为默认值,会按照 1920 × 1080 进行计费,详见屏幕共享流的分辨率。
我们在 GitHub 提供了一个开源的屏幕共享示例项目。你可以前往下载体验。