UI SDK集成

背景信息

部署
可以直接使用部署的示例代码，更多内容，请参见示例代码。部署说明，请参见部署说明。
参数配置
请参见重要入参说明。
问题排查
如果遇到问题，请参见常见问题。

主要功能简介

支持员工、外部人员的视频/语音通话。
- 员工：loading页面后直接入会。
- 外部人员：输入昵称后loading入会。
会中成员控制。
- 员工可以对外部人员进行静音、挂断等操作。
- 外部人员只能静音、挂断自己。
会中屏幕共享。
切换大小视频窗。
会中实时聊天。
会中音视频设备切换。
会中语言切换，目前支持中、英文两种语言。
内置多个default错误页。

主要界面说明

提示页：
这里把除了会中页面的其他页面状态统一称为提示页，包含：入会前loading、外部人员输入昵称页面、浏览器不支持、浏览器版本过低、会议已过期或无效、安装共享屏幕插件提示页、打开摄像头权限页、Chrome没有摄像头/麦克风权限页等，下面为两张示例图。

loading页面：

外部用户输入昵称页面：
图中标注说明（红色的数字及黄色框及数字）：
- 黄色框A：所有提示页都由上面的内容区域和底部的A区域构成，A区域内容按照下面配置参数展示。
- 红色数字1：请参见companyLogo。
- 红色数字2：请参见meetingLogo。
- 红色数字3：请参见showClientGuide。
- 红色数字4：请参见downloadUrl。
- 红色数字5：请参见startClientUrl。
- 红色数字6：请参见nickJonTitle。
- 红色数字7：请参见nickJonPlaceholder。
会中页面：
成功进入到会议以后页面。
图中标注说明（红色的数字）
- 红色数字8：点击后会出现更多区域，请参见更多定制模块入参说明。
- 红色数字9：点击后出现音视频设备调试页面，如下图所示：
- 红色数字10：点击后出现成员列表侧边栏，如下图所示：
- 红色数字11：点击后出现邀请侧边栏，请参见分享定制模块入参说明。
- 红色数字12：请参见showShowScreenIcon。
- 红色数字13: 请参见showCameraIcon。
- 红色数字14：点击后出现挂断对话框：
  - 会议发起者可以挂断全部入会成员；
  - 参会者只能挂断自己；
- 红色数字15：请参见showMicroIcon。
- 红色数字16：请参见showSpeakerIcon。
- 红色数字17：通过参数meetingLogo传值。
- 红色数字18：请参见showChat。
- 红色数字19：请参见分享定制模块入参说明。

部署说明

域名/路由

部署后页面的访问URL：域名+路由+参数（不做限制）

示例url：https://alimeeting.alibaba-inc.com/alimeeting/web/webvc/videomeeting/?code=946235

域名：由于音视频权限必须在https上才能被访问，所以部署的域名必须是https的（示例中的：https://alimeeting.alibaba-inc.com）。
路由：具体值不做限制，但是需要通过pageConfig参数中的3.1.1 meetingRouter字段传给SDK，否则页面会白屏（示例中的：/alimeeting/web/webvc/videomeeting）。

HTML模版

部署的html模版示例，请参见示例代码。

添加指定id的dom节点：<div id='container'/>，前端所有资源都是渲染到container这个dom节点中。
加载脚本文件：需要把下列脚本加载到html模版中。
- css：https://g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.css
- js：https://g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.js
- vendorjs：https://g.alicdn.com/InformationPlatform/conference_js/1.1.5/dll/vendor_h.js
- langue：https://lang.alicdn.com/mcms/web-conference/0.0.17/web-conference.json
添加参数内容：需要在window对象下添加对应的pageConfig对象，SDK才能正常运行，添加具体参数，请参见#section_b3e_cm3_e3z。
如果想自定义很多样式，可以用自己的css把dom样式覆盖。
如果想自定义很多文案，请下载json文件。下载好之后按照自己想要的文案修改，在html中加载自己的语言json文件。

重要入参说明


参数	示例	类型	是否必填	描述
meetingRouter	`/alimeeting/web/webvc/videomeeting`	String	是	对应部署说明中的路由，这个参数非常重要，通过该参数做前端路由，如果这个参数传的不正确会导致前端路由失败，页面白屏。
token	`f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3`	String	是	连接会控服务wss需要的token，可通过JoinMeeting接口获取，对应接口返回值中的meetingToken字段。
wssUrl	`alimeeting-test-daily`	String	是	会控服务的wss域名，可通过JoinMeeting接口获取，对应接口返回值中的meetingDomain字段。
meetingUUID	`f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3`	String	是	会议对应的uuid，可通过JoinMeeting接口获取，对应接口返回值中的meetingUUID字段。
empId	1234564	String	否	员工工号，取值：员工：传了该值认为是员工，会以员工身份入会。外部人员：不传、传-1、传空字符串，都会以外部人员身份入会。
memberUuid	`f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3`	String	否	会议成员唯一标识，取值：员工：通过JoinMeeting接口获取，对应接口返回值中的memberUUID字段。外部人员：不需要传该字段，前端代码自己生成。
slsInfo（已废弃，不用再传递）	无	Object	是	sls日志接口需要参数，通过checkMeetingCode接口获取，对应接口返回值中的slsInfo字段，建议直接把返回的slsInfo字段透传。
meetingAppId	`alimeeting-SDK`	String	是	用于标识当前的appId，通过JoinMeeting接口获取，对应接口返回值中的meetingAppId字段。
videoHeight	360	number	否	大流的高度，设置高分辨率可能造成电脑CPU占用高、耗电快的问题，用户配置完建议做下CPU及耗电相关方面的测试。默认值为360，单位：Px。
videoWidth	640	number	否	大流的宽度，设置高分辨率可能造成电脑CPU占用高、耗电快的问题，用户配置完建议做下CPU及耗电相关方面的测试。默认值为640，单位：Px。
minVideoHeight	180	number	否	小流分辨率的高度。默认值为180，单位：Px。
minVideoWidth	320	number	否	小流分辨率的宽度。默认值为320，单位：Px。
maxBigBitrate	500000	number	否	大流最大码率。默认值为500000，单位：Bite。
maxSmallBitrate	125000	number	否	小流最大码率。默认值为125000，单位：Bite。
videoFrameRate	16	number	否	视频帧率。默认值为16，单位：FPS。

示例图片展示

如果传入的参数token已经过期会展示如下错误页面（可以重刷页面在服务端重新获取新的token赋值给html模版）。

页面跳转入参说明


参数	类型	是否必填	描述
unsupportBrowserUrl	String或Object	否	目前只支持版本大于等于minChromeVersion的Chrome浏览器，不满足版本需求就会展示版本过低的页面；传递了该参数后，检测到版本过低后浏览器会跳转到传递的url；不传该参数会展示SDK内部设计的提示页。
unsupportBrowserVersionUrl	String或Object	否	目前只支持版本大于等于minChromeVersion的Chrome浏览器，不满足版本需求就会展示版本过低的页面；传递了该参数后，检测到版本过低后浏览器会跳转到传递的url；不传该参数会展示SDK内部设计的提示页。
invalidMeetingUrl	String或Object	否	会议过期、口令失效后会展示会议出错的页面；传递了该参数后，出错后会跳转到传递的url；不传该参数会展示SDK内部设计的提示页。
evaluateUrl	String或Object	否	会后结束评价/反馈页面的url；传递了该参数后，会议结束后跳转到该url；不传该参数会展示SDK内部设计的谢谢参与页面。
downloadUrl	String或Object	否	如果有专门的提供各个端（安卓、iOS、windows、mac等）的下载页面，配置了该参数后，SDK内部所有跳转下载链接的地方都会新开window跳转到该url；不配置，不会展示下载客户端相关的UI。
startClientUrl	String或Object	否	如果有专门的开启其他客户端的页面，配置了该参数后，SDK内部所有启动客户端的地方都会新开window跳转到该url；不配置，不会展示打开客户端相关的UI。

示例图片展示

不传unsupportBrowserVersionUrl参数，且非Chrome浏览器时，默认图如下所示：
不传unsupportBrowserVersionUrl参数，且Chrome浏览器版本过低时，默认图如下所示：
不传invalidMeetingUrl参数，且会议过期、口令失效后，默认图如下所示：
不传evaluateUrl参数，且会议结束后，默认图如下所示：

页面资源入参说明

页面所有涉及到资源url的参数，都必须使用https或者也不可以不带https的前缀（否则会有安全警告导致资源获取失败），例如：

//带https方式:
'https://img.alicdn.com/tfs/TB1OSGJcrj1gK0jSZFOXXc7GpXa-379-69.svg'
//不带https方式：
'//img.alicdn.com/tfs/TB1OSGJcrj1gK0jSZFOXXc7GpXa-379-69.svg'


参数	类型	是否必填	描述
meetingLogo	String或Object	否	是否展示主要界面说明中的红色数字2中对应的页面元素
companyLogo	String或Object	否	是否展示主要界面说明中的红色数字1中对应的页面元素。

页面元素入参说明


参数	类型	是否必填	描述
showChat	bool	否	是否展示主要界面说明中的红色数字18中对应的页面元素，可提供会中消息发送和接收功能。默认取值为true。
showClientGuide	bool	否	是否展示主要界面说明中的红色数字3中对应的页面元素。默认值：同时存在downloadUrl和startClientUrl的情况下，默认值为true。其他情况默认值为false。
showSpeakerIcon	bool	否	是否展示主要界面说明中的红色数字16中对应的页面元素；提供关闭/打开接收到的音频的功能。默认取值为true。
showMicroIcon	bool	否	是否展示主要界面说明中的红色数字15中对应的页面元素；提供关闭/打开本地麦克风的功能。默认取值为true。
showCameraIcon	bool	否	是否展示主要界面说明中的红色数字13中对应的页面元素；提供关闭/打开本地摄像头的功能。默认取值为true。
showShowScreenIcon	bool	否	是否展示主要界面说明中的红色数字12中对应的页面元素；提供关闭/打开共享屏幕的功能。默认取值为true。

消息展示UI如下图所示：消息UI

页面定制文案入参说明

所有的文案可以是字符串也可以是对象，对象主要是为了可能存在中、英文下展示的文案不一致的情况；如果中英文下使用的是相同的文案，可以直接使用字符串；以下格式都合理：

'你好'；
or
{
   'en': 'Hello~~',
   'zh-cn': '你好'
 }


参数	类型	是否必填	描述
nickJonTitle	String或Object	否	主要界面说明中的红色数字6中对应的页面元素，外部人员入会输入昵称时的提示文案。默认值： `{ 'en': '加入音视频会议', 'zh-cn': 'Join a Video/Voice Conference' }`
nickJonPlaceholder	String或Object	否	主要界面说明中的红色数字7中对应的页面元素，外部人员入会输入昵称时的placeHolder提示文案。默认值： `{ 'en': '输入你的姓名，用于会中显示和交流', 'zh-cn': 'Please enter name for chatting and shown' }`
appTitle	String或Object	否	网站展示的标题。默认值： `{ 'en': 'Alimeeting(Ongoing)', 'zh-cn': '阿里会议(会议中)' }`

网站标题示例图，如下所示：会议Title

分享定制模块入参说明

通过pageConfig中添加shareInfo信息进行配置，主要界面说明中的红色数字19中对应的页面元素，不配置区域展示空白：

是否必填：否
类型：object
示例图：

数据示例及参数说明：

{
 "title":{   //标题，可以是字符串或者对象，对应UI展示中的19.1部分
   "en": "Way 1: Copy to Share",
   "zh-cn": "方式一：快速复制分享",
 },
 "tips":{   //底部说明文字，可以是字符串或者对象，对应UI展示中的19.3部分
   "en":"After copied, share with others via Dingding or other IM apps.",
   "zh-cn": "复制后，通过钉钉等聊天工具邀请参会人员。"
 },
 "content":[//对应整个中间的模块，数组对象，每个对象展示一行
   {
     "title":{   //每项内容的title，可以是字符串或者对象，对应UI展示中的19.2.1部分
       "en": "Link",
       "zh-cn": "会议链接",
     },
     "action": "link",    //link 为链接形式，新开窗口进行跳转，跳转的地址是actionValue设置的地址
     "actionValue":{     //真正跳转的url地址，可以是字符串或者对象，对应UI展示中的19.2.5内容，link真正的文档内容或跳转地址；
       "en": "https://www.baidu.com/",
       "zh-cn": "https://www.baidu.com/",
     },
     "actionLabel":{   //给用户展示a标签对应的文字，可以是字符串或者对象，对应UI展示中的19.2.4内容，
       "en": "Copy Meeting Link",
       "zh-cn": "复制会议链接",
     },
   },
   {
     "title":{
       "en": "Code",
       "zh-cn": "会议口令",
     },
     "tooltip":{  //对title的补充说明，默认交互是：hover的时候出现对应的提示文字，可以是字符串或对象，对应UI展示中的19.2.2内容
       "en": "Used in internal/external app, phone or room",
       "zh-cn": "内外部客户端/电话拨号/会议室入会时使用"
     },
     "action": "copy",   //copy 为复制形式，会把actionValue里面的值复制到剪切板
     "actionValue":{    //真正复制到剪切板中的内容，可以是字符串或者对象
       "en": "334641",
       "zh-cn": "334641",
     },
     "actionText":{     //展示在UI上的值，对应UI展示中的19.2.3内容，可以是字符串或者对象
       "en": "334641",
       "zh-cn": "334641",
     },
     "actionLabel":{   //给用户展示a标签对应的文字，可以是字符串或者对象
       "en": "Copy",
       "zh-cn": "复制",
     },
   },
   {
     "title":{
       "en": "Guides",
       "zh-cn": "入会指南",
     },
     "tooltip":{},
     "action": "copy",
     "actionValue":{
       "en": "Hello, I'd like to invite you to join an Alibaba video conference.******",
       "zh-cn": "你好，邀请你参加阿里音视频会议. *******",
     },
     "actionLabel":{
       "en": "Copy Meeting Details",
       "zh-cn": "复制完整信息",
     },
   }
 ],
}

其他入参说明

参数：minChromeVersion
是否必填：否
类型：String/number
默认值：70
描述：支持的默认最小的Chrome浏览器版本号，默认值70，目前大于70有效；小于70仍然是70；
示例：72

页面出参说明

所有出参，都直接赋值给window对象，用户通过window[key]就能获取到对应的参数值。

参数：mediaSessionId
获取：window[‘mediaSessionId’]
类型：String
说明：连接媒体stun服务器使用的sessionId

示例代码