< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
专有云（线下）
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
解决方案
会员服务
更多

    Web UISDK集成手册

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

    我的收藏
    本页目录

    快速使用

    （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.memberUuid和empId是否跟已经按照文档要求传递跟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">
    11.           <link href="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.css" rel="stylesheet"/>
    12.               <script src="//lang.alicdn.com/mcms/web-conference/0.0.17/web-conference.json"></script>
    13.       </head>
    14.   <body>
    15.     <div id="container"></div>
    16.     <script>
    17.       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"}
    18.       window.localStorage.setItem('lang', "")
    19.     </script>
    20.           <script src="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/dll/vendor_h.js"></script>
    21.           <script src="//g.alicdn.com/InformationPlatform/conference_js/1.1.5/conference.js"></script>
    22.       </body>
    23. </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.2token和3.1.3wssUrl参数是否已经填写；这两个参数短时间内就会过期，需要每次入会前重新去服务端的JoinMeeting 接口获取；
    (2)调用JoinMeeting 接口时传递的UserId 必须和3.1.5empId保持一致，对应不上会导致服务端报token出错；
    (3)3.1.6memberUuid和3.1.5empId这两个参数的关系必须要对应上，对应不上也会导致服务端报token出错；对应关系如下图所框内容：

    empidmemberuuid

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

    5.3 页面一直loading

    （1）除了5.1和5.2已经提到的参数检查3.1.4meetingUUID和3.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内部处理逻辑，用户无法获取到；