快速接入

前提条件

socket 合法域名

添加以下 wss 开头的域名：

wss://live.vhall.com;
wss://chat01.e.vhall.com;
wss://msg01-open.e.vhall.com;
wss://wss.tim.qq.com;
wss://wss.im.tencent.cn;
wss://wss.im.qcloud.com;
wss://wssv6.im.qcloud.com;
wss://1600076705w4c.my-imcloud.com;
wss://1600077178w4c.my-imcloud.com;

request 合法域名

添加以下 https 开头的域名：

https://live.vhall.com;
https://dc.e.vhall.com;
https://gslb.e.vhall.com;
https://static.vhall.com;
https://open-api.vhall.com;
https://api.vhallyun.com;
https://sdk-ims.vhallyun.com;
https://cnstatic01.e.vhall.com;
https://msg01-open.e.vhall.com;
https://wss.tim.qq.com;
https://webim.tim.qq.com;
https://api.im.qcloud.com;
https://wss.im.qcloud.com;
https://web.sdk.qcloud.com;
https://events.im.qcloud.com;
https://web.sdk.tencent.cn;
https://web.sdk.cloud.tencent.cn;

集成步骤

1. 下载项目

https://gitee.com/vhall/vhlive_sdk_wmp/repository/archive/master.zip

文件夹结构如下：

vhlive_sdk_wmp/
├── lib/                    # 完整SDK(将该文件夹复制到项目中)
│   ├── components/         # 核心业务组件
│   │   ├── player/         # 播放器（含弹幕、控制器、水印等）
│   │   ├── chat/           # 聊天（列表 + 编辑）
│   │   ├── invite-rank/    # 邀请榜
│   │   ├── introduction/   # 直播简介
│   │   ├── live-landscape/ # 横屏直播容器
│   │   ├── live-portrait/  # 竖屏直播容器
│   │   ├──signin/         # 签到
│   │   └── top-notify/    # 顶部网络通知
│   ├── pubComponents/      # 公共 UI 组件
│   │   ├── error-page/     # 错误页面
│   │   └── tabs/           # 标签页导航
│   ├── sdk/                # SDK 核心
│   │   ├── main/           # 主SDK 入口 ★
│   │   ├── player/         # 播放器 SDK
│   │   ├── im/             # IM 消息 SDK
│   │   ├── store/          # 状态管理 ★
│   │   └── plugins/        # 功能服务插件 ★
│   └── shared/             # 工具库
│       ├── base.server.js  # 事件总线基类 ★
│       ├── RequestUtil.js  # 网络请求封装
│       ├── cacheUtil.js    # 本地缓存
│       ├── logger.js       # 日志工具
│       ├── dateUtil.js     # 日期处理
│       └── utils.js        # 通用工具函数
│
├── pages/                  # 示例页面 demo
│   ├── index/              # 直播观看页 ★ (主要入口)
│   ├── common/             # 公共业务逻辑
│   └── error-guide/        # 错误引导页
│
├── subpackages/            # 分包
│   └── sign-generator/     # 签名生成工具 demo
│
├── build/                  # 构建脚本
│   ├── compiler.js         # Gulp 构建任务 ★
│   └── webpack.sdk.config.js  # SDK Webpack 配置
│
├── app.json                # 小程序配置
├── package.json            # 项目配置
└── tsconfig.json           # TypeScript 配置

2. SDK 组件内部使用了微信官方提供的 UI 库 WeUI，因此您需要在项目的 app.json 文件中添加以下代码引入 WeUI 组件库：

"useExtendedLib": {
    "weui": true
}

3. 参考以下步骤在项目的 page 页面实现横竖屏直播间：

a. 在项目的对应页面的*.json 文件中按需引入直播间整体组件，示例代码如下：

"useExtendedLib": {
    "live-landscape": "/lib/components/live-landscape/live-landscape",
    "live-portrait": "/lib/components/live-portrait/live-portrait"
}

b. 在 wxml 文件中按需使用直播间整体组件，示例代码如下：

<view>
    <!-- 横屏 -->
    <live-landscape sdkInstance="{{sdkInstance}}" bindclickMoreMenu="handleMoreMenu"></live-landscape>
    <!-- 竖屏 -->
    <live-portrait sdkInstance="{{sdkInstance}}" bindclickMoreMenu="handleMoreMenu"></live-portrait>
</view>

c.在 js 文件中的 onLoad 方法中创建 SDK 实例，并初始化及挂在需要的功能插件

SDK 初始化参数说明

参数	类型	说明	是否必填	备注	注意事项
app_key	String	开放平台应用 key	是	点击获取 AppKey	-
signedat	String	签名时的时间戳（精确到秒）	是	当前系统时间，五分钟内有效	-
webinar_id	String	活动ID	是	活动列表	-
email	String	参会邮箱	二选一	初始化sdk时 , 传入邮箱基于该邮箱参会	与 account 互斥，不可同时传入
account	String	三方用户ID	二选一	可通过创建三方用户	与 email 互斥，不可同时传入
username	String	用户昵称	是	用户昵称字段长度限制为 50 个字符	-
head	String	参会头像	否	邮箱参会时用户无头像，可与该字段共用	-
sign	String	签名结果本身	是		该字段不参与签名
sign_type	Number	验签规则切换	否	默认：0。 0: MD5 1:RSA	该字段不参与签名
modules	array	注册插件	否		SDK 运行配置
member_level	Number	观众等级	否	1 ～ 21	SDK 运行配置

签名规则

⚠️ 安全红线：严禁前端计算签名

sign 参数必须由业务服务端生成，严禁在小程序前端直接计算或存储 secret_key。

websdk、微信小程序SDK 均采用服务端签名鉴权机制，secret_key 属于核心敏感凭证，一旦泄露将面临严重安全风险。请遵循以下流程：

1.
前端：收集待签名参数，转交给后端；
2.
后端：使用受控的 secret_key 进行签名运算，返回 sign；
3.
初始化：应用（客户端）拿到 sign 后，再进行初始化 SDK。

👉 下一节将详解签名算法规则，并提供 Java 后端签名示例代码。

前提条件#

socket 合法域名#

request 合法域名#

集成步骤#

1. 下载项目#

文件夹结构如下：#

2. SDK 组件内部使用了微信官方提供的 UI 库 WeUI，因此您需要在项目的 app.json 文件中添加以下代码引入 WeUI 组件库：#

3. 参考以下步骤在项目的 page 页面实现横竖屏直播间：#

SDK 初始化参数说明#

签名规则#