< 文档首页
全部产品
弹性计算
存储服务
数据库
网络
视频与CDN
域名与网站
工商财税 知识产权
应用服务
互联网中间件
移动研发平台 EMAS
移动研发平台EMAS-专有云
云通信
安全
大数据
人工智能
ET大脑
物联网
物联网行业方案
数字金融
管理与监控
区块链
云市场
API与工具
解决方案
钉钉
会员服务
专有云
更多

    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.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内部处理逻辑，用户无法获取到；
    上一篇：Android UISDK集成手册
    相关文档
    相关产品
    • 云视频会议
      云视频会议是阿里云为客户提供的开放、可靠、智能的会议PaaS服务，基于阿里集团数年视频会议技术及应用积累、全球部署的网络节点覆盖及领先的AI技术，客户可快速构建多端互通与简单易用的会议协作应用。基于云视频会议PaaS，阿里云已发布“阿里云会议”商业应用产品，支持Windows、Mac、Web、Android、iOS及电话接入，疫情期间免费使用，可前往“https://meeting.aliyun.com”（或点击上方“查看产品”）下载安装。
    • 音视频通信
      音视频通信 RTC（Real-Time Communication）是阿里云覆盖全球的实时音视频开发平台，提供高可用、高品质、超低延时的实时网络服务，适用于在线教育、互动娱乐、视频会议、保险定损、调度指挥等场景。使用阿里云RTC SDK，您可以在移动、Web、PC等多端快速搭建互通互联的实时音视频应用。
    • 视频直播
      视频直播服务（ApsaraVideo Live）是基于领先的内容接入与分发网络和大规模分布式实时转码技术打造的音视频直播平台，提供便捷接入、高清流畅、低延迟、高并发的音视频直播服务。