导语：直播作为营销和转化的有力工具，已经逐渐被大众所认可，直播场景常态化、规范化。细分之下，直播也分为众多的的赛道，企业直播、电商带货、知识传播纷纷拥抱直播渠道。开箱即用、稳定流畅、支持定制成为了企业快速上线属于自己的直播工具的核心诉求。
- TRTC 推出带 UI 的 Web 端推拉流组件 -
为助力客户快速上线支持推拉流及个性化设置场景的产品，腾讯云实时音视频 TRTC 联合腾讯云即时通信 IM 推出 Web 端直播场景推拉流解决方案 TUIPusher（推流端场景化组件） 及 TUIPlayer（拉流端场景化组件）。TUIPusher 和 TUIPlayer为开箱即用的含 UI 套件，且覆盖直播场景的通用功能开发。
github链接：
https://github.com/tencentyun/TUILiveRoom/tree/main/Web/TUIPusher；
https://github.com/tencentyun/TUILiveRoom/tree/main/Web/TUIPlayer。
为了方便客户更加快速的体验 TUIPusher & TUIPlayer 的功能，我们结合用户管理系统和房间管理系统提供了体验链接。（注：同时体验 TUIPusher 和 TUIPlayer 的效果需要登录两个不同账号）
TUIPusher ：
https://web.sdk.zijiebao.com/component/tuiliveroom/tuipusher/create-room.html
TUIPlayer ：
https://web.sdk.zijiebao.com/component/tuiliveroom/tuiplayer/login.html
- TUIPusher 及 TUIPlayer 功能介绍 -
通过调研企业直播、知识培训、电商直播、嘉宾分享等多种直播场景的功能需求，TUIPusher 及 TUIPlayer 组件提供了多种通用性功能。
比如针对企业直播等可能出现人数众多的场景，TUIPlayer 提供 RTC观看，快直播观看和标准直播观看三条线路，充分支持客户对低延迟，高性价比，高并发等多样化的直播需求。
针对知识传播，比如财商直播、知乎直播等有干货内容输出的场景，TUIPusher 支持主播推流的同时进行屏幕共享，满足了主播结合 PPT 进行直播的讲解需求。
以下是TUIPusher 及 TUIPlayer 详细功能列表：
TUIPusher 推流组件：
- 支持采集麦克风和扬声器的流并推流可根据需求设置视频参数（帧率，分辨率，码率）
- 支持开启美颜并设置视频美颜参数
- 支持采集屏幕分享流并推流
- 支持推流到腾讯云实时音视频后台，推流到腾讯云 CDN
- 支持在线聊天室，和在线观众进行聊天互动
- 支持获取观众列表，对在线观众进行禁言操作
TUIPlayer 拉流组件：
- 支持同时播放音视频流和屏幕分享流
- 支持在线聊天室，和在线观众进行聊天互动
- 支持超低延时直播（300ms 延时）, 快直播（1000ms 以内延时）以及标准直播（支持超高并发观看）三种拉流线路
- TUIPusher 及 TUIPlayer 快速接入 -
步骤1：账号准备
TUIPusher & TUIPlayer 基于腾讯云实时音视频和即时通讯服务进行开发。
1. 注册腾讯云账号 并开通 实时音视频 和 即时通讯 服务。
2. 在 实时音视频控制台 单击 应用管理 > 创建应用 创建新应用。
3. 在 应用管理 > 应用信息 中获取 SDKAppID 信息。
4. 在 应用管理 > 快速上手 中获取应用的 secretKey 信息。
注意：
- 首次创建实时音视频应用的腾讯云账号，可获赠一个10000分钟的音视频资源免费试用包。
- 创建实时音视频应用之后会自动创建一个 SDKAppID 相同的即时通信 IM 应用，可在 即时通讯控制台 配置该应用的套餐信息。
步骤2：项目准备
1. 在 GitHub（https://github.com/tencentyun/TUILiveRoom/tree/main/Web） 下载 TUIPusher & TUIPlayer 代码；为 TUIPusher & TUIPlayer 安装依赖。
cd Web/TUIPushernpm install
cd Web/TUIPlayernpm install2. 将 sdkAppId 和 secretKey 填入TUIPusher/src/config/basic-info-config.js 及 TUIPlayer/src/config/basic-info-config.js 配置文件中。
3. 本地开发环境运行 TUIPusher & TUIPlayer。
cd Web/TUIPushernpm run serve
cd Web/TUIPlayernpm run serve可打开 http://localhost:8080 和 http://localhost:8081 体验 TUIPusher 和 TUIPlayer 功能。
可更改 TUIPusher/src/config/basic-info-config.js 及TUIPlayer/src/config/basic-info-config.js 配置文件中的房间，主播及观众等信息，注意保持 TUIPusher 和 TUIPlayer 的房间信息，主播信息一致。
完成以上配置，您可以使用 TUIPusher & TUIPlayer 进行超低延时直播，如您需要支持快直播和标准直播，请继续阅读步骤3：旁路直播。
步骤3：旁路直播
TUIPusher & TUIPlayer 实现的快直播和标准直播依托于腾讯云的云直播服务，因此支持快直播和标准直播线路需要您开启旁路推流功能。
1. 在 实时音视频控制台 中为您正在使用的应用开启旁路推流配置，可按需开启指定流旁路或全局自动旁路。
2. 请在 域名管理 页面添加自有播放域名，具体请参见「添加自有域名」（https://cloud.tencent.com/document/product/267/20381）。
3. 在 TUIPlayer/src/config/basic-info-config.js 配置文件中配置播放域名。
完成以上配置，您可以体验 TUIPusher & TUIPlayer 支持超低延时直播，快直播以及标准直播的所有功能。
- 业务扩展 -
TUIPusher 及 TUIPlayer UI 组件为您提供了快速集成腾讯云实时音视频 TRTC 及 腾讯云即时通讯 IM 用于直播场景的解决方案。在推拉流 UI 组件的基础上，您可以结合用户管理系统及房间管理系统完善业务链路，增加点赞，在线商城，口令红包，答题抽奖等个性化功能丰富业务场景。
详细业务流程可参考下图：
- 最佳实践 -
在腾讯云CSIG3周年的直播活动中，TRTC团队承接了这一任务，由于是面向2W人的整个事业群，网络的稳定性就显得尤为重要。兼顾轻量的原则，最终主播端选用了web端的方案，并且利用专线保障网络，任意一台配置合格的电脑即可开播。而在观看端选择了轻量化的小程序。
在业务上，既有保障直播效果的线路选择，还有核心的直播带货功能，更有点赞、送礼、口令红包等互动玩法，需求方在TUI pusher的基础上，加上业务测试时间，耗时两周，快速上线口令红包、商品上下架、商品讲解等功能。
- 结语 -
在后续的迭代中, TRTC Web 端推拉流组件会逐渐与 iOS, Andriod 等各端连通，并在 Web端实现观众连麦、高级美颜、自定义布局、转推多平台、上传图片文字音乐等能力，欢迎大家多多使用、提出您的宝贵意见。
如果有任何需要或者反馈，可扫描下方二维码，或者点击「阅读原文」通过反馈链接（https://cloud.tencent.com/apply/p/jpkje0im7a）同步给我们。
此外，我们欢迎加入TUI组件使用交流 QQ 群（群号：592465424）进行技术交流和问题反馈。
腾讯云音视频在音视频领域已有超过21年的技术积累，持续支持国内90%的音视频客户实现云上创新，独家具备 RT-ONE™ 全球网络，在此基础上，构建了业界最完整的 PaaS 产品家族，并通过腾讯云视立方 RT-Cube™ 提供All in One 的终端SDK，助力客户一键获取众多腾讯云音视频能力。腾讯云音视频为全真互联时代，提供坚实的数字化助力。
