智慧服务，成就美好体验 项目咨询

主页 > 服务与支持 > 开发平台 > 客户端SDK参考 > Web SDK > UIPlugin插件设置 UIPlugin插件设置

入门使用

UIPlugin插件设置

更新时间：2019-11-19

描述

UIPlugin提供了清晰的视频体验，在配置接口configure()中您可以自定义插件的显示状态，自定义按钮数量，个性化打造适合您的UI插件。

业务流程

图1 视频窗口设置流程图

  1. 调用resetNativeWndSize()接口设置视频窗口尺寸及联动时相对浏览器的偏移比例。

    代码示例：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    		 
    function setConfNativeWndSmall() { 
var wndSizeParam = { 
width : 480, 
height : 352, 
yOffsetRate : 0, 
xOffsetRate : 0, 
} 
client.resetNativeWndSize(wndSizeParam, (data)=>{}); 
} 
 
function setConfNativeWndLarge() { 
var wndSizeParam = { 
width : 1080, 
height : 720, 
yOffsetRate : 0, 
xOffsetRate : 0, 
} 
client.resetNativeWndSize(wndSizeParam, (data)=>{}); 
}
     

    参考文件：\usage\conference_usage.js。

  2. 调用uiPluginSetButtonState()接口设置UI按钮状态。

    代码示例：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    		 
    onPluginEvtClickAddMember:function(ret){
	var transfer2ConfParam = null;
	var memberList=prompt("Please enter the invitee number","")

	if(ret.info.videoType == 0){
		if(memberList!=undefined && memberList!=null && memberList!=""){
			var memberListArr = memberList.split(",");
			var memberListTemp = new Array();
			for (var i = 0; i < memberListArr.length; i++) {
				memberListTemp[i] = { number: memberListArr[i], name: "", smsPhone: "", email: "", 
                                autoInvite: 1, role: 0,extensions: "" };
			}
			transfer2ConfParam = { attendees: memberListTemp }	
		}else{
			transfer2ConfParam=null;
		}
		client.transfer2Conf(transfer2ConfParam);	
	}else{
		if(memberList!=undefined && memberList!=null && memberList!=""){
			var cloudecAttendeesArray = memberList.split(",");
			var cloudecAttendees = new Array();
			for (var i = 0; i < cloudecAttendeesArray.length; i++) {
				cloudecAttendees[i] = { number: cloudecAttendeesArray[i], name: cloudecAttendeesArray[i], role: 0 };
			}
	
			client.addAttendee(cloudecAttendees);
		}else{
			console.log("attendee number is empty");       
			return;
		}
	}
	client.uiPluginSetButtonState(3,1,(ret) => {});
},
     

    参考文件：\usage\conference_usage.js。

  3. 调用uiPluginShowSmallWindow()接口隐藏或显示小窗口。

    代码示例：

    1
2
3
    		 
    function uiPluginShowSmallWindow() {
	client.uiPluginShowSmallWindow((data)=>{});	
}
     

    参考文件：\usage\conference_usage.js。

  4. 调用uiPluginShowAnnotationTool()接口显示标注工具栏。

    代码示例：

    1
2
3
    		 
    function uiPluginShowAnnotationTool() {
	client.uiPluginShowAnnotationTool((data)=>{});	
}
     

    参考文件：\usage\conference_usage.js。

  5. 调用uiPluginSetWindowTitle()接口设置P2P窗口标题。
    代码示例： 
    1
2
3
4
    		 
    function uiPluginSetWindowTitle() {
	var uiWndTitle = document.getElementById("ui_window_title").value;
	client.uiPluginSetWindowTitle(uiWndTitle,(data)=>{});	
}
     

    参考文件：\usage\conference_usage.js。

  6. 调用uiPluginSetWindowSizeAbsolutePos()接口设置视频窗口的绝对位置。

    代码示例：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    		 
    function setConfNativeWndPosition() {
	var uiWndLeftTopX = document.getElementById("ui_window_left_top_x").value;
	var uiWndLeftTopY = document.getElementById("ui_window_left_top_y").value;
	var wndSizeAbsPosParam = {
		width : 0,
		height : 0,
		leftTopX : parseInt(uiWndLeftTopX),
		leftTopY : parseInt(uiWndLeftTopY),
	}
	client.uiPluginSetWindowSizeAbsolutePos(wndSizeAbsPosParam, (data)=>{});	
}
     

    参考文件：\usage\conference_usage.js。

  7. 调用uiPluginShowVideoWindow()接口显示/隐藏视频窗口。

    代码示例：

    1
2
3
    		 
    function uiPluginShowVideoWindow() {
	client.uiPluginShowVideoWindow((data)=>{});	
}
     

    参考文件：\usage\conference_usage.js。

注意事项

无。