企业项目实训-项目基于TUIPusher和TUIPlayer实现直播功能

1.准备TUIPusher和TUIPlayer的代码

2.在项目中下载TUIPusher和TUIPlayer的依赖项

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

2.本地开发环境下启动TUIPusher和TUIPlayer

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

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

3.功能介绍

在项目系统当中，用户可以通过点击页面的开启直播进行创建直播间，用户也可以作为观众进入直播间观看直播内容

 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();//进入房间

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

 该功能还支持用户美颜，无论是直播是否开启都可以进行设置，不受直播状态的约束。另外，主播在视频设置里可以选择不同的视频参数，包括直播分辨率、帧率和码率。

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

项目的直播功能不单单能使用摄像头直播还能对电脑屏幕的共享

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 });

 

观众用户进入TUIPlayer观看端之后，可根据自己的需求选择不同的拉流线路，分别为超低延时直播, 快直播以及标准直播。 

TUIP usher和TUIPlayer之间能够实时的进行评论，例如上图中的评论区中各自输入的“企业项目实训”发送内容。