本文介绍使用标准集成(无UI)方式接入互动直播微信小程序端的方法。
准备开发环境
开发互动直播微信小程序端的功能,如直播推流、观众观看、消息等,需要在小程序管理后台开通部分小程序组件权限并添加合法域名。具体操作如下:
打开小程序管理后台。
导航至开发 > 接口设置,开通live-pusher和live-player组件权限。
导航至开发 > 服务器设置 > socket合法域名,添加wss://wss.im.dingtalk.cn。
引入SDK
您可以通过以下链接下载SDK文件:小程序jssdk。
将下载后的SDK放置于您的小程序项目中。
uniapp以及其他多端框架也适用此SDK,不过此SDK只支持编译到微信小程序端。在编译时要选择对应端的SDK,否则会因为缺少全局变量(window、navigator等)而报错。
开始使用
RoomEngine鉴权
使用commonJS语法解构获取RoomEngine实例和EventNameEnum。
const { RoomEngine, EventNameEnum } = require('path/to/RoomPaasInteractionSdk.mina.min.js'); // 获取RoomEngine实例 const roomEngineInstance = RoomEngine.getInstance();
为RoomEngine配置初始化参数。
重要与Web端不同,微信小程序的deviceId是指能唯一标识当前设备的ID。获取deviceId需要使用getSingleDeviceId方法。
// 获取设备号deviceId,唯一标识当前设备 const deviceId = roomEngineInstance.getSingleDeviceId(); // 配置参数 const config = { appKey, // 创建应用时分配的appKey appId, // 创建应用时分配的appId deviceId, // 设备号deviceId,唯一标识当前设备 authTokenCallback, // 获取登录token的回调函数,需要返回Promise }; // 传入配置 roomEngineInstance.init(config);
其中
authTokenCallback
是一个返回Promise的函数,在微信小程序中用wx.request
请求时,需要自己构造Promise:const authTokenCallback = () => { return new Promise((resolve, reject) => { wx.request({ url: `${origin}/api/login/getToken`, // 这里使用客户服务端定义的API地址 data: { userId: '1234' // 根据客户服务端定义的请求参数 }, success(res) { resolve(res.data.result); // 根据客户服务端返回的数据结构 }, fail(err) { reject(err); } }); }); }
resolve的值来源于客户服务端SDK的接入回调,数据结构为:
interface AuthToken { accessToken: string; refreshToken: string; accessTokenExpiredTime: number; }
RoomEngine鉴权,建立WebSocket长链接。
// 返回promise代表auth结果 // 需要在.then里进行或者使用await后进行房间操作,如进入房间等 roomEngineInstance.auth(userId).then(() => { // 在这里才能获取RoomChannel实例进行房间操作 });
// 或者使用await await roomEngineInstance.auth(userId); // 在这里获取RoomChannel实例进行房间操作
在退出登录时需要调用logout,确保一个auth对应一个logout。
// logout也返回promise await roomEngineInstance.logout();
进入房间
通过roomId获取或创建对应的RoomChannel实例。
// roomId标识房间号,方法调用结果获取当前房间roomChannel实例 const roomChannel = roomEngineInstance.getRoomChannel(roomId);
调用enterRoom进入房间。必须先进入房间才能进行后续操作。
// 必须保证enterRoom完成后才能进行后续操作,nick为用户名。enterRoom返回Promise await roomChannel.enterRoom(nick);
使用
getPluginService(PluginId)
来获取原子能力插件实例。// 获取Chat插件实例 const chatServiceInstance = roomChannel.getPluginService('chat'); // 获取Live插件实例 const liveServiceInstance = roomChannel.getPluginService('live');
事件绑定。
每个原子能力(包括room)都是通过插件实例来监听自身事件的,具体的事件列表可以查阅Web接口列表。
// 事件定义 const enterRoomEventHandler = (data) => { console.log(data); } // 绑定Room事件 roomChannel.on(EventNameEnum.PaaSRoomEnter, enterRoomEventHandler); // 解绑事件 // SDK的事件系统允许绑定多个回调函数,如果需要解绑,请传入之前绑定时定义的函数 roomChannel.remove(EventNameEnum.PaaSRoomEnter, enterRoomEventHandler); // 其他实例绑定方法是一样的 // 绑定Chat事件,匿名函数 chatServiceInstance.on(EventNameEnum.PaaSChatReciveComment,(data) => { console.log(data); }); // 解绑事件 // 如果在绑定时使用匿名函数,或者需要清空所有的绑定,可以不用传第二个参数 chatServiceInstance.remove(EventNameEnum.PaaSChatReciveComment);
退出房间。
// 退出房间时必须调leaveRoom,不然可能会导致状态不正常 roomChannel.leaveRoom();
API参考
房间实例RoomChannel
在RoomChannel上可以调用房间的相关操作,比如进出房间、设置公告、查看房间内观众列表等。
// 进入房间
roomChannel.enterRoom(nick);
// 异步获取房间信息
roomChannel.getRoomDetailAsync();
// 分页获取房间用户在线列表
// pageIndex从1开始
roomChannel.listUser(pageIndex, pageSize);
// 下面的方法需要房间所有者才可以调用
// 更新房间公告
roomChannel.updateNotice(notice);
// 更新房间标题
roomChannel.updateTitle(title);
// 踢出用户
roomChannel.kickUser(userId));
原子能力插件实例
使用getPluginService(PluginId)
获取到各个原子能力插件的实例后,就可以使用实例上的方法了。根据原子能力的组合可以实现不同的业务场景。
- 互动Chat:
负责直播时的弹幕、点赞、自定义消息、禁言相关功能。
// 获取目前聊天系统的信息,包括点赞数、是否被禁言、发送弹幕的最大长度等 const chatDetail = await chatServiceInstance.getChatDetail(); // 发送弹幕 // 第二个参数是extension字段,内容会透传给事件和弹幕列表,可以用来实现用户头像等功能 chatServiceInstance.sendComment(content, { avatar: 'xxx.xxx.png' }); // 异步获取房间信息 // sortType 排序方式,0-时间递增顺序,1-时间递减顺序 chatServiceInstance.listComment(sortType, pageIndex, pageSize); // 点赞,连续调用(用户连续点击)时在sdk内部合并请求 // 连续点赞场景一般实现:每次用户点击前端+1点赞数并调用sendLike, // 收到点赞事件后用事件里的点赞数覆盖前端点赞数 chatServiceInstance.sendLike(); // 下面的方法需要房间所有者才可以调用 // 禁言全体 chatServiceInstance.banAllComment(); // 取消禁言全体 chatServiceInstance.cancelBanAllComment(); // 禁言某个用户 muteSeconds 禁言时长(s) chatServiceInstance.banComment(userId, muteSeconds); // 取消禁言某个用户 muteSeconds 禁言时长(s) chatServiceInstance.cancelBanComment(userId, muteSeconds); // 发送自定义消息给房间所有用户,可以用来实现自定义效果,如答题卡、发送商品信息等 chatServiceInstance.sendCustomMessageToAll(body);
- 直播Live:负责直播相关信息的获取。重要
与Web版本封装了AliPlayer不同,小程序端需使用live-player进行播放,使用live-pusher进行推理流,相关域名、组件需要客户自己在微信端进行配置。
// 获取live信息,包括各种版本的拉流地址 // liveUrl: flv拉流地址 // pushUrl: rtmp推流地址 // 在获取到拉流地址后,把地址赋值给相应播放器,如微信小程序使用live-player const liveDetail = await liveServiceInstance.getLiveDetail(); // 由于没有封装播放器,需要手动数据上报 // 开始/继续播放数据上报 liveServiceInstance.startLiveTiming(); // 结束/暂停播放数据上报 liveServiceInstance.endLiveTiming(); // 接收相应事件 liveServiceInstance.on(EventNameEnum.PaaSLiveCreate, (e) => { // 直播被创建 }); liveServiceInstance.on(EventNameEnum.PaaSLivePublish, (e) => { // 直播开始,可以尝试拉流了 }); liveServiceInstance.on(EventNameEnum.PaaSLiveStop, (e) => { // 直播结束 });
- 本页导读 (1)