ReaderMX.
七牛云

几行代码就能构建连麦 PK 直播间？你需要 QLiveKit！

七七牛云约 5 分钟

Image

更强的互动性，更有参与感的观看体验，让「连麦 PK」成为直播中最火的关键词。也有越来越多的行业，通过互动直播找到了新玩法，迎来了全新增长机遇。

然而，按传统方式来构建互动直播，不仅需要较长的时间周期，也需要技术人力，往往无法满足快速上线的需求。怎么办？

七牛云 QLiveKit，几行代码解决问题。

QLiveKit 是什么？

QLiveKit 是七牛云推出的一款互动直播低代码解决方案 SDK，让用户通过几行代码即可快速接入互动连麦 PK 直播。

在业务侧，基于七牛云音视频、直播、IM、AI 智能算法和网络等基础设施服务，实现创建房间、开播、推流、拉流、聊天室等功能。在此基础上，还提供房间管理、连麦、PK、带货、弹幕、礼物等各类丰富的业务插件，以及数据统计、业务事件扩展、业务流程扩展等服务。

与此同时，QLiveKit 在 UI 侧提供丰富的插件，小窗播放、美颜等功能一应俱全，帮助用户便捷地定制 UI。

Image

架构图

低代码，低在哪？

快速启动，快速定制，缩短周期，降本增效。低代码，意味着更低的门槛。

五行代码，即可开启一个直播间，并通过快速定制，在基础直播间上添加相应功能，满足不同行业需求。

val config = QLiveConfig("serverURL")QLive.init(appContext, config, tokenGetter)QLive.auth(callback)QLive.setUser(QUserInfo("your avatar", "your nick", extraInfo), callback)QLive.getLiveUIKit().launch(context) 

案例分享

定制业务及 UI 案例-家族 PK 直播间

在开通基础直播间后，假设我们的业务有如下定制化要求：

  • 要求 1: 主播有家族阵营，在直播间左上方显示主播家族信息，点击进入家族页面

  • 要求 2: 用户有 VIP 等级，VIP3 以上的用户才能发公屏聊天，否则提示充值并跳转到接入方的充值页面

对 QLiveKit 用户的 quserinfo { 头像，昵称，其他资料 }，需要自定义以下功能：

  • 增加接入的业务：quserinfo{ 头像，昵称，其他资料，家族，VIP }

  • 增加 UI：家族 UI 在线用户 VIP 等级显示

  • 增加充值业务流程

实现方式如下： 

步骤 1 - 对接用户系统，可在客户端或者服务端增加用户业务字段

QLive.setUser(QUserInfo().apply {    avatar = UserManager.avatar //设置当前用户头像    nick = UserManager.nickname //设置当前用户昵称    extension = HashMap<String, String>().apply {        //设置扩展字段        //绑定接入方的VIP        put("vip", UserInfoManager.getUserVip)        //绑定接入方的家族信息        put("family", UserInfoManager.getUserFamily())    }}, null)

步骤 2 - 定制 UI 自定义家族组件，在 QLiveComponent 的加入房间阶段，取出房间的家族扩展字段显示

//家族组件，继承 QLiveComponentclass FamilyView : QKitViewBindingFrameLayout {    override fun initView() {        setOnClickListener {            //取出自定义的家族信息            val familyInfo = roomInfo.anchor.extensions.get("family")            //点击点击跳转到家族页面            FamilyActivity.start(context, familyInfo)        }    }    //重写生命周期 - 加入房间阶段    override fun onJoined(roomInfo: QLiveRoomInfo) {        //取出房间的房主的家族扩展字段        val familyInfo = roomInfo.anchor?.extensions?.get("family")        //todo 显示字段到UI    }}

自定义发消息按钮，点击事件判断 QLiveComponent 成员变量 user（当前进入房间的用户)的 VIP 等级

//自定义发消息按钮 继承原来的发消息按钮复用原来的逻辑class CustomInputView : InputLinkView {    constructor(context: Context) : super(context){        //设置点击事件        setOnClickListener {            //判断进入房间的用户是不是VIP等级足够            if (((user.extensions.get("vip")?.toInt()) ?: 0) > 3) {                //调用打开软键盘                checkShowInputDialog()            } else {                //todo 跳转充值页面                //显示提示弹窗            }        }    }}

在拷贝的 UI 配置文件里替换和增加新的组件

<com.qlive.uikit.component.FrameLayoutSlidingCover>    <!-- 替换新的输入框 -->    <com.qlive.uikitpublicchat.CustomInputView        android:layout_width="0dp"        android:layout_height="32dp"        />    <!-- 其他原来的组件-->    <View layout_width=""        layout_height="" />    <!-- 家族UI-->    <!-- 放置左上角-->    <!-- 设置上边距200dp-->    <com.qlive.uikit.FamilyView        android:layout_gravity="top|start"        android:layout_height="wrap_content"        android:layout_marginTop="200dp"        android:layout_width="wrap_content" /></com.qlive.uikit.component.FrameLayoutSlidingCover>

设置新的布局

val roomPage = QLive.getLiveUIKit().getPage(RoomPage::class.java)//自定义房间页面观众房间的布局roomPage.playerCustomLayoutID = R.layout.customXXXlayout

启动后效果如下：

Image

业务扩展案例-相亲直播间

以连麦业务为例，QLiveKit 实现的基础业务为：

  • 房间中的多人连麦及连麦者的音视频状态

  • 连麦者的头像姓名资料

  • 上麦、下麦、开关麦等事件通知到房间所有人

内置连麦业务模型：连麦者 ：{音视频状态，用户资料，扩展字段 hashMap}

//连麦用户QMicLinker{    //麦上用户资料    public QLiveUser user    //扩展字段    public HashMap extension    //是否开麦克风    public boolean isOpenMicrophone    //是否开摄像头    public boolean isOpenCamera}//连麦服务QLinkMicService{    //开始上麦    //@param-extension:麦位扩展字段 @param-callBack:上麦成功失败回调    void startLink (HashMap extension,                    QCameraParam cameraParams,                    QMicrophoneParam microphoneParams,                    QLiveCallBack callBack)
    //跟新扩展字段    void updateExtension (QMicLinker micLinker, QExtension QExtension)
    //其他方法}//麦位监听QLinkMicServiceListener{    //有人上麦    //@param-micLinker:连麦者    public void onLinkerJoin(QMicLinker micLinker)
    //有人摄像头状态变化    //@param-micLinker:连麦者    public void onLinkerCameraStatusChange(QMicLinker micLinker)
    //有人扩展字段变化    //@param-micLinker:连麦者 @param-QExtension:扩展信息    public void onLinkerExtensionUpdate(QMicLinker micLinker, QExtension QExtension)    //其他方法}

假设接入相亲场景，对连麦业务的要求是：上麦者身份为红娘/女嘉宾/男嘉宾，红娘可以强制将男嘉宾踢出房间或闭麦，并且显示特殊的 UI 状态。

此时连麦业务模型：连麦者 ：{音视频状态，资料， 角色，被红娘禁用的状态} ，同时还需要自定义状态变化通知-红娘强制关麦状态。

QLiveKit 在业务模型侧提供了字段扩展机制和事件扩展机制，此刻可实现为：

val linkerExtParams = HashMap<String, String>().apply {    //上麦参数-添加自定义角色-红娘    put("role", "matchmaker")}//以红娘身份上麦service.startLink(linkerExtParams,                  QCameraParam(),                  QMicrophoneParam())//对某个说脏话的连麦者添加一个扩展字段标记为强制关麦val extension = QExtension().apply {    key = "Prohibit2Speak"    value = "1"}service.updateExtension(linker,extension)//连麦服务监听service.addMicLinkerListener(object : QLinkMicServiceListener {    //有人上麦    override fun onLinkerJoin(micLinker: QMicLinker) {        //取出连麦者的身份        val role = micLinker.extension["role"]        //todo 显示麦位UI    }    //扩展字段跟新监听    override fun onLinkerExtensionUpdate(micLinker: QMicLinker, extension: QExtension) {        if (extension.key == "Prohibit2Speak") {            //取出强制关麦状态            val value = extension.value        }    }})

通过以上的方式，我们就可以轻松构建连麦 PK 直播间。不仅如此，直播间的 UI 开发也可以通过 QLiveKit 低代码解决方案 SDK 快速完成，请继续关注，后续为你带来详细介绍。

Image

点击「阅读原文」 

即刻试用

KEEP THE THREAD GOING

更多来源文章