屏幕共享

功能简介

屏幕共享，是指在视频通话或互动直播过程中将屏幕内容以视频的方式共享给房间内的其他用户，支持共享整个屏幕、共享指定窗口或标签页。例如在教育场景中，教师需将桌面上的 PPT 展示给房间内的其他学生观看，提高沟通效率。

示例源码下载

请参考 下载示例源码 获取源码。

相关源码请查看 “src/Examples/Others/ScreenSharing” 目录下的文件。

前提条件

在使用屏幕共享前，请确保：

• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID 和 Server 地址，详情请参考 控制台 - 项目信息。
• 已在项目中集成 ZEGO Express SDK，并实现了基本的音视频推拉流功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。
• 当前浏览器支持无插件或有插件形式的屏幕共享。

使用步骤

（可选）安装屏幕共享插件

（可选）监听事件回调

zg.on('screenSharingEnded', (stream)=> {
    //do something
    console.warn('screen sharing end');

});

zg.on('screenSharingEnded', (stream)=> {
    //do something
    console.warn('screen sharing end');

});

创建屏幕共享流

调用 createZegoStream 方法创建屏幕共享流。

createZegoStream 接口参数 “source” 包含的对象 “screen”，可以对屏幕捕捉采集流进行相关配置。

设置音频共享

通过 “screen” 对象下的 “audio” 参数可以设置是否需要共享音频。参数取值如下：

Google Chrome 浏览器

在 Google Chrome 浏览器中，“audio” 设置为 “true” 后，还需要在浏览器的弹窗中勾选“分享音频”，才能将声音推送给对端用户。开发者在选择不同的共享内容时，浏览器弹窗中的“分享音频”选项是否展示，请参考如下：

在 Google Chrome 共享内容	macOS	Windows
整个屏幕	无“分享音频”选项。	有“分享音频”选项。 勾选此选项，整个电脑屏幕（包含其它 App）的声音都会被推送给对端用户，但不包括麦克风收录的声音。
窗口	无“分享音频”选项。
Google Chrome 标签页	有“分享音频”选项。 勾选此选项，只有选择的标签页中正在发声的媒体声音（不包含静音媒体）会被推送给对端用户。

注意

只有勾选了“分享音频”，才能将声音推送给对端用户，拉流方才会有声音。

Microsoft Edge 浏览器

在 Microsoft Edge 浏览器中，“audio” 设置为 “true” 后，还需要在浏览器的弹窗中勾选“共享音频”，才能将声音推送给对端用户。开发者在选择不同的共享内容时，浏览器弹窗中的“共享音频”选项是否展示，请参考如下：

在 Microsoft Edge 共享内容	macOS	Windows
整个屏幕	无“共享音频”选项。	有“共享音频”选项。 勾选此选项，整个电脑屏幕（包含其它 App）的声音都会被推送给对端用户，但不包括麦克风收录的声音。
窗口	无“共享音频”选项。
Microsoft Edge 标签页	有“共享音频”选项。 勾选此选项，只有选择的标签页中正在发声的媒体声音（不包含静音媒体）会被推送给对端用户。

注意

只有勾选了“共享音频”，才能将声音推送给对端用户，拉流方才会有声音。

Firefox 浏览器

在 Firefox 浏览器中，共享屏幕时，“audio” 设置为 “true” 后：

• 在 Windows 中，不支持分享屏幕中的声音（浏览器网页、其它 App 等的声音），但支持将麦克风收录到的声音推送给对端用户。
• 在 macOS 中，支持分享屏幕中的声音（浏览器网页、其它 App 等的声音）、以及麦克风收录到的声音。开发者可以在浏览器中进行屏幕共享时，选择允许打开麦克风等的权限，即可分享音频。

设置屏幕共享视频质量

通过 “screen” 对象下的 “videoQuality” 参数可以设置屏幕共享视频质量（分辨率、帧率和码率），该参数取值及含义如下：

const screenStream = await zg.createZegoStream({
    videoBitrate: 1500,
    screen: {
        audio: document.getElementById('isScreenAudio').value == 'yes' ? true : false,
        video: {
            quality: 4,
            frameRate: 15,
            width: document.getElementById('screenWidth').value * 1 || screen.width,
            height:  document.getElementById('screenHeight').value* 1 || screen.height
        }
    },
});

const screenStream = await zg.createZegoStream({
    videoBitrate: 1500,
    screen: {
        audio: document.getElementById('isScreenAudio').value == 'yes' ? true : false,
        video: {
            quality: 4,
            frameRate: 15,
            width: document.getElementById('screenWidth').value * 1 || screen.width,
            height:  document.getElementById('screenHeight').value* 1 || screen.height
        }
    },
});

推屏幕共享流

调用 startPublishingStream 方法将 createZegoStream 创建的屏幕共享流推送到 ZEGO 实时音视频云。当同时推多路流时，建议只推 1 路音频，防止出现回音。

const publisRes = zg.startPublishingStream(screenStreamId, screenStream);

const publisRes = zg.startPublishingStream(screenStreamId, screenStream);

观看远端屏幕共享

当屏幕共享流推送到 ZEGO 实时音视频云后，其他用户可以使用 startPlayingStream 接口拉取屏幕共享流。

销毁屏幕共享流

停止推流

若要销毁屏幕共享流，需要先调用 stopPublishingStream 方法停止推流，否则对端画面会卡住。

zg.stopPublishingStream(screenStreamId);

zg.stopPublishingStream(screenStreamId);

销毁屏幕共享流

停止推流后，需要及时调用 destroyStream 方法销毁屏幕共享流数据，释放被占用的资源。

zg.destroyStream(screenStream);

zg.destroyStream(screenStream);

相关文档

• 如何切换屏幕共享流和摄像头视频流？
• 如何解决 Web 平台屏幕共享的质量问题？