关于音视频:VUEWebRTC实现音视频直播

1 性能简介

本文将介绍如何疾速应用 Vue 实现一个简略的实时音视频通话。

相干概念解释:

• ZEGO Express SDK：由 ZEGO 提供的实时音视频 SDK，可能为开发者提供便捷接入、高清晦涩、多平台互通、低提早、高并发的音视频服务。
• 推流：把采集阶段封包好的音视频数据流传输到 ZEGO 实时音视频云的过程。
• 拉流：从 ZEGO 实时音视频云将已有音视频数据流进行拉取的过程。

2 前提条件

在实现根本的实时音视频性能之前，请确保：

• 已在我的项目中集成 ZEGO Express SDK，详情请参考 疾速开始 – 集成。
• 已在 ZEGO 控制台 创立我的项目，申请无效的 AppID 和 AppSign，详情请参考 控制台 – 项目管理。

3 示例源码下载

请参考 下载示例源码 获取源码。

相干源码请查看“/express-demo-web/src/Examples/Framework/Vue”目录下的文件。

4 应用步骤

以后我的项目应用的 Node 版本为 14.17.3，Vue 版本为 2.4.2。

以用户 A 拉取用户 B 的流为例，流程如下图：

整个推拉流过程的 API 调用时序如下图：

4.1 创立引擎

1. 创立界面

在创立引擎之前，举荐开发者增加以下界面元素，不便实现根本的实时音视频性能。

• 本地预览窗口
• 远端视频窗口
• 完结按钮

2. 创立引擎

创立 ZegoExpressEngine 引擎实例，将申请到的 AppID 传入参数“appID”，将接入服务器地址传入参数“server”。

“server”为接入服务器地址，获取形式如下：

1. 登录 ZEGO 控制台。
2. 在对应我的项目下单击“查看”。
3. 进入“我的项目配置”界面，在“我的项目信息”页签的“配置信息”中，单击“ServerSecret”前面的小眼睛按钮即可获取对应的接入服务器地址。

在“/express-demo-web/src/Examples/Framework/Vue/index.html”文件中引入 vue.js。

// 引入 vue.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.4.2/vue.min.js"></script>

初始化实例。

new Vue({
    el:'#page-wrapper',
    data: {zg: null},
    methods:{createZegoExpressEngine() {this.zg = new ZegoExpressEngine(appID, server);
        }
    }
})

3. 监听事件回调

如果须要注册回调，开发者可依据理论须要，实现 ZegoEvent（蕴含 ZegoRTCEvent 和 ZegoRTMEvent）中的某些办法，创立引擎后可通过调用 on 接口设置回调。

this.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {if (reason == ZegoRoomStateChangedReason.Logining) {// 登录中} else if (reason == ZegoRoomStateChangedReason.Logined) {
            // 登录胜利
            // 只有当房间状态是登录胜利或重连胜利时，推流（startPublishingStream）、拉流（startPlayingStream）能力失常收发音视频
            // 将本人的音视频流推送到 ZEGO 音视频云
        } else if (reason == ZegoRoomStateChangedReason.LoginFailed) {// 登录失败} else if (reason == ZegoRoomStateChangedReason.Reconnecting) {// 重连中} else if (reason == ZegoRoomStateChangedReason.Reconnected) {// 重连胜利} else if (reason == ZegoRoomStateChangedReason.ReconnectFailed) {// 重连失败} else if (reason == ZegoRoomStateChangedReason.Kickout) {// 被踢出房间} else if (reason == ZegoRoomStateChangedReason.Logout) {// 登出胜利} else if (reason == ZegoRoomStateChangedReason.LogoutFailed) {// 登出失败}
});

4.2 检测兼容性

在实现推拉流性能之前，开发者能够调用 checkSystemRequirements 接口检测浏览器的兼容性。

SDK 反对的浏览器兼容版本，请参考 下载示例源码 中的“1 筹备环境”。

const result = await this.zg.checkSystemRequirements();
// 返回的 result 为兼容性检测后果。webRTC 为 true 时示意反对 webRTC，其余属性含意均可参考接口 API 文档
console.log(result);
// {
//   webRTC: true,
//   customCapture: true,
//   camera: true,
//   microphone: true,
//   videoCodec: {H264: true, H265: false, VP8: true, VP9: true},
//   screenSharing: true,
//   errInfo: {}
// }

返回后果的各参数含意，请参考 ZegoCapabilityDetection 接口下的参数形容。

4.3 登录房间

1. 生成 Token

登录房间须要用于验证身份的 Token，获取形式请参考 应用 Token 鉴权。如需疾速调试，可应用控制台生成长期 Token。

2. 登录房间

调用 loginRoom 接口，传入房间 ID 参数“roomID”、“token”和用户参数“user”，依据理论状况传入参数“config”，登录房间。

• 在登录房间之前，请先注册登录房间后须要监听的所有回调。胜利登录房间后，即可接管相干的回调。
• “roomID”、“userID”和“userName”参数的取值都为自定义。
• “roomID”和“userID”都必须惟一，倡议开发者将“userID”设置为一个有意义的值，可将其与业务账号零碎进行关联。

// 登录房间，胜利则返回 true
// userUpdate 设置为 true 会开启监听 roomUserUpdate 回调，默认状况下不会开启该监听
const result = await this.zg.loginRoom(roomID, token, {userID, userName}, {userUpdate: true});

3. 监听登录房间后的事件回调

依据理论利用须要，在登录房间前监听想要关注的事件告诉，比方房间状态更新、用户状态更新、流状态更新等。

• roomStateChanged：房间状态更新回调。登录房间后，当房间连贯状态产生变更（如呈现房间断开、登录认证失败等状况），SDK 会通过该回调告诉。

• roomUserUpdate：用户状态更新回调。登录房间后，当房间内有用户新增或删除时，SDK 会通过该回调告诉。

  只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且“userUpdate”参数取值为“true”时，用户能力收到 roomUserUpdate 回调。

• roomStreamUpdate：流状态更新回调。登录房间后，当房间内有用户新推送或删除音视频流时，SDK 会通过该回调告诉。

• 只有调用 loginRoom 接口登录房间时传入 ZegoRoomConfig 配置，且“userUpdate”参数取值为“true”时，用户能力收到 roomUserUpdate 回调。
• 通常状况下，如果某个用户想要播放其余用户推送的视频，能够在收到流状态更新（新增）的回调中，调用 startPlayingStream 接口拉取远端推送的音视频流。

// 房间状态更新回调
this.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {if (reason == ZegoRoomStateChangedReason.Logining) {// 登录中} else if (reason == ZegoRoomStateChangedReason.Logined) {
            // 登录胜利
            // 只有当房间状态是登录胜利或重连胜利时，推流（startPublishingStream）、拉流（startPlayingStream）能力失常收发音视频
            // 将本人的音视频流推送到 ZEGO 音视频云
        } else if (reason == ZegoRoomStateChangedReason.LoginFailed) {// 登录失败} else if (reason == ZegoRoomStateChangedReason.Reconnecting) {// 重连中} else if (reason == ZegoRoomStateChangedReason.Reconnected) {// 重连胜利} else if (reason == ZegoRoomStateChangedReason.ReconnectFailed) {// 重连失败} else if (reason == ZegoRoomStateChangedReason.Kickout) {// 被踢出房间} else if (reason == ZegoRoomStateChangedReason.Logout) {// 登出胜利} else if (reason == ZegoRoomStateChangedReason.LogoutFailed) {// 登出失败}
});

// 用户状态更新回调
this.zg.on('roomUserUpdate', (roomID, updateType, userList) => {
    console.warn(`roomUserUpdate: room ${roomID}, user ${updateType === 'ADD' ? 'added' : 'left'} `,
        JSON.stringify(userList),
    );
});

// 流状态更新回调
this.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {if (updateType == 'ADD') {// 流新增，开始拉流} else if (updateType == 'DELETE') {// 流删除，进行拉流}
});

4.4 推流

1. 创立流

a. 开始推流前须要创立本端的音视频流，调用 createStream 接口，默认会采集摄像头画面和麦克风声音。

调用 createStream 接口后，须要期待 ZEGO 服务器返回流媒体对象能力执行后续操作。

HTML 上创立媒体流播放组件的容器 <div>。

<div id="local-video" style="width: 320px;height: 240px"></div>

创立流后播放媒体流。

// 调用 createStream 接口后，须要期待 ZEGO 服务器返回流媒体对象能力执行后续操作
const localStream = await this.zg.createStream();

// 创立媒体流播放组件
const localView = this.zg.createLocalStreamView(localStream);
// "local-video" 为容器 DOM 元素 ID。localView.play("local-video", {enableAutoplayDialog:true});

b. 设置音视频采集参数

可依据须要通过 createStream 接口中的如下属性设置音视频相干采集参数，详情可参考 自定义视频采集：

• camera：摄像头麦克风采集流相干配置
• screen：屏幕捕获采集流相干配置
• custom：第三方流采集相干配置

2. 开始推流

调用 startPublishingStream 接口，传入流 ID 参数“streamID”和创立流失去的流对象“localStream”，向远端用户发送本端的音视频流。

• “streamID”参数的取值为自定义，须要在整个 AppID 内全局惟一。
• 若须要推多条流，则屡次调用 startPublishingStream 接口即可，需确保每条流的“streamID”不雷同。

// localStream 为创立流获取的 MediaStream 对象
this.zg.startPublishingStream(streamID, localStream)

3. 监听推流后的事件回调

依据理论利用须要，在推流后监听想要关注的事件告诉，比方推流状态更新、推流品质等。

• publisherStateUpdate：推流状态更新回调。调用推流接口胜利后，当推流状态产生变更（如呈现网络中断导致推流异样等状况），SDK 在重试推流的同时，会通过该回调告诉。
• publishQualityUpdate：推流品质回调。调用推流接口胜利后，定时回调音视频流品质数据（如分辨率、帧率、码率等）。

this.zg.on('publisherStateUpdate', result => {
    // 推流状态更新回调
    // ... 
})

this.zg.on('publishQualityUpdate', (streamID, stats) => {
    // 推流品质回调
    // ... 
})

4.5 拉流

1. 开始拉流

调用 startPlayingStream 接口，依据传入的流 ID 参数“streamID”，拉取远端已推送到 ZEGO 服务器的音视频画面。

远端用户推送的“streamID”能够从 roomStreamUpdate 回调中取得。

HTML 上创立媒体流播放组件的容器 <div>。

<div id="remote-video" style="width: 320px;height: 240px"></div>

将拉取到远端流在界面播放。

const remoteStream = await this.zg.startPlayingStream(streamID);

// 创立媒体流播放组件
const remoteView = this.zg.createRemoteStreamView(remoteStream);
remoteView.play("remote-video", {enableAutoplayDialog:true});

“streamID”须要在整个 AppID 内全局惟一。

2. 监听拉流后的事件回调

依据理论利用须要，在拉流后监听想要关注的事件告诉，如拉流状态变更、拉流品质等。

• playerStateUpdate：拉流状态更新回调。调用拉流接口胜利后，当拉流状态产生变更（如呈现网络中断导致推流异样等状况），SDK 在重试推流的同时，会通过该回调告诉。
• playQualityUpdate：拉流品质回调。调用拉流接口胜利后，定时回调音视频流品质数据（如分辨率、帧率、码率等）。

this.zg.on('playerStateUpdate', result => {
    // 拉流状态更新回调
    // ...
})

this.zg.on('playQualityUpdate', (streamID,stats) => {// 拉流品质回调})

4.6 体验实时音视频性能

在真机中运行我的项目，运行胜利后，能够看到本端视频画面。

为不便体验，ZEGO 提供了一个 Web 端调试示例，在该页面下，输出雷同的 AppID、RoomID，输出一个不同的 UserID，即可退出同一房间与真机设备互通。当胜利开始音视频通话时，能够听到远端的音频，看到远端的视频画面。

4.7 进行推拉流

1. 进行推流

调用 stopPublishingStream 接口进行向远端用户发送本端的音视频流。

this.zg.stopPublishingStream(streamID)

2. 销毁流

调用 destroyStream 接口销毁创立的流数据，销毁流后开发需自行销毁 video（进行采集）。

// localStream 是调用 createStream 接口获取的 MediaStream 对象
this.zg.destroyStream(localStream)

3. 进行拉流

调用 stopPlayingStream 接口进行拉取远端推送的音视频流。

this.zg.stopPlayingStream(streamID)

4.8 退出房间

调用 logoutRoom 接口退出房间。

this.zg.logoutRoom(roomID)

获取更多反对

• 获取本文的 Demo、开发文档、技术支持，拜访即构文档核心
• 近期有开发布局的开发者可上即构官网查看，恰逢即构七周年全线音视频产品 1 折的优惠，分割商务获取 RTC 产品优惠；