全部产品
云市场

Web UISDK集成手册

更新时间:2020-02-18 15:15:37

快速使用

(1)部署

4.samples 中有可以直接部署的html模版文件;部署说明见2.部署说明

(2)重要参数配置

按照文档内容配置参数内容,重要参数见3.1重要入参

(3)问题排查

遇到问题请先查看5.常见问题排查 ;基本问题都能解决;

1.SDK 概述

1.1主要功能简介

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

1.2主要界面说明

SDK 主要提供两种类型的页面:会中页面、提示页

  • 提示页:这里把除了会中页面的其他页面状态统一称为提示页,包含:入会前loading、外部人员输入昵称页面、浏览器不支持、浏览器版本过低、会议已过期或无效、安装共享屏幕插件提示页、打开摄像头权限页、chrome没有摄像头/麦克风权限页等,下面为两张示例图,loading 页面:loading外部用户输入昵称页面:nick图中标注说明(红色的数字及黄色框及数字):
  • 会中页面:成功进入到会议以后页面inconference图中标注说明(红色的数字)
    • 红色数字8: 点击后会出现更多区域,详见文档更多定制模块入参
    • 红色数字9: 点击后出现音视频设备调试页面,如下图所示:device
    • 红色数字10: 点击后出现成员列表侧边栏,如下图所示:member
    • 红色数字11: 点击后出现邀请侧边栏,详见文档分享定制模块入参
    • 红色数字12: 详见文档showShowScreenIcon
    • 红色数字13: 详见文档showCameraIcon
    • 红色数字14:点击后出现挂断对话框:
      • 会议发起者可以挂断全部入会成员;
      • 参会者只能挂断自己;
    • 红色数字15: 详见文档showMicroIcon
    • 红色数字16: 详见文档showSpeakerIcon
    • 红色数字17: 参数中meetingLogo传入的值;
    • 红色数字18: 详见文档showChat
    • 红色数字19: 详见文档分享定制模块入参

2.部署说明

2.1域名/路由

部署后页面的访问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)

2.2html模版

部署的html模版示例可参考4.1 html 模版sample

3.参数说明

参数示例可参考4.2 pageConfig 参数sample页面需要所有参数都通过window.pageConfig对象传递给SDK,所有国际化相关的需求都通过(目前只支持中、英文)下面的结构满足:

  1. {
  2. 'en': '***',
  3. 'zh-cn': '****'
  4. }

下面是pageConfig的具体说明;

3.1重要入参

3.1.1meetingRouter

  • 是否必填:是
  • 类型:string
  • 描述:对应部署说明中的路由,这个参数非常重要,通过该参数做前端路由,如果这个参数传的不正确会导致前端路由失败,页面白屏;
  • 示例:’/alimeeting/web/webvc/videomeeting’

3.1.2token

  • 是否必填:是
  • 类型:string
  • 描述:连接会控服务wss需要的token,可通过JoinMeeting 接口获取,对应接口返回值中的meetingToken字段;
  • 示例:’f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3’
  • 如果传入的token已经过期会展示如下错误页面(可以重刷页面在服务端重新获取新的token赋值给html模版):token
  • token过期错误参数检查:1.JoinMeeting传递的UserId和3.1.5empId传递的是否一致;2.memberUuidempId是否跟已经按照文档要求传递跟token是否匹配;

3.1.3wssUrl

  • 是否必填:是
  • 类型:string
  • 描述:会控服务的wss域名,可通过JoinMeeting 接口获取,对应接口返回值中的meetingDomain字段;
  • 示例:’alimeeting-test-daily’

3.1.4meetingUUID

  • 是否必填:是
  • 类型:string
  • 描述:会议对应的uuid,可通过 JoinMeeting 接口获取,对应接口返回值中的meetingUUID字段;
  • 示例:’f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3’

3.1.5empId

  • 是否必填:否
  • 类型:string
  • 描述:员工工号
    • 员工:传了该值认为是员工,会以员工身份入会;
    • 外部人员:不传、传-1、传空字符串,都会以外部人员身份入会;
  • 示例:
    1. //员工
    2. '1234564'
    3. //外部人员
    4. '-1' or ''

3.1.6memberUuid

  • 是否必填:否
  • 类型:string
  • 描述:唯一标识该成员在会中的id
    • 员工:通过 JoinMeeting 接口获取,对应接口返回值中的memberUUID字段;
    • 外部人员:不需要传该字段,前端代码自己生成;
  • 示例:’f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3’

3.1.7slsInfo(已废弃,不用再传递)

  • 是否必填:是
  • 类型:object
  • 描述:sls日志接口需要参数,通过 checkMeetingCode 接口获取,对应接口返回值中的slsInfo字段,建议直接把返回的slsInfo字段透传;
  • 示例:
    1. {
    2. "LogServiceEndpoint": "cn-hang***",
    3. "Rroject": "alimeetin***",
    4. "Logstore": "client_i***"
    5. }

3.1.8meetingAppId

  • 是否必填:是
  • 类型:string
  • 描述:用于标识当前的appId,通过JoinMeeting 接口获取,对应接口返回值中的meetingAppId字段;
  • 示例:’alimeeting-SDK’

3.1.9videoHeight

  • 是否必填:否
  • 类型:number
  • 默认值:360;
  • 描述:大流流的高度,设置高分辨率可能造成电脑cpu占用高、耗电快的问题,用户配置完建议做下cpu及耗电相关方面的测试;

3.1.10videoWidth

  • 是否必填:否
  • 类型:number
  • 默认值:640;
  • 描述:大流的宽度,设置高分辨率可能造成电脑cpu占用高、耗电快的问题,用户配置完建议做下cpu及耗电相关方面的测试;

3.1.11minVideoHeight

  • 是否必填:否
  • 类型:number
  • 默认值:180;
  • 描述:小流分辨率的高度;

3.1.12minVideoWidth

  • 是否必填:否
  • 类型:number
  • 默认值:320;
  • 描述:小流分辨率的宽度;

3.1.13maxBigBitrate

  • 是否必填:否
  • 类型:number
  • 默认值:500000;
  • 描述:大流最大码率,单位bite;

3.1.14maxSmallBitrate

  • 是否必填:否
  • 类型:number
  • 默认值:125000;
  • 描述:小流流最大码率,单位bite;

3.1.15videoFrameRate

  • 是否必填:否
  • 类型:number
  • 默认值:16;
  • 描述:视频帧率;

3.2页面跳转相关入参

所有的跳转链接可以是字符串也可以是对象,对象主要是为了可能存在中、英文下页面不一致的情况;如果中英文跳转的是相同的页面,可以直接使用字符串;以下两种格式都合理:

  1. 'https://survey.alibaba.com/apps/zhiliao/1i7UdRcLt';
  2. or
  3. {
  4. 'en': 'https://survey.alibaba.com/apps/zhiliao/1i7UdRcLt',
  5. 'zh-cn': 'https://survey.alibaba.com/apps/zhiliao/xWe7CNZlZ'
  6. }

3.2.1unsupportBrowserUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:目前只支持chrome, 非chrome就会展示不支持的浏览器页面;传递了该参数后,检测到不是chrome浏览器会跳转到传递的url;不传该参数会展示SDK内部设计的提示页;
  • 默认展示页:browser

3.2.2unsupportBrowserVersionUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:目前只支持版本大于等于minChromeVersion的chrome浏览器,不满足版本需求就会展示版本过低的页面;传递了该参数后,检测到版本过低后浏览器会跳转到传递的url;不传该参数会展示SDK内部设计的提示页;
  • 默认展示:unversion

3.2.3invalidMeetingUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:会议过期、口令失效后会展示会议出错的页面;传递了该参数后,出错后会跳转到传递的url;不传该参数会展示SDK内部设计的提示页;
  • 默认展示页:invalid

3.2.4evaluateUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:会后结束评价/反馈页面的url;传递了该参数后,会议结束后跳转到该url;不传该参数会展示SDK内部设计的谢谢参与页面;
  • 默认展示页:thanksnew

3.2.5downloadUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:如果有专门的提供各个端(安卓、iOS、windows、mac等)的下载页面,配置了该参数后,SDK内部所有跳转下载链接的地方都会新开window跳转到该url;不配置,不会展示下载客户端相关的UI;

3.2.6startClientUrl

  • 是否必填:否
  • 类型:string/object
  • 描述:如果有专门的开启其他客户端的页面,配置了该参数后,SDK内部所有启动客户端的地方都会新开window跳转到该url;不配置,不会展示打开客户端相关的UI;

3.3页面资源相关入参

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

  1. //带https方式:
  2. 'https://img.alicdn.com/tfs/TB1OSGJcrj1gK0jSZFOXXc7GpXa-379-69.svg'
  3. //不带https方式:
  4. '//img.alicdn.com/tfs/TB1OSGJcrj1gK0jSZFOXXc7GpXa-379-69.svg'
  • 是否必填:否
  • 类型:string/object
  • 描述:是否展示主要界面说明中的红色数字2中对应的页面元素;
  • 是否必填:否
  • 类型:string/object
  • 描述:是否展示主要界面说明中的红色数字1中对应的页面元素;

3.4页面元素显示/隐藏相关入参

3.4.1showChat

  • 是否必填:否
  • 类型:bool
  • 默认值:true
  • 描述:是否展示主要界面说明中的红色数字18中对应的页面元素,可提供会中消息发送和接收功能;
  • 消息展示UI

3.4.2showClientGuide

3.4.3showSpeakerIcon

  • 是否必填:否
  • 类型:bool
  • 默认值:true
  • 描述:是否展示主要界面说明中的红色数字16中对应的页面元素;提供关闭/打开接收到的音频的功能

3.4.4showMicroIcon

  • 是否必填:否
  • 类型:bool
  • 默认值:true
  • 描述:是否展示主要界面说明中的红色数字15中对应的页面元素;提供关闭/打开本地麦克风的功能;

3.4.5showCameraIcon

  • 是否必填:否
  • 类型:bool
  • 默认值:true
  • 描述:是否展示主要界面说明中的红色数字13中对应的页面元素;提供关闭/打开本地摄像头的功能;

3.4.6showShowScreenIcon

  • 是否必填:否
  • 类型:bool
  • 默认值:true
  • 描述:是否展示主要界面说明中的红色数字12中对应的页面元素;提供关闭/打开共享屏幕的功能;

3.5页面定制文案相关入参

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

  1. '你好';
  2. or
  3. {
  4. 'en': 'Hello~~',
  5. 'zh-cn': '你好'
  6. }

3.5.1nickJonTitle

  • 是否必填:否
  • 类型:string/object
  • 默认值:
    1. {
    2. 'en': '加入音视频会议',
    3. 'zh-cn': 'Join a Video/Voice Conference'
    4. }
  • 描述:主要界面说明中的红色数字6中对应的页面元素,外部人员入会输入昵称时的提示文案;

3.5.2nickJonPlaceholder

  • 是否必填:否
  • 类型:string/object
  • 默认值:
    1. {
    2. 'en': '输入你的姓名,用于会中显示和交流',
    3. 'zh-cn': 'Please enter name for chatting and shown'
    4. }
  • 描述:主要界面说明中的红色数字7中对应的页面元素,外部人员入会输入昵称时的placeHolder提示文案;

3.5.3appTitle

  • 是否必填:否
  • 类型:string/object
  • 默认值:
    1. {
    2. 'en': 'Alimeeting(Ongoing)',
    3. 'zh-cn': '阿里会议(会议中)'
    4. }
  • 描述:网站展示的title,如下图:

3.6分享定制模块入参

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

  • 是否必填:否
  • 类型:object
  • 示例图:

  • 数据示例及参数说明:

    1. {
    2. "title":{ //标题,可以是字符串或者对象,对应UI展示中的19.1部分
    3. "en": "Way 1: Copy to Share",
    4. "zh-cn": "方式一:快速复制分享",
    5. },
    6. "tips":{ //底部说明文字,可以是字符串或者对象,对应UI展示中的19.3部分
    7. "en":"After copied, share with others via Dingding or other IM apps.",
    8. "zh-cn": "复制后,通过钉钉等聊天工具邀请参会人员。"
    9. },
    10. "content":[//对应整个中间的模块,数组对象,每个对象展示一行
    11. {
    12. "title":{ //每项内容的title,可以是字符串或者对象,对应UI展示中的19.2.1部分
    13. "en": "Link",
    14. "zh-cn": "会议链接",
    15. },
    16. "action": "link", //link 为链接形式,新开窗口进行跳转,跳转的地址是actionValue设置的地址
    17. "actionValue":{ //真正跳转的url地址,可以是字符串或者对象,对应UI展示中的19.2.5内容,link真正的文档内容或跳转地址;
    18. "en": "https://www.baidu.com/",
    19. "zh-cn": "https://www.baidu.com/",
    20. },
    21. "actionLabel":{ //给用户展示a标签对应的文字,可以是字符串或者对象,对应UI展示中的19.2.4内容,
    22. "en": "Copy Meeting Link",
    23. "zh-cn": "复制会议链接",
    24. },
    25. },
    26. {
    27. "title":{
    28. "en": "Code",
    29. "zh-cn": "会议口令",
    30. },
    31. "tooltip":{ //对title的补充说明,默认交互是:hover的时候出现对应的提示文字,可以是字符串或对象,对应UI展示中的19.2.2内容
    32. "en": "Used in internal/external app, phone or room",
    33. "zh-cn": "内外部客户端/电话拨号/会议室入会时使用"
    34. },
    35. "action": "copy", //copy 为复制形式,会把actionValue里面的值复制到剪切板
    36. "actionValue":{ //真正复制到剪切板中的内容,可以是字符串或者对象
    37. "en": "334641",
    38. "zh-cn": "334641",
    39. },
    40. "actionText":{ //展示在UI上的值,对应UI展示中的19.2.3内容,可以是字符串或者对象
    41. "en": "334641",
    42. "zh-cn": "334641",
    43. },
    44. "actionLabel":{ //给用户展示a标签对应的文字,可以是字符串或者对象
    45. "en": "Copy",
    46. "zh-cn": "复制",
    47. },
    48. },
    49. {
    50. "title":{
    51. "en": "Guides",
    52. "zh-cn": "入会指南",
    53. },
    54. "tooltip":{},
    55. "action": "copy",
    56. "actionValue":{
    57. "en": "Hello, I'd like to invite you to join an Alibaba video conference.******",
    58. "zh-cn": "你好,邀请你参加阿里音视频会议. *******",
    59. },
    60. "actionLabel":{
    61. "en": "Copy Meeting Details",
    62. "zh-cn": "复制完整信息",
    63. },
    64. }
    65. ],
    66. }

3.7更多定制模块入参

通过pageConfig中添加moreInfo信息进行配置,主要界面说明中的红色数字8中对应的页面元素:

  • 是否必填:否
  • 类型:object
  • 默认值:
    1. {
    2. "language": true
    3. }
  • 示例图:

  • 数据示例及参数说明:

    1. {
    2. "language": true, //是否展示语言切换功能,对应UI展示中的8.1内容
    3. "extra": [ //自定义的cell,cell的默认行为是响应点击事件,新开窗口跳转到新页面
    4. {
    5. "title": { //展示的主文字,可以是字符串或者对象,对应UI展示中的8.2.1内容;
    6. "en": "Launch App to Join",
    7. "zh-cn": "启动客户端入会"
    8. },
    9. "tips": { //展示的说明文字,可以是字符串或者对象,对应UI展示中的8.2.2内容;
    10. "en": "Better experience & advanced features",
    11. "zh-cn": "通话效果更佳,还有高级功能"
    12. },
    13. "link": { //跳转页面的url,可以是字符串或者对象
    14. "en": "https://alimeeting.alibaba-inc.com/alimeeting/web/webvc/alilangpc?uuid=19671198-ce02-4ebc-a86f-143d0879749f",
    15. "zh-cn": "https://alimeeting.alibaba-inc.com/alimeeting/web/webvc/alilangpc?uuid=19671198-ce02-4ebc-a86f-143d0879749f"
    16. }
    17. },
    18. {
    19. "title": {
    20. "en": "Feedback",
    21. "zh-cn": "我要反馈"
    22. },
    23. "link": {
    24. "en": "https://survey.alibaba.com/apps/zhiliao/1i7UdRcLt",
    25. "zh-cn": "https://survey.alibaba.com/apps/zhiliao/xWe7CNZlZ"
    26. }
    27. }
    28. ]
    29. }

3.8其他入参

3.8.1minChromeVersion

  • 是否必填:否
  • 类型:string/number
  • 默认值:70
  • 描述:支持的默认最小的chrome浏览器版本号,默认值70,目前大于70有效;小于70仍然是70;
  • 示例:72

3.9页面出参

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

3.9.1mediaSessionId

  • 获取:window[‘mediaSessionId’]
  • 类型:string
  • 说明:连接媒体stun服务器使用的sessionId

4.Samples

4.1html模版sample

  1. <!DOCTYPE html>
  2. <html class="theme-normal">
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta content="yes" name="apple-mobile-web-app-capable"/>
  6. <meta content="yes" name="apple-touch-fullscreen"/>
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
  8. <title>Teambition Meeting</title>
  9. <link rel="shortcut icon" href="data:image/png;base64,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" type="image/png">
  10. <link href="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.css" rel="stylesheet"/>
  11. <script src="//lang.alicdn.com/mcms/web-conference/0.0.17/web-conference.json"></script>
  12. </head>
  13. <body>
  14. <div id="container"></div>
  15. <script>
  16. window.pageConfig = {"meetingRouter":"/detail","meetingRouterEnter":"/enter","minChromeVersion":70,"companyLogo":{"en":"https://dn-st.teambition.net/meetings/meetings.logo.png","zh-cn":"https://dn-st.teambition.net/meetings/meetings.logo.png"},"meetingLogo":"","downloadUrl":"","startClientUrl":"","unsupportBrowserUrl":false,"unsupportBrowserVersionUrl":false,"invalidMeetingUrl":false,"showChat":false,"showEmailInvite":false,"showSpeakerIcon":true,"showMicroIcon":true,"showCameraIcon":true,"showShowScreenIcon":true,"showClientGuide":false,"moreInfo":{"language":true,"extra":[]},"nickJoinTitle":{"en":"Participant","zh-cn":"加入会议"},"nickJoinPlaceholder":{"en":"Your meeting name","zh-cn":"请输入你的姓名"},"useWs":false,"appTitle":{"en":"Teambition Meetings","zh-cn":"Teambition Meetings"},"token":"5c0af82a-ade3-4ba4-8abc-c19635041ec6","memberUuid":"","wssUrl":"alimeeting-paas-vc-sdk.aliyuncs.com","empId":-1,"meetingUUID":"dd645d27-d785-49e2-b9cb-5058280570a2","meetingAppId":"alimeeting-SDK","slsInfo":{"logServiceEndpoint":"log-global.aliyuncs.com","logstore":"client_info","project":"alimeeting-paas"},"evaluateUrl":"https://tb-meeting-site.aone.alibaba-inc.com/rating?meetingId=dd645d27-d785-49e2-b9cb-5058280570a2","shareInfo":{"title":{"en":"Share","zh-cn":"快速复制分享"},"tips":{"en":"After copied, share with others and invite them.","zh-cn":"复制后发送给其他人,邀请他们加入。"},"content":[{"title":{"en":"Link","zh-cn":"会议链接"},"tooltip":{},"action":"copy","actionValue":"tb-meeting-site.aone.alibaba-inc.com/detail?code=19423041","actionLabel":{"en":"Copy Meeting Link","zh-cn":"复制会议链接"}},{"title":{"en":"Code","zh-cn":"会议口令"},"tooltip":{"en":"Use Teambition Web or App and enter the Id to join.","zh-cn":"从 Teambition 主页或 App 的全局创建入口进入视频讨论,输入此 ID 即可加入。"},"action":"copy","actionValue":"19423041","actionLabel":{"en":"Copy","zh-cn":"复制"}}]},"appDefaultLang":"zh-cn"}
  17. window.localStorage.setItem('lang', "")
  18. </script>
  19. <script src="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/dll/vendor_h.js"></script>
  20. <script src="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.js"></script>
  21. </body>
  22. </html>

4.2pageConfig参数sample

  1. {
  2. "token": "f3ab1a96-f5bf-4655-9ebc-e08ac8e586c3",
  3. "wssUrl": "118.31.181.129",
  4. "meetingRouter": "/test/videomeeting/detail/",
  5. "minChromeVersion": 70,
  6. "memberUuid": "8b916426-d72c-4245-8205-78865ed85852",
  7. "empId": "73662",
  8. "meetingUUID": "dd645d27-d785-49e2-b9cb-5058280570a2",
  9. "downloadUrl": {
  10. "en": "https://alilang.alibaba-inc.com/portal/index.htm",
  11. "zh-cn": "https://alilang.alibaba-inc.com/portal/index.htm"
  12. },
  13. "meetingLogo": {
  14. "en": "https://img.alicdn.com/tfs/TB1g3qFcxD1gK0jSZFsXXbldVXa-481-69.svg",
  15. "zh-cn": "https://img.alicdn.com/tfs/TB1OSGJcrj1gK0jSZFOXXc7GpXa-379-69.svg"
  16. },
  17. "companyLogo": {
  18. "en": "https://img.alicdn.com/tfs/TB10RyIcAL0gK0jSZFAXXcA9pXa-399-69.svg",
  19. "zh-cn": "https://img.alicdn.com/tfs/TB10RyIcAL0gK0jSZFAXXcA9pXa-399-69.svg"
  20. },
  21. "startClientUrl": {
  22. "en": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter",
  23. "zh-cn": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter"
  24. },
  25. "evaluateUrl": {
  26. "en": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter",
  27. "zh-cn": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter"
  28. },
  29. "unsupportBrowserUrl": {
  30. "en": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter",
  31. "zh-cn": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter"
  32. },
  33. "unsupportBrowserVersionUrl": {
  34. "en": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter",
  35. "zh-cn": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter"
  36. },
  37. "invalidMeetingUrl": {
  38. "en": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter",
  39. "zh-cn": "https://daily.package-manager.taobao.net/alimeeting/web/webvc/enter"
  40. },
  41. "showChat": true,
  42. "showEmailInvite": false,
  43. "showSpeakerIcon": true,
  44. "showMicroIcon": true,
  45. "showCameraIcon": true,
  46. "showShowScreenIcon": true,
  47. "nickJonTitle": {
  48. "en": "多啦A梦ennickJonTitleen",
  49. "zh-cn": "多啦A梦zhnickJonTitlezh"
  50. },
  51. "nickJonPlaceholder": {
  52. "en": "多啦A梦ennickJonTitleen",
  53. "zh-cn": "多啦A梦zhnickJonTitlezh"
  54. },
  55. "shareInfo": {
  56. "title": {
  57. "en": "Way 1: Copy to Share",
  58. "zh-cn": "多啦测试分享内容title"
  59. },
  60. "tips": {
  61. "en": "After copied, share with others via Dingding or other IM apps.",
  62. "zh-cn": "复制后,通过钉钉等聊天工具邀请参会人员。"
  63. },
  64. "content": [
  65. {
  66. "title": {
  67. "en": "Link",
  68. "zh-cn": "会议链接"
  69. },
  70. "tooltip": {},
  71. "action": "copy",
  72. "actionValue": {
  73. "en": "https://****",
  74. "zh-cn": "https://****"
  75. },
  76. "actionLabel": {
  77. "en": "Copy Meeting Link",
  78. "zh-cn": "复制会议链接"
  79. }
  80. },
  81. {
  82. "title": {
  83. "en": "Code",
  84. "zh-cn": "会议口令"
  85. },
  86. "tooltip": {
  87. "en": "Used in internal/external app, phone or room",
  88. "zh-cn": "内外部客户端/电话拨号/会议室入会时使用"
  89. },
  90. "action": "copy",
  91. "actionValue": {
  92. "en": "334641",
  93. "zh-cn": "334641"
  94. },
  95. "actionText": {
  96. "en": "334641",
  97. "zh-cn": "334641"
  98. },
  99. "actionLabel": {
  100. "en": "Copy",
  101. "zh-cn": "复制"
  102. }
  103. },
  104. {
  105. "title": {
  106. "en": "Guides",
  107. "zh-cn": "入会指南"
  108. },
  109. "tooltip": {},
  110. "action": "copy",
  111. "actionValue": {
  112. "en": "Hello, I'd like to invite you to join an Alibaba video conference.******",
  113. "zh-cn": "你好,邀请你参加阿里音视频会议. *******"
  114. },
  115. "actionLabel": {
  116. "en": "Copy Meeting Details",
  117. "zh-cn": "复制完整信息"
  118. }
  119. }
  120. ]
  121. },
  122. "moreInfo": {
  123. "language": true,
  124. "extra": [
  125. {
  126. "title": {
  127. "en": "Launch App to Join",
  128. "zh-cn": "启动客户端入会"
  129. },
  130. "tips": {
  131. "en": "Better experience & advanced features",
  132. "zh-cn": "通话效果更佳,还有高级功能"
  133. },
  134. "link": {
  135. "en": "https://alimeeting.alibaba-inc.com/alimeeting/web/webvc/alilangpc?uuid=19671198-ce02-4ebc-a86f-143d0879749f",
  136. "zh-cn": "https://alimeeting.alibaba-inc.com/alimeeting/web/webvc/alilangpc?uuid=19671198-ce02-4ebc-a86f-143d0879749f"
  137. }
  138. },
  139. {
  140. "title": {
  141. "en": "Feedback",
  142. "zh-cn": "我要反馈"
  143. },
  144. "link": {
  145. "en": "https://survey.alibaba.com/apps/zhiliao/1i7UdRcLt",
  146. "zh-cn": "https://survey.alibaba.com/apps/zhiliao/xWe7CNZlZ"
  147. }
  148. }
  149. ]
  150. },
  151. }

5.常见问题排查

5.1 白屏

(1)检查3.1.1meetingRouter参数是否已经配置;
(2)检查3.1.1meetingRouter参数和访问时候地址的页面URL是否匹配;比如https://abc.edg.com/index.html 这个访问地址,meetingRouter的值应该是/index.html 而不是/;
(3)如果还是有问题,command+option+J 打开浏览器的调试窗;在Console中输入window.location,入下图所示:把图中的pathname的值作为meetingRouter传递给SDK

windowpath

5.2 页面过期,请刷新页面重试

(1)检查页面的3.1.2token3.1.3wssUrl参数是否已经填写;这两个参数短时间内就会过期,需要每次入会前重新去服务端的JoinMeeting 接口获取;
(2)调用JoinMeeting 接口时传递的UserId 必须和3.1.5empId保持一致,对应不上会导致服务端报token出错;
(3)3.1.6memberUuid3.1.5empId这两个参数的关系必须要对应上,对应不上也会导致服务端报token出错;对应关系如下图所框内容:

empidmemberuuid

(4)是memberUuid,不是memberUUID;是memberUuid,不是memberUUID;是memberUuid,不是memberUUID;重要的事说三遍;之前设计的时候这个字段当时定的是memberUuid,后续发版本可以考虑同时兼容memberUuid和 memberUUID;

5.3 页面一直loading

(1)除了5.1和5.2已经提到的参数检查3.1.4meetingUUID3.1.8meetingAppId这两个必须的参数是不是已经传了;
(2)command+option+J 打开浏览器的调试窗,查看network中的wss消息,如下图,查看channelwithauth 这个wss下面的Message,逐条Message看一下,哪一条的消息服务端报错了;

tiaoshi

5.4 想要更改页面某个元素的样式

对于用户想修改参数配置中没有的元素样式,可以通过自定义覆盖CSS的方式,原来元素的CSS样式进行修改,完成自定义样式的需求;

5.5 想要更改页面某个元素的文案

https://lang.alicdn.com/mcms/web-conference/0.0.17/web-conference.jso 下载下来;按照自己想要的文案修改,然后html中加载自己的语言json文件;

5.6 目前不支持内容

(1)SDK通过页面加载自动完成初始化等一系列操作,暂时不支持用户主动调用SDK初始化操作;
(2)SDK内部所有人员相关、会议状态相关的回调;目前都是SDK内部处理逻辑,用户无法获取到;