本文将指导您如何快速集成主播开播页,实现主播开播的能力,实现摄像头预览、美颜、音效、摄像头翻转、观众连麦、主播连线、直播间信息展示、观众列表、礼物和弹幕等功能。
功能预览
主播开播预览 | 主播直播中 | 主播连麦中 |
![]() | ![]() | ![]() |
前提条件
在开始集成主播开播页前,需要先完成以下步骤:
1. 已集成核心文件:您已经按照 代码集成指引 将 TUILiveKit 的
pages
、 uni_modules
、utils
等核心文件拷贝到了您的项目中。2. 已完成登录:您的应用已经调用了登录接口并成功登录。这是使用所有功能的基础。
3. 已制作并使用自定义基座:由于直播功能依赖原生插件,您必须在 HBuilderX 中为您的项目制作并使用自定义调试基座来运行。
页面功能
主播开播页支持设置音效,基础美颜功能。
主播开播页接入
注册主播开播页面
现在,您需要在
pages.json
文件中告诉您的应用,这个新页面是存在的。打开您项目根目录下的
pages.json
文件,在 "pages"
数组中,添加以下对象来注册主播开播页。{"pages": [// ... 您项目已有的其他页面配置{"path": "pages/anchor/index","style": {"navigationBarTitleText": "","disableSwipeBack": true, // 禁止右滑返回,防止直播中误操作退出"app-plus": {"titleNView": false // 隐藏原生导航栏,使用页面内的自定义导航}}}]// ... 其他配置}
跳转主播开播页面
在您需要开启直播的地方(具体由您的业务决定,在其点击事件里执行),调用
uni.navigateTo
或 uni.redirectTo
方法,即可进入主播开播页面。// 示例:在一个按钮的点击事件中function startBroadcast() {// 跳转到主播开播页uni.redirectTo
({url: '/pages/anchor/index' // URL 对应 pages.json 中配置的 path});}
说明:
navigateTo
vs redirectTo
uni.navigateTo
:保留当前页面,跳转到新页面。主播可以从开播页返回到上一页。适用于开播前可以取消的场景。uni.redirectTo
:关闭当前页面,跳转到新页面。主播无法返回。适用于点击后直接进入开播流程的场景。 您可以根据自己的业务需求选择使用。