跳到主要内容

快速集成

本文主要介绍如何快速的将科达云视频会议(桌面浏览器) UISDK 集成到您的项目中,只要按照入下步骤进行配置,就可以完成 UISDK 的集成工作。

开发环境要求

  • Web开发IDE工具( 推荐Visual Studio Code )
  • 桌面浏览器( 推荐Chrome最新版本 )
  • 集成UISDK的项目需要 已登录云视讯平台( 可通过平台API实现登录功能 )

主要区域图

  • 会议外

会议外

图中标注说明(黄色框框与红色数字)

  • 会议内

会议内

图中标注说明(黄色框框与红色数字)

页面区域参数说明

头部工具栏

头部 头部

图中红色数字说明

  • 1.1 logo图片
  • 1.2 头部标题
  • 1.3 用户默认头像
  • 1.4 设置按钮图标
  • 1.5 退出按钮图标
  • 1.6 网络状态图标

数据实例及参数说明


topBar: {
type: 'customize', // 自定义样式头部
logoUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // logo background 值
logoLink: '/portal', // logo链接地址
appTitle: '摩云视讯', // 头部标题
appTitleLink: '/portal', // 头部标题链接
showUserInfo: true, // 是否显示用户信息
userDefaulteIcon: 'https://127.0.0.1/portal/static/images/avator.png?v=1', // 用户默认头像
showSettings: true, // 是否显示设置按钮
settingIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat",// 设置按钮图标
settingIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 设置按钮hover图标
showExit: true, // 是否显示退出按钮
exitIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 退出按钮图标
exitIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat"// 退出按钮hover图标
showMeetingTitle: true, // 是否显示会议标题
showJoinTime: true, // 是否显示加入会议时间
networkUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat" // 网络状态图标 background属性值
},


版权声明

版权声明

图中红色数字说明

  • 2.1 logo图片
  • 2.2 系统名称
  • 2.3 公司名称
  • 2.4 版权信息
  • 2.5 版本号
  • 2.6 地址

数据实例及参数说明


detail: {
// 版权声明页
type: 'customize', // -none 仅在topBar或showSettings配置不可用时 -default 使用skyforweb默认配置 -customize 自订参数
logoUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // logo地址
logoWidth: '', // logo宽度
systemModeAbbr: '', // 系统名称
companyName: '', // 版权公司
companyDomainName: '', // 版权信息
version: '', // 版本号
address: '', // 网站地址
},

会议列表

版权声明

图中红色数字说明

  • 3.1 会议列表标题
  • 3.2 会议室类型图标
  • 3.3 搜素框
  • 3.4 搜索图标

数据实例及参数说明


roomList: {
type: 'customize',
title: '会议室', // 会议列表标题
virtualIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //虚拟会议头像
inuseIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 正在召开会议头像
appointIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //预约会议头像
showSearch: false, // 是否显示搜索
searchBtnIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //搜索按钮图片
searchPlaceholder: '搜索会议名称/会议号码/发起人', //搜索默认值
showCreate: false, // 是否显示创建会议
},

主体视频区

版权声明

图中红色数字说明

  • 4.1 非会议中无显示内容时默认摄像头图片

数据实例及参数说明


page: {
type: 'customize', // -default 使用skyforweb默认配置 -customize 自订参数
logoIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 非会议中无显示内容时默认摄像头图片
logoWidth: '', // logo宽度 需带单位
logoHeight: '', // logo高度 需带单位
},

连接服务器配置

数据实例及参数说明


serve: {
type: 'customize', // -default 使用skyforweb默认配置 -customize 自订参数
hostname:location.host, //域名
protocol:'https', //协议
loginUrl: location.protocol + '//' + location.host, //登录路径
homeIrl:location.protocol + '//' + location.host //门户路径
},

底部工具栏

版权声明

图中红色数字说明

数据实例及参数说明


toolBar: {
type: 'customize',
microphone: {},// 不设置或设置为空,不显示
loudspeaker: {}, //不设置或设置为空,不显示标签
camera: {}, // 不设置或设置为空,不显示
terminalList: {}, // 不设置或设置为空,不显示
inviteInfo: {}, // 不设置或设置为空,不显示
share: {}, // 不设置或设置为空,不显示
exit: {}, // 不设置或设置为空,不显示
fullScreen: {},// 不设置或设置为空,不显示
device: {} // 不设置或设置为空,不显示
}

麦克风

数据实例及参数说明


microphone: {
type: 'default',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
icon1: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量1图标
icon2: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量2图标
icon3: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量3图标
icon4: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量4图标
icon5: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量5图标
icon6: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量6图标
icon7: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量7图标
icon8: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量8图标
icon9: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量9图标
icon10: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量10图标
iconHover:"url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover:"url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
errorIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态图标
label: '麦克风', // 不设置或设置为空,不显示标签
},

扬声器

数据实例及参数说明


loudspeaker: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
label: '', // 不设置或设置为空,不显示标签
},

摄像头

数据实例及参数说明

    
camera: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
errorIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态图标
errorIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态悬停图标
label: '' // 不设置或设置为空,不显示标签
},

共享

数据实例及参数说明

    
share: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 未分享状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 未分享状态悬浮图标
shareIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //分享状态图标
shareIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //分享状态悬浮图标
label: '' // 不设置或设置为空,不显示标签
}

全屏

数据实例及参数说明


fullScreen: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
fullScreenIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //全屏下图标
fullScreenIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //全屏下悬停图标
label: '', // 不设置或设置为空,不显示标签
}

退会

数据实例及参数说明

    
exit: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: ''
}

设备

数据实例及参数说明

    

device: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: '', // 不设置或设置为空,不显示标签
}

邀请信息

数据实例及参数说明

    
inviteInfo: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: "" // 不设置或设置为空,不显示标签
}

终端列表

数据实例及参数说明

    
terminalList: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
title: '与会方', // 标题
avatar: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //与会方头像
chairmanIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //管理方头像
speakerIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //发言方头像
vipIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //vip头像
setChairmanIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //设置管理方头像
MuteIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //哑音
MuteOnIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //取消哑音
label: '', // 不设置或设置为空,不显示标签
},

操作步骤

  1. 将UISDK main.js文件引入需要集成的html中

  1. 初始化UISDK,传入参数

参数完整示例代码

{
id: "root",
type: "customize",
setting: {
topBar: {
type: 'customize', // 自定义样式头部
logoUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // logo background 值
logoLink: '/portal', // logo链接地址
appTitle: '摩云视讯', // 头部标题
appTitleLink: '/portal', // 头部标题链接
showUserInfo: true, // 是否显示用户信息
userDefaulteIcon: 'https://127.0.0.1/portal/static/images/avator.png?v=1', // 用户默认头像
showSettings: true, // 是否显示设置按钮
settingIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat",// 设置按钮图标
settingIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 设置按钮hover图标
showExit: true, // 是否显示退出按钮
exitIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 退出按钮图标
exitIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat"// 退出按钮hover图标
showMeetingTitle: true, // 是否显示会议标题
showJoinTime: true, // 是否显示加入会议时间
networkUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat" // 网络状态图标 background属性值
},
detail: {
// 版权声明页
type: 'customize', // -none 仅在topBar或showSettings配置不可用时 -default 使用skyforweb默认配置 -customize 自订参数
logoUrl: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // logo地址
logoWidth: '', // logo宽度
systemModeAbbr: '', // 系统名称
companyName: '', // 版权公司
companyDomainName: '', // 版权信息
version: '', // 版本号
address: '', // 网站地址
},
page: {
type: 'customize', // -default 使用skyforweb默认配置 -customize 自订参数
logoIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 非会议中无显示内容时默认摄像头图片
logoWidth: '', // logo宽度 需带单位
logoHeight: '', // logo高度 需带单位
},
roomList: {
type: 'customize',
title: '会议室', // 会议列表标题
virtualIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //虚拟会议头像
inuseIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 正在召开会议头像
appointIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //预约会议头像
showSearch: false, // 是否显示搜索
searchBtnIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //搜索按钮图片
searchPlaceholder: '搜索会议名称/会议号码/发起人', //搜索默认值
showCreate: false, // 是否显示创建会议
},
serve:{
type:'customize',
hostname:location.host,
protocol:'http',
loginUrl: location.protocol + '//' + location.host,
homeIrl:location.protocol + '//' + location.host
}
toolBar: {
type: 'customize',
microphone: {
type: 'default',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
icon1: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量1图标
icon2: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量2图标
icon3: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量3图标
icon4: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量4图标
icon5: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量5图标
icon6: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量6图标
icon7: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量7图标
icon8: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量8图标
icon9: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量9图标
icon10: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 音量10图标
iconHover:"url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover:"url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
errorIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态图标
label: '麦克风', // 不设置或设置为空,不显示标签
},
loudspeaker: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
label: '', // 不设置或设置为空,不显示标签
},
camera: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 启用状态悬停图标
disableIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态图标
disableIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 停用状态悬停图标
errorIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态图标
errorIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 异常状态悬停图标
label: '' // 不设置或设置为空,不显示标签
},
terminalList: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
title: '与会方', // 标题
avatar: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //与会方头像
chairmanIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //管理方头像
speakerIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //发言方头像
vipIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //vip头像
setChairmanIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //设置管理方头像
MuteIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //哑音
MuteOnIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //取消哑音
label: '', // 不设置或设置为空,不显示标签
},
inviteInfo: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: "" // 不设置或设置为空,不显示标签
},
share: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 未分享状态图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 未分享状态悬浮图标
shareIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //分享状态图标
shareIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //分享状态悬浮图标
label: ''
},
exit: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: ''
},
fullScreen: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
fullScreenIcon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //全屏下图标
fullScreenIconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", //全屏下悬停图标
label: '', // 不设置或设置为空,不显示标签
},
device: {
type: 'customize',
icon: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 图标
iconHover: "url('https://127.0.0.1/portal/static/images/avator.png?v=1') no-repeat", // 悬停图标
label: '', // 不设置或设置为空,不显示标签
}
}
}
}