使用VUE+WebRTC快速实现简单的音视频通话

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