概述
对 Electron 直播推流助手的核心功能以及如何进行快速接入进行详细的介绍。只需简单几步，您就能快速启动一个功能强大的桌面端高清视频直播软件。
功能展示
本地混流
支持多种媒体源本地混流并自由排版（位置、大小、层级可编辑）：
摄像头。
屏幕/窗口分享。
本地图片。
本地视频：支持 mp4，mkv，mov 视频格式。
在线视频：支持 http，https，rtmp 协议在线视频流。
1. 摄像头、屏幕分享和图片混流
2. 本地视频和在线视频混流
排版与编辑
功能说明：画面源可任意移动、缩放、吸附到边缘、调整显示层级、旋转与镜像。
2K 高清直播
功能说明：支持 2560×1440 分辨率本地混流与推流，需在高编码档位与充足带宽/硬件下启用以获得最佳画质。
分辨率与帧率范围：支持 720p/1080p/2K 视频，最高 60 fps。
高级美颜
功能说明：提供丰富美颜与美妆项，可对每路视频流独立配置，支持虚拟背景替换与滤镜叠加。
说明：
音频特效
功能说明：支持 13 种变声与 11 种混响效果，并支持本地或在线背景音乐播放（请确保音乐版权合规）。
直播连线与布局
竖屏模式：支持动态九宫格、固定九宫格、动态浮窗、固定浮窗四种布局，并支持自定义布局。
动态九宫格 | 固定九宫格 |
 |  |
固定浮窗 | 动态浮窗 |
 |  |
横屏模式：
1v3 连麦：主播可开启摄像头、麦克风。上麦观众仅支持开启麦克风，不支持开启摄像头。
视频高级设置
摄像头采集参数：支持设置采集的颜色空间与颜色区间（YUV 类），以适配不同编码/显示需求。
视频编码设置：支持设置编码颜色空间、颜色区间与编码档位。高编码档位可提升画质，但会增加 CPU/GPU 负载和网络带宽需求。
视频编码设置：支持设置编码颜色空间、颜色区间与编码档位。高编码档位可提升画质，但会增加 CPU/GPU 负载和网络带宽需求。
可选：对接封面上传服务（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/testhttp://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
快速接入
步骤1：环境配置及开通服务
步骤2：下载项目
git clone https://github.com/Tencent-RTC/ultra-live-electron.gitcd ultra-live-electronnpm install
步骤3：配置相关服务信息
您首先需要参考 准备工作 开通对应的服务，接着在 Demo 中打开
ultra-live-electron/src/debug/basic-info-config.js 文件，输入准备工作中激活服务时获得的 SDKAppID 和 SDKSecretKey。
步骤4：运行项目并进行开播
通过如下命令运行当前项目：
npm run start
运行项目后，您可以通过如下步骤开启第一场直播：
1. 添加视频源：点击界面左侧的添加按钮，选择您需要添加的视频源（摄像头、屏幕分享、图片等）。
2. 调整画面布局：鼠标拖拽移动和调整视频源大小，选中视频源（出现黄色边框）后右键单击，可进行旋转或层级调整。
3. 开始推流：点击界面上的开始直播按钮。按钮变为结束直播时说明已成功开播。
说明：
至此，您已完成了完整的直播推流助手跑通流程，可以随时开启您的直播。另外，该桌面端软件仅支持推流，若您需要观看直播，请使用手机端 App 或者 Web 浏览器，您需要运行 iOS、Android 或者 Web 端的 TUILiveKit，在直播列表中找到并进入您创建的直播间即可。您可以参考如下文档链接至观看页面进行集成或通过 Web Player 在线体验 立即验证观看效果。
打包构建
构建完成后，安装包位于
release 目录下。Windows:
npm run pack:win64
Mac:
npm run pack:mac-x64
自由定制
您可以在现有代码基础上对页面样式、布局、功能进行修改。所有页面代码位于
src 目录中，可参考源码结构进行扩展。替换 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。Mac 安装包图标，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（查看安装包图标是否正确）。常见问题
运行时提示“未购买套餐包或者已欠费”？
运行时提示“套餐包正在配置中暂未生效”？
该提示通常表示服务正在生效中。请等待约 5 分钟后再次尝试创建直播间。
创建直播间时提示“直播间 ID 只能包含字母、数字、下划线”？
请修改直播间 ID，仅使用字母、数字、下划线，然后重新开始直播。
登录失败 code: 2025（重复登录）？
请先退出其他终端的同账号登录，或更换用户 ID 后重试。
npm install 失败？
请先执行
node -v 检查 Node.js 版本是否为 18.0.0 或更高版本，然后重新执行安装命令。登录失败或无法完成鉴权？
请检查
SDKAppID 与 SDKSecretKey 是否填写正确，并确认二者来自同一个应用，且未包含多余空格或其他字符。
