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

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

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

QLiveKit 是什么？

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

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

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

低代码，低在哪？

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

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

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 的加入房间阶段，取出房间的家族扩展字段显示

//家族组件，继承 QLiveComponent

class 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

启动后效果如下：

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

以连麦业务为例，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 直播间。