文档

微信小程序端集成

更新时间:

本文介绍使用标准集成(无UI)方式接入互动直播微信小程序端的方法。

准备开发环境

开发互动直播微信小程序端的功能,如直播推流、观众观看、消息等,需要在小程序管理后台开通部分小程序组件权限并添加合法域名。具体操作如下:

  1. 打开小程序管理后台。

  2. 导航至开发 > 接口设置,开通live-pusher和live-player组件权限。

  3. 导航至开发 > 服务器设置 > socket合法域名,添加wss://wss.im.dingtalk.cn。

引入SDK

  1. 您可以通过以下链接下载SDK文件:小程序jssdk

  2. 将下载后的SDK放置于您的小程序项目中。

重要

uniapp以及其他多端框架也适用此SDK,不过此SDK只支持编译到微信小程序端。在编译时要选择对应端的SDK,否则会因为缺少全局变量(window、navigator等)而报错。

开始使用

RoomEngine鉴权

  1. 使用commonJS语法解构获取RoomEngine实例和EventNameEnum。

    const { RoomEngine, EventNameEnum } = require('path/to/RoomPaasInteractionSdk.mina.min.js');
    
    // 获取RoomEngine实例
    const roomEngineInstance = RoomEngine.getInstance();
  2. 为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;
    }
  3. RoomEngine鉴权,建立WebSocket长链接。

    // 返回promise代表auth结果
    // 需要在.then里进行或者使用await后进行房间操作,如进入房间等
    roomEngineInstance.auth(userId).then(() => {
      // 在这里才能获取RoomChannel实例进行房间操作
    });
    // 或者使用await
    await roomEngineInstance.auth(userId);
    // 在这里获取RoomChannel实例进行房间操作
  4. 在退出登录时需要调用logout,确保一个auth对应一个logout。

    // logout也返回promise
    await roomEngineInstance.logout();

进入房间

  1. 通过roomId获取或创建对应的RoomChannel实例。

    // roomId标识房间号,方法调用结果获取当前房间roomChannel实例
    const roomChannel = roomEngineInstance.getRoomChannel(roomId);
  2. 调用enterRoom进入房间。必须先进入房间才能进行后续操作。

    // 必须保证enterRoom完成后才能进行后续操作,nick为用户名。enterRoom返回Promise
    await roomChannel.enterRoom(nick);
  3. 使用getPluginService(PluginId)来获取原子能力插件实例。

    // 获取Chat插件实例
    const chatServiceInstance = roomChannel.getPluginService('chat');
    
    // 获取Live插件实例
    const liveServiceInstance = roomChannel.getPluginService('live');
  4. 事件绑定。

    每个原子能力(包括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);
  5. 退出房间。

    // 退出房间时必须调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)
文档反馈