即时通信 IM 主播开播(PC 推流助手)

对 Electron 直播推流助手的核心功能以及如何进行快速接入进行详细的介绍。只需简单几步,你就能快速启动一个功能强大的桌面端高清视频直播软件。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

三、本地混流

支持多种媒体源本地混流并自由排版(位置、大小、层级可编辑):

·摄像头。

·屏幕/窗口分享。

·本地图片。

·本地视频:支持 mp4,mkv,mov 视频格式。

·在线视频:支持 http,https,rtmp 协议在线视频流。

六、排版与编辑

功能说明:画面源可任意移动、缩放、吸附到边缘、调整显示层级、旋转与镜像。

七、高级美颜

功能说明:提供丰富美颜与美妆项,可对每路视频流独立配置,支持虚拟背景替换与滤镜叠加。

注意:说明:

注意:若你需要高级美颜能力,请单独购买腾讯特效 SDK 套餐:美颜特效移动端/PC 端计费说明。详细操作步骤可参阅 跑通 demo: Electron 中的“可选:对接腾讯特效 SDK 美颜功能”章节。

八、连线、PK 与视频布局

·竖屏模式:支持动态九宫格、固定九宫格、动态浮窗、固定浮窗四种布局。

动态九宫格 固定九宫格
 
固定浮窗 动态浮窗
 

·横屏模式:

·1v3 连麦:主播可开启摄像头、麦克风。上麦观众仅支持开启麦克风,不支持开启摄像头。

九、可选:对接封面上传服务(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

十一、步骤1:环境配置及开通服务

在进行快速接入之前,你需要参考 准备工作(Electron),满足相关环境配置及开通对应服务。

十二、步骤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:

# macOS Intelnpm run pack:mac-x64# macOS Apple siliconnpm run pack:mac-arm64

十六、自由定制

你可以在现有代码基础上对页面样式、布局、功能进行修改。所有页面代码位于 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 分钟后重试。

20、运行时提示“套餐包正在配置中暂未生效”?

该提示通常表示服务正在生效中。请等待约 5 分钟后再次尝试创建直播间。

21、创建直播间时提示“直播间 ID 只能包含字母、数字、下划线”?

请修改直播间 ID,仅使用字母、数字、下划线,然后重新开始直播。

22、登录失败 code: 2025(重复登录)?

请先退出其他终端的同账号登录,或更换用户 ID 后重试。

23、npm install 失败?

请先执行 node -v 检查 Node.js 版本是否为 18.0.0 或更高版本,然后重新执行安装命令。

24、登录失败或无法完成鉴权?

请检查 SDKAppID 与 SDKSecretKey 是否填写正确,并确认二者来自同一个应用,且未包含多余空格或其他字符。

赞 (0)
上一篇 4天前
下一篇 4天前