实现屏幕共享

简介

通过 插件JS接口 可以在视频通话过程中实现屏幕共享，用户可以将自己的屏幕内容，以视频的方式分享给远端参会者，从而提升沟通效率，一般适用于一对一或多人视频通话、在线会议等在线金融场景。

• 视频会议场景中，参会者可以在会议中将本地的文件、数据、网页、PPT 等画面分享给其他与会者，让其他与会者更加直观的了解讨论的内容和主题。
• 在线金融场景中，可以通过屏幕共享或者窗口共享将风险揭示等画面展示给远端观看，远端也可将屏幕共享给本端观看，提升沟通效率。

1. 功能实现

通过调用 EnableScreenShare 打开屏幕共享选择窗口。

var webPlugin = new WebPlugin();

/**
	* @desc 打开关闭屏幕共享
	* @param {boolean} showUI - 是否显示界面选择
	* @param {boolean} enable - true开启，false关闭
  * @param {string} sourceType - 当ShowUI为false时有效，可配置"Desktop"/"Window", 为"Window"时，需要配置对应的windowId
  * @param {string} windowId - 窗口句柄，当SourceType 为"Window"时必填
	* @param {Object} area - 可选项，不传则共享整个"Desktop"/"Window"，格式如{top":10,bottom:20,"left":500,"right:"1000}，top：上边距，bottom：底部距离顶部的距离，left：左边距，right：右边距离左部的距离
	*/
// 桌面共享
function desktopShare() {
	// webAgent.enableDesktopShare(!SDK_STATE.enableDesktopShare);
	webAgent.EnableScreenShare(true, true, "", "", undefined);
}

// 区域共享
function areaShare(enable) {
	if (enable) {
		var videoSourceInput = document.getElementById('areaShareVideoSourceInput')
		var videoSource = videoSourceInput.value;
		var topInput = document.getElementById('areaShareTop')
		var top = parseInt(topInput.value);
		var bottomInput = document.getElementById('areaShareBottom')
		var bottom = parseInt(bottomInput.value);
		var leftInput = document.getElementById('areaShareLeft')
		var left = parseInt(leftInput.value);
		var rightInput = document.getElementById('areaShareRight')
		var right = parseInt(rightInput.value);
		if (videoSource.length <= 0) return;
		webAgent.EnableScreenShare(true, false, "Desktop", videoSource, {
			"Top": top,
			"Bottom": bottom,
			"Left": left,
			"Right": right
		});
	} else {
		var videoSourceInput = document.getElementById('areaShareVideoSourceInput')
		var videoSource = videoSourceInput.value;
		webAgent.EnableScreenShare(false, false, "Desktop", videoSource, undefined);
	}
	showAreaShare(false);
}

屏幕共享结果通过 OnScreenShareNotify 回调上报。

var webPlugin = new WebPlugin();

/**
  * @desc 桌面共享开始结束
  * @param {boolean} start - 是否开启
  * @param {string} shareRenderId - 渲染id
  */
webPlugin.OnScreenShareNotify(start, shareRenderId);

2. 无感屏幕共享

无感屏幕共享可以在通话前、通话中设置。通话结束设置失效。设置无感屏幕共享的效果是终端看不出在屏幕共享，服务端录制包括屏幕共享。

示例代码：

var webPlugin = new WebPlugin();

/**
 * @desc 是否设置无感屏幕共享。
 * 1. 功能介绍：无感屏幕共享是指屏幕共享不会显示屏幕共享工具条，从界面上看不出是在屏幕共享，对端也看不到屏幕共享。
 * 2. 作用的范围：产品通用功能，不包括项目定制功能。
 * 3. 使用：默认有感，屏幕共享前可以设置。屏幕共享时可以通过设置实现实时改变。
 * 4. 注意：通话结束后重置为有感。
 *
 * @param {boolean} isPerception - 是否有感
 *                        - false 无感
 *                        - ture 有感，默认是有感。
 */
webPlugin.EnableSenselessScreenShare(isPerception) ；

3. 设置屏幕共享采集属性

需要在开始屏幕共享之前设置屏幕共享相关属性，例如采集帧率和分辨率

示例代码：

/**
 * 设置屏幕共享采集属性
 * 在调用 {@link #EnableScreenShare} 接口开启屏幕共享前设置即可生效
 *
 * @param width     采集宽度，默认640
 * @param height    采集高度，默认360
 * @param frameRate 采集帧速率，默认10
 */
webPlugin.SetScreenCaptureProperty(width, height, frameRate);