屏幕共享

通过 Juphoon RTC SDK 可以在视频通话过程中实现屏幕共享，坐席可以将自己的屏幕内容，以视频的方式分享给远端参会者（访客），从而提升沟通效率，一般适用于一对一或多人视频通话、在线会议等在线金融场景。

• 视频房间场景中，参会者可以在房间中将本地的文件、数据、网页、PPT 等画面分享给其他与会者，让其他与会者更加直观的了解讨论的内容和主题。

订阅/取消订阅屏幕共享的视频流

如果房间中有成员开启了屏幕共享，其他成员将收到 onCallPropertyChanged (opens new window) 的回调，并通过 getShareUserId (opens new window) 属性获得发起屏幕共享的用户 ID 。

/**
* 通话属性改变回调
* 
* @note
* 重点关注屏幕共享，即当{@link JRTCRoomPropChangeParam.screenShare screenShare} 属性为 true 时，去处理屏幕共享相关事件。<br>
* 可根据 {@link JRTCGuest.getShareStreamId getShareStreamId} 和 {@link JRTCGuest.getShareUserId getShareUserId} 方法进行屏幕共享画面的渲染和停止渲染。
* @param propChangeParam 通话改变的属性
*/
onCallPropertyChanged(propChangeParam: JRTCRoomPropChangeParam): void;

此时可以调用 requestScreenVideo (opens new window) 方法请求屏幕共享的视频流。

/**
 * 订阅屏幕共享的视频流
 *
 * @param videoSize  视频请求的尺寸，该参数目前不生效，请使用 #setRemoteMergeVideoProperty 来设置远端视频分辨率
 * @returns Promise
 */
public requestScreenVideo(videoSize: JRTCVideoSize): Promise<string | {streamUrl: string, mediaStream: MediaStream}>;

屏幕共享结束，SDK内部会取消订阅。

渲染/停止渲染共享画面

获取屏幕共享相关参数 shareUserId (opens new window) 和 shareStreamId (opens new window) 。

/**
 * 获取屏幕共享时的视频流ID，无屏幕共享时为 undefined
 *
 * 调用 JRTCMediaDevice startVideo 接口渲染通话中其他成员的屏幕共享画面时使用。
 * @returns 屏幕共享时的视频流ID
 */
public getShareStreamId(): string | undefined;

/**
 * 获取发起屏幕共享者的用户ID，无屏幕共享时为 undefined
 *
 * 可用来判断当前通话中是否有成员发起屏幕共享。
 * @returns 发起屏幕共享者的用户ID
 */
public getShareUserId(): string | undefined;

屏幕共享开始/结束均通过实现 onCallPropertyChanged (opens new window) 接口上报。

屏幕共享渲染和停止渲染参考8.2章节。 示例代码：

onCallPropertyChanged: (param)=> {
    console.debug('onCallPropertyChanged param: ', param);
    if (param.screenShare) {
        const shareUserId = guest.getShareUserId();
        console.log('shareUserId ', shareUserId);
        const userId = client.getUserId(); // 获取本端用户Id
        // 开启屏幕共享
        if (shareUserId) {
            if (shareUserId != userId) { // 不是本端开启的屏幕共享
                // 屏幕共享渲染
                guest.requestScreenVideo({width: 360, height: 640}).then((result) => {
                    console.log('requestScreenVideo result', result);
                    let userId = "screenShare";
                    if (result) {
                      const canvas = mediaDevice.startVideo(result.streamUrl, renderType, result.mediaStream, box);
                      screenShareCanvas = canvas; // 保存屏幕共享canvas
                    }
                });
            }
        } else { // 结束屏幕共享
            mediaDevice.stopVideo(screenShareCanvas);
        }
    }
}