前言
即时通信 IM 针对不同需求及不同场景，提供了一系列解决方案。即时通信 IM 强大的聊天室互动能力、关系链托管、第三方回调能力，完美契合直播场景对于聊天互动、观众管理、互动抽奖等需求，并且考虑开发者对于直播的低延时需求和开发者快速接入的诉求，IM 联合 TRTC 推出带 UI 的 Web 端互动直播推拉流组件 TUIPusher & TUIPlayer。
本次推出的 TUIPusher 和 TUIPlayer 组件涵盖观众列表、聊天互动、美颜、屏幕共享等功能，开箱即用，适配主流的桌面浏览器。TUIPusher 及 TUIPlayer 功能演示请观看下图。同时，我们结合用户管理系统和房间管理系统提供了 TUIPusher 体验链接 及 TUIPlayer 体验链接。
功能介绍
TUIPusher 推流组件
支持采集摄像头和麦克风的流并推流
可根据需求设置视频参数（帧率，分辨率，码率）
支持开启美颜并设置视频美颜参数
支持采集屏幕分享流并推流
支持推流到腾讯云实时音视频后台，推流到腾讯云 CDN
支持在线聊天室，和在线观众进行聊天互动
支持获取观众列表，对在线观众进行禁言操作
TUIPlayer 拉流组件
支持同时播放音视频流和屏幕分享流
支持在线聊天室，和主播及其他观众进行聊天互动
支持超低延时直播（300ms 延时）, 快直播（1000ms 以内延时）以及标准直播（支持超高并发观看）三种拉流线路
兼容桌面浏览器及移动端浏览器，支持移动端浏览器横屏观看
注意
部分浏览器不支持 WebRTC，只能使用标准直播线路观看，如需体验其他线路，请尝试更换浏览器。
接入方式
注意事项
TUIPusher & TUIPlayer 基于腾讯云实时音视频和即时通信服务进行开发。实时音视频 TRTC 应用与 即时通信 IM 应用的 SDKAppID 一致，才能复用账号与鉴权。
本地计算 UserSig 的方式仅用于本地开发调试，请勿直接发布到线上，一旦 SECRETKEY 泄露，攻击者就可以盗用您的腾讯云流量。正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
步骤一：开通腾讯云服务
步骤1：创建即时通信 IM 应用
1. 登录 即时通信 IM 控制台，单击 创建新应用 将弹出对话框。
2. 输入您的应用名称，单击 确认 即可完成创建。
3. 您可在 即时通信 IM 控制台 总览页面查看新建应用的状态、业务版本、SDKAppID、创建时间以及到期时间。请记录 SDKAppID 信息。
步骤2：获取 IM 密钥并开通实时音视频服务
1. 在 即时通信 IM 控制台 总览页单击您创建完成的即时通信 IM 应用，随即跳转至该应用的基础配置页。在 基本信息 区域，单击 显示密钥，复制并保存密钥信息。
注意
请妥善保管密钥信息，谨防泄露。
2. 在该应用的基础配置页，开通腾讯云实时音视频服务。
步骤二：项目准备
1. 在 GitHub 下载 TUIPusher & TUIPlayer 代码。
2. 为 TUIPusher & TUIPlayer 安装依赖。
cd Web/TUIPushernpm installcd Web/TUIPlayernpm install
3. 将 sdkAppId 和 secretKey 填入 
TUIPusher/src/config/basic-info-config.js 及 TUIPlayer/src/config/basic-info-config.js 配置文件中。
4. 本地开发环境运行 TUIPusher & TUIPlayer。
cd Web/TUIPushernpm run servecd Web/TUIPlayernpm run serve
5. 可打开
http://localhost:8080 和 http://localhost:8081 体验 TUIPusher 和 TUIPlayer 功能。6. 可更改
TUIPusher/src/config/basic-info-config.js 及 TUIPlayer/src/config/basic-info-config.js 配置文件中的房间，主播及观众等信息，注意保持 TUIPusher 和 TUIPlayer 的房间信息，主播信息一致。注意
完成以上配置，您可以使用 TUIPusher & TUIPlayer 进行超低延时直播，如您需要支持快直播和标准直播，请继续阅读 步骤三：旁路直播。
本地计算 UserSig 的方式仅用于本地开发调试，请勿直接发布到线上，一旦您的
SECRETKEY 泄露，攻击者就可以盗用您的腾讯云流量。正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
步骤三：旁路直播
1. 在 实时音视频控制台 中为您正在使用的应用开启旁路推流配置，可按需开启指定流旁路或全局自动旁路。
3. 在
TUIPlayer/src/config/basic-info-config.js 配置文件中配置播放域名。完成以上配置，您可以体验 TUIPusher & TUIPlayer 支持超低延时直播，快直播以及标准直播的所有功能。
步骤四：生产环境应用
当您将 TUIPusher & TUIPlayer 用于生产应用时，在接入 TUIPusher & TUIPlayer 之外，您需要：
创建用户管理系统，用于管理产品用户信息，包括但不限于用户 ID，用户名，用户头像等。
创建房间管理系统，用于管理产品直播间信息，包括但不限于直播间 ID、直播间名称，直播间主播信息等。
服务端生成 UserSig。
注意
本文生成 UserSig 的方式，是在客户端根据您填入的 sdkAppId 及 secretKey 生成 userSig，该方式的 secretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 TUIPusher & TUIPlayer 进行功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的应用向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
参考 
TUIPusher/src/pusher.vue 及 TUIPlayer/src/player.vue 文件，将用户信息、直播间信息、SDKAppId 及 UserSig 等账号信息提交到 vuex 的 store 进行全局存储，您就可以跑通推拉流两个客户端的所有功能。详细业务流程参见下图：
可选操作：开通内容审核功能
在直播场景中，用户很可能会发送不合适的内容，特别是与敏感事件/人物相关、黄色不良内容等令人反感的内容，不仅严重损害了用户们的身心健康，更很有可能违法并导致业务被监管部门查封。
即时通信 IM 支持内容审核（反垃圾信息）功能，可针对不安全、不适宜的内容进行自动识别、处理，为您的产品体验和业务安全保驾护航。可以通过以下两种内容审核方式来实现：
本地审核功能：在客户端本地检测在单聊、群聊、资料场景中由即时通信 SDK 发送的文本内容，支持对已配置的敏感词进行拦截或者替换处理。此功能通过在 IM 控制台开启服务并配置词库的方式实现。
云端审核功能：在服务端检测由单聊、群聊、资料场景中产生的文本、图片、音频、视频内容，支持针对不同场景的不同内容分别配置审核策略，并对识别出的不安全内容进行拦截。此功能已提供默认预设拦截词库和审核场景，只需在 IM 控制台打开功能开关，即可直接使用。
相关问题
Web 端如何实现美颜功能？
Web 端如何实现屏幕共享？
Web 端如何实现云端录制?
开启 云端录制，请参考 实现云端录制与回放。
开启云端录制 > 指定用户录制之后，Web 端可通过在调用 TRTC.createClient 接口时传入 userDefineRecordId 参数开启录制。
Web 端如何实现推流到 CDN ？
Web 端如何实现快直播拉流？
Web 端如何实现标准直播拉流？
注意事项
平台支持
操作系统 | 浏览器类型 | 浏览器最低版本要求 | TUIPlayer | TUIPusher | TUIPusher 屏幕分享 |
Mac OS | 桌面版 Safari 浏览器 | 11+ | 支持 | 支持 | 支持（需要 Safari13+ 版本） |
Mac OS | 桌面版 Chrome 浏览器 | 56+ | 支持 | 支持 | 支持（需要 Chrome72+ 版本） |
Mac OS | 桌面版 Firefox 浏览器 | 56+ | 支持 | 支持 | 支持（需要 Firefox66+ 版本） |
Mac OS | 桌面版 Edge 浏览器 | 80+ | 支持 | 支持 | 支持 |
Mac OS | 桌面版微信内嵌网页 | - | 支持 | 不支持 | 不支持 |
Mac OS | 桌面版企业微信内嵌网页 | - | 支持 | 不支持 | 不支持 |
Windows | 桌面版 Chrome 浏览器 | 56+ | 支持 | 支持 | 支持（需要 Chrome72+ 版本） |
Windows | 桌面版 QQ 浏览器（极速内核） | 10.4+ | 支持 | 支持 | 不支持 |
Windows | 桌面版 Firefox 浏览器 | 56+ | 支持 | 支持 | 支持（需要 Firefox66+ 版本） |
Windows | 桌面版 Edge 浏览器 | 80+ | 支持 | 支持 | 支持 |
Windows | 桌面版微信内嵌网页 | - | 支持 | 不支持 | 不支持 |
Windows | 桌面版企业微信内嵌网页 | - | 支持 | 不支持 | 不支持 |
iOS | 微信内嵌浏览器 | - | 支持 | 不支持 | 不支持 |
iOS | 企业微信内嵌浏览器 | - | 支持 | 不支持 | 不支持 |
iOS | 移动版 Safari 浏览器 | - | 支持 | 不支持 | 不支持 |
iOS | 移动版 Chrome 浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 微信内嵌浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 企业微信浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 移动版 Chrome 浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 移动版 QQ 浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 移动版 Firefox 浏览器 | - | 支持 | 不支持 | 不支持 |
Android | 移动端 UC 浏览器 | - | 支持（仅支持标准直播观看） | 不支持 | 不支持 |
域名要求
出于对用户安全、隐私等问题的考虑，浏览器限制网页在 HTTPS 协议下才能正常使用 TUIPusher & TUIPlayer 的全部功能。为确保生产环境用户顺畅接入和体验 TUIPusher & TUIPlayer 的全部功能，请使用 HTTPS 协议访问音视频应用页面。
注意
本地开发可以通过
http://localhost 协议进行访问。URL 域名及协议支持情况请参考如下表格：
应用场景 | 协议 | TUIPlayer | TUIPusher | TUIPusher 屏幕分享 | 备注 |
生产环境 | HTTPS 协议 | 支持 | 支持 | 支持 | 推荐 |
生产环境 | HTTP 协议 | 支持 | 不支持 | 不支持 | - |
本地开发环境 | http://localhost | 支持 | 支持 | 支持 | 推荐 |
本地开发环境 | http://127.0.0.1 | 支持 | 支持 | 支持 | - |
本地开发环境 | http://[本机IP] | 支持 | 不支持 | 不支持 | - |
防火墙限制
TUIPusher & TUIPlayer 依赖以下端口进行数据传输，请将其加入防火墙白名单。
TCP 端口：8687
UDP 端口：8000，8080，8800，843，443，16285
域名：qcloud.rtc.qq.com
结语
在后续的迭代中, 本文的 Web 端推拉流组件会逐渐与 iOS、Andriod 等各端连通，并在 Web 端利用实现观众连麦、高级美颜、自定义布局、转推多平台、上传图片文字音乐等能力，针对电商直播场景，计划利用 即时通信IM 实现商城上下架、口令抽奖、答题抽奖等多样性的玩法。欢迎您多多使用、提出您的宝贵意见。
此外，欢迎加入 TUI 组件使用交流 QQ 群（群号：592465424）进行技术交流和问题反馈。