腾讯视频互动直播TUIPusher&TUIPlayer集成体验

admin管理员组

文章数量:1531457

腾讯云(Tencent Cloud)是腾讯集团倾力打造的云计算品牌，提供全球领先的云计算和人工智能等技术产品与服务，推动产业互联网建设。实时音视频（Tencent RTC）基于腾讯多年来在网络与音视频技术上的深度积累，包含多人音视频通话和低延时互动直播两大场景化方案。
TUIkit 是腾讯云音视频团队在5000+客户的服务积累中，结合业内主流的音视频场景，提炼出的开源解决方案，包含视频通话组件、直播组件、视频房间组件等多个客户端音视频组件，可以帮助开发者快速搭建诸如通话、客服、直播、语聊、教育等场景解决方案。
TUIPusher&TUIPlayer是Web端开源的含UI 直播互动组件。TUIPusher TUIPlayer基于腾讯云和 即时通信IM两个PaaS 服务的基础 SDK，为企业直播、电商带货、行业培训、远程教学等多种直播场景提供快速上线 Web 端直播推拉流工具的解决方案，目前官网提供了在线体验TUIPusher和TUIPlayer的入口，可点击此处进入： TUIPusher体验链接及 TUIPlayer体验链接。

1. 功能体验

1.1 组件集成

当用户集成时 TUIPusher&TUIPlayer时，需要一些 sdk 认证，这部分是需要用户购买的。如果用户是首次体验，可以在实时音视频控制台创建应用的腾讯云账号，可获赠一个10000分钟的免费试用套餐包。免费试用包可用于抵扣视频通话、语音通话、视频互动直播、语音互动直播的服务用量。用户需要登陆腾讯云官网，通过实时音视频控制台，创建应用。
在这里插入图片描述

1.2 项目准备

1. 在github下载TUIPusher&TUIPlayer代码；
2. 为TUIPusher&TUIPlayer安装依赖：

cd Web/TUIPusher
npm install
cd Web/TUIPlayer
npm install

3. 将sdkAppld和secretKey填入 TUIPusher/src/config/basic-info-config.js的配置文件中：

4. 本地开发环境运行TUIPusher：

cd Web/TUIPusher
npm run serve  //开发环境运行
npm run build  //打包

cd Web/TUIPlayer
npm run serve  //开发环境运行
npm run build  //打包

5. 随后可打开http://localhost:8080体验TUIPusher&TUIPlayer功能。

1.3 TUIPusher功能介绍

1.3.1 创建直播间

TUIPusher用户登陆之后，通过输入直播间名称来创建直播间，直播间名称是直播间的标志。创建直播间后，即可生成房间相关的信息。

 createRoom() {    //创建房间
   this.$message.warning(this.$t('Enter a live room name'));
      }
    },
     generateRoomId() { //生成房间信息 
      const { data: { roomId } } = await generateRoomId({
        userId: this.userId, //用户ID，可以由您的帐号系统指定
        token: this.token, // 验证用户token
        title: this.roomName,// 直播间名称，可进行修改
      });
    },
 enterRoom();//进入房间
 handleLogout();//退出登陆

1.3.2 进入直播间

当主播进入直播间后，首先需要进行直播间设置，包含是否开启摄像头、是否开启美颜和开启录制。另外，等同于TUIRoom及其他音视频和IM产品，包含设备选择：麦克风选择、扬声器选择、摄像头选择。

1.3.3 开始直播

主播进行设置后进入直播间，点击开始直播后，进入直播间；随即弹出发布流成功和成功推流到CDN的通知。主播点击暂停直播或者结束直播，来控制直播间状态。

1.3.4 开播设置

主播可以选择摄像头、麦克风及美颜设置，无论是直播是否开启都可以进行设置，不受直播状态的约束。另外，主播在视频设置里可以选择不同的视频参数，包括直播分辨率、帧率和码率。主播点击美颜设置中的开启美颜，即可根据自己的选择，拖动美颜、高光和红润，来选择不同的美颜参数。

 showDevicePresettingDialog() ,    // 显示设置预设置弹窗
 showBeautyPresettingDialog() ,    // 显示美颜预设置弹窗
 handleAudioSetting();    //麦克风设置
 handleVideoSetting();    //摄像头设置
 handleBeautySetting();   //美颜设置
 // 初始化美颜插件
const beautyPlugin = new RTCBeautyPlugin();
await localStream.initialize();
// 生成美颜处理后的流
const beautyStream = beautyPlugin.generateBeautyStream(localStream);
// 发布经过美颜后的流
await client.publish(beautyStream);

1.3.5 共享屏幕

当主播点击开始直播后，随即可以点击左侧共享屏幕按钮，根据弹出的屏幕共享选项，选择需要共享的屏幕及区域，或选择需要直播的窗口及Chrome标签页。

const userId = 'share_userId';//生成的用户ID
const roomId = 'roomId';//生成的房间ID
// 仅采集屏幕视频流
const shareStream = TRTC.createStream({ audio: false, screen: true, userId });
// 采集麦克风音频及屏幕视频流
const shareStream = TRTC.createStream({ audio: true, screen: true, userId });
// 采集系统音频及屏幕视频流
const shareStream = TRTC.createStream({ screenAudio: true, screen: true, userId });

1.4 TUIPlayer功能介绍

1.4.1 选择直播间

当主播在TUIPusher创建直播间之后，在TUIPlayer中，即可看到所创建的直播间，点击进入即可进入TUIPlayer的的拉流画面。

1.4.2 进入TUIPlayer

用户进入TUIPlayer观看端之后，可根据自己的需求选择不同的拉流线路，分别为超低延时直播, 快直播以及标准直播。在讨论区可与直播间其他用户进行文字或表情包交流。当主播在TUIPusher开始直播后，用户即可在TUIPlayer点击中心播放按钮，选择拉流方式，开始观看直播。

2. 体验分享

2.1 TUIPusher&TUIPlayer功能介绍

TUIPusher 推流组件功能：
● 支持采集麦克风和扬声器的流并推流可根据需求设置视频参数（帧率，分辨率，码率）；
●支持开启美颜并设置视频美颜参数；
● 支持采集屏幕分享流并推流；
● 支持推流到腾讯云实时音视频后台，推流到腾讯云 CDN；
● 支持在线聊天室，和在线观众进行聊天互动；
● 支持获取观众列表，对在线观众进行禁言操作。
TUIPlayer 拉流组件功能：
● 支持同时播放音视频流和屏幕分享流；
● 支持在线聊天室，和主播及其他观众进行聊天互动；
● 支持超低延时直播（300ms 延时）, 快直播（1000ms 以内延时）以及标准直播（支持超高并发观看）三种拉流线路；
● 兼容桌面浏览器及移动端浏览器，支持移动端浏览器横屏观看。

2.2 详细业务流程

TUIPusher&TUIPlayer的详细业务流程可参考下图：

TUIPusher&TUIPlayer提供了快速集成腾讯云实时音视频 TRTC 及 腾讯云即时通讯 IM 用于直播场景的解决方案。在推拉流 UI 组件的基础上，用户可以结合用户管理系统及房间管理系统完善业务链路，增加点赞，口令红包，答题抽奖等个性化功能丰富业务场景。例如用户需要直播带货，即可增加直播商城功能，来实现直播销售的目的，等等类似功能用户可根据自己的需求进行实现。

2.3 特色功能

2.3.1 跨房连麦

在直播场景中，常常需要跨房连麦来支持不同直播间的主播实时互动的需求，因此 Web 端跨房间连麦及混流后推流到CDN 的实现，具体实现方式请参考：云端跨房连麦。

2.3.2 云端混流

Web SDK 提供client.startMixTranscode接口开启云端混流。当调用 startMixTranscode 接口发起混流转码时，SDK 会向腾讯云的转码服务器发送一条指令，目的是将房间里的多路音视频流混合为一路。开发者可以通过 config.mixUsers 来调整每一路混入流的参数，也可以通过 config.videoWidth、config.videoHeight、config.videoBitrate 等属性控制混合后音视频流的编码值。云端混流方式请参考：云端混流。

2.3.3 云端录制

在远程教育、秀场直播、视频会议、远程定损、金融双录、在线医疗等应用场景中，考虑取证、质检、审核、存档和回放等需求，常需要将整个视频通话或互动直播过程录制和存储下来。TRTC 的云端录制，可以将房间中的每一个用户的音视频流都录制成一个独立的文件：实现方式可参考，云端录制。

2.3.4 语音识别

目前有部分用户接入 TRTC（Tencent RTC）服务后，会有一些实时字幕、会议文字纪要的需求。本文档帮助 web 端用户在已经接入 TRTC 服务后，更方便的快速接入 ASR，完成语音转文字的需求。实现方式可参考，语音识别。

2.3.5 拉流路线

在TUIPlayer中，拉流的方式也是比较有特点的地方，超低延时直播（300ms 延时）, 快直播（1000ms 以内延时）以及标准直播（支持超高并发观看）三种拉流线路可以保证用户在观看直播时，根据自己的情况选择合适的拉流路线。
超低延时直播和快直播是标准直播在超低延时播放场景下的延伸，比传统直播协议延时更低，为观众提供毫秒级的极致直播观看体验。 能够满足一些对延时性能要求更高的特定场景需求，例如在线教育、体育赛事直播、在线答题等。标准直播目前使用的是常见的 RTMP、FLV、HLS 等格式的播放协议，而这些播放协议的共同点就是它们都基于 TCP 协议实现，TCP 有延迟确认和捎带应答，例如接收到数据后不会立即对每个数据响应 ACK，而是攒一定的数据量才会响应，这就会带来延迟的感知，在弱网场景下，这甚至会导致几秒钟或几十秒钟的延迟。因此，超低延时直播和快直播的观看直播体验感是优于标准直播的。

2.4 集成感悟

TUIPusher 及 TUIPlayer UI 组件为用户提供了快速集成TRTC 及 IM 用于直播场景的解决方案。 对于TUIPusher 及 TUIPlayer UI的集成感受，整体体验与市面上的直播app功能或有相似之处，不仅包括直播，主播、观众等常见直播软件通用功能，另外还包括美颜、屏幕共享、推拉流等特色功能。而目前直播软件所存在的最大问题在于企业直播、拍卖直播、电商带货、知识传播、远程教学等直播场景中，如果主播、观众需要另外下载客户端，会因为繁琐而流失一部分用户；此外，移动端直播由于潜在的网络波动影响，隐藏着比较大的风险。
TUIPusher可通过采集麦克风和扬声器的流，根据用户的不同需求设置帧率、分辨率、码率等参数，并且可以推流到推流到腾讯云 CDN，可以在腾讯云实时音视频后台实时监测；TUIPlayer的特点是不仅同时可以播放视频流和屏幕分享流，最重要的是支持三种不同的拉流方式，分别以超低延时、快直播以及支持超高并发的标准直播，解决直播潜在的网络波动等风险，用户可以根据自己的需求以及状况进行选择。
对于 TUIPusher和TUIPlayer的功能性存在的不足，包括支持聊天内容的方式较简单，目前仅支持文字和表情，对于发送图片等聊天方式暂不支持。目前直播间的具体功能多样化实现较为简单，仅确保直播的基础功能实现，今后可以在不同需求下，以及推拉流 UI 组件的基础上，用户可以自行结合用户管理系统及房间管理系统完善业务链路，增加点赞，在线商城，口令红包，答题抽奖等个性化功能丰富业务场景。

本文标签： 互动腾讯视频TUIPlayerTUIPusher