一、开通服务
请参考 开通服务 领取 TUILiveKit 体验版,并在 应用管理 页面获取以下信息:
·SDKAppID:应用标识(必填),腾讯云基于 SDKAppId 完成计费统计。
·SDKSecretKey:应用密钥,用于初始化配置文件的密钥信息。
二、环境准备
在运行 demo 前,请确认你的本地环境满足以下条件:
·操作系统:Windows 10+、macOS(Intel / Apple silicon)
·设备:摄像头、麦克风、扬声器
·Node.js:18.0.0 或更高版本
三、获取 demo
git clone https://github.com/Tencent-RTC/ultra-live-electron.gitcd ultra-live-electronnpm install
四、配置 demo
你需要参见 开通服务,在 demo 中打开 ultra-live-electron/src/debug/basic-info-config.js 文件,输入准备工作中激活服务时获得的 SDKAppID 和 SDKSecretKey。
五、运行 demo
通过如下命令运行当前工程。
npm run start
运行 demo 后,你可以通过如下步骤丰富你的直播内容,开启你的第一场直播内容。
1. 添加画面源:在开播前,你需要添加直播画面源。目前支持:摄像头、屏幕分享、窗口分享、图片、本地视频、在线视频。点击界面左侧的添加按钮,选择你需要添加的画面源。
2. 调整画面布局:通过鼠标拖拽移动和调整视频源的大小,选中视频源(出现黄色边框)后,右键单击可弹出快捷菜单,进行旋转或调整显示层级。
3. 开始推流:点击界面上的 “开始直播” 按钮。按钮变为 “结束直播” 时,说明已成功开启直播推流。
注意:说明:
注意:至此,你已完成了完整的直播推流助手跑通流程,可以随时开启你的直播。另外,该桌面端软件仅支持推流,若你需要观看直播,请使用手机端 App 或者 Web 浏览器,你需要运行 iOS、Android 或者 Web 端的 TUILiveKit,在直播列表中找到并进入你创建的直播间即可。你可以参考如下文档链接至观看页面进行集成或通过 Web Player 在线体验 立即验证观看效果。
六、可选:对接封面上传服务(upload-server)
如需直播封面上传能力,可按以下步骤配置:
1. 准备环境文件
cp upload-server/.env.example upload-server/.env
2. 配置存储服务: 在 upload-server/.env 中配置存储服务(COS 或自定义对象存储)。
·STORAGE_PROVIDER:可配置 COS | custom | oss。
·COS_SECRET_ID:开发者拥有的项目身份识别 ID,用于身份认证,可在 API 密钥管理 页面获取。
·COS_SECRET_KEY:开发者拥有的项目身份密钥,可在 API 密钥管理 页面获取。
·COS_BUCKET:存储桶,COS 中用于存储数据的容器。有关存储桶的进一步说明,请参见 存储桶概述 文档。
·COS_REGION:地域信息,枚举值可参见 可用地域 文档,例如:ap-beijing、ap-hongkong、eu-frankfurt 等。
3. 安装并启动 upload-server:
npm run upload-server:bootstrapnpm run upload-server:standalone
4. 验证服务可用性:
·http://127.0.0.1:3071/api/test
·http://127.0.0.1:3071/api/upload/config
注意:说明:
注意:如 upload-server 不可用,界面会自动回退为手动输入封面 URL, 渲染进程默认请求 http://127.0.0.1:3071。如果图片上传服务部署在远端,请参考下一步设置 VUE_APP_UPLOAD_SERVER_BASE_URL。
5. 配置上传服务地址:
# 本次启动临时生效VUE_APP_UPLOAD_SERVER_BASE_URL=https://your-upload-domain npm run start# 本次构建临时生效VUE_APP_UPLOAD_SERVER_BASE_URL=https://your-upload-domain npm run build
七、可选:对接腾讯特效 SDK 美颜功能
摄像头添加、编辑时,可以设置高级美颜功能,包括:美颜模板、美颜、美型、美妆、美体、动效、虚拟背景等丰富特效。
1. 开通 腾讯特效 SDK 服务,可申请 免费体验版。
申请成功后,将获得腾讯特效 SDK 的证书信息: licenseURL 和 licenseKey。
2. 配置腾讯特效 SDK 运行时 绑定的进程名。
下图以在 demo 工程体验中体验腾讯特效 SDK 的美颜功能为例,配置运行时绑定的进程信息:
App Name: ultra-live-electron(可自由定义)
winProcess Name:liteav_media_server.exe(Windows 端暂不支持自定义,必须配置这个名称)
MacBundle ID:com.tencentcloud.trtc.ultra-live-electron.helper.Renderer(Mac 端支持自定义,.helper.Renderer 前的内容对应 Electron 应用构建配置中的 appId)
3. 在 github demo 工程中配置腾讯特效 SDK 证书
在 demo 中,打开 src/TUILiveKit/utils/beauty.ts 文件,填入腾讯特效 SDK 证书信息:licenseURL 和 licenseKey。
八、打包构建
构建完成后,安装包位于 release 目录下。
Windows:
npm run pack:win64
macOS:
# macOS Intelnpm run pack:mac-x64# macOS Apple siliconnpm run pack:mac-arm64
九、运行时提示“未购买套餐包或者已欠费”?
请前往 购买套餐包 或 开通体验版。首次开通后可能存在服务生效延迟,建议等待约 5 分钟后重试。
十、运行时提示“套餐包正在配置中暂未生效”?
该提示通常表示服务正在生效中。请等待约 5 分钟后再次尝试创建直播间。
十一、创建直播间提示“直播间 ID 只能包含字母、数字、下划线”?
请修改直播间 ID,仅使用字母、数字、下划线,然后重新开始直播。
十二、登录失败 code: 2025(重复登录)?
请先退出其他终端的同账号登录,或更换用户 ID 后重试。
十三、npm install 失败?
请先执行 node -v 检查 Node.js 版本是否为 18.0.0 或更高版本,然后重新执行安装命令。
十四、登录失败或无法完成鉴权?
请检查 SDKAppID 与 SDKSecretKey 是否填写正确,并确认二者来自同一个应用,且未包含多余空格或其他字符。
十五、如何替换 logo?
1. 顶部主 logo(主界面左上角)
·直接修改 LogoIcon.vue 的 SVG path 为你的品牌 SVG。
·如果要修改右侧文字 LiveKit,你需要修改文件 LiveHeader/index.vue。
2. 应用图标
·替换 public/favicon.ico(网页图标)。
·Windows 安装包图标, 替换 img/tuiroom.ico, 配置位置 electron-builder.json5 里 win.icon,nsis.installerIcon,nsis.uninstallerIcon。
·macOS 安装包图标,electron-builder.json5 下配置中设置 mac.icon,建议使用 .icns 文件(例如 img/tuiroom.icns),并将 mac.icon 指向该文件。
3. 验证步骤
·npm run start(看登录页+主界面 logo 是否正确)。
·npm run pack:win64(看安装包图标是否正确)。
·npm run pack:mac-x64或 npm run pack:mac-arm64(看安装包图标是否正确)。