VUE+WebRTC实现音视频直播_webrtc vue-CSDN博客

本文链接：https://blog.csdn.net/yinshipin007/article/details/130012150

本文详细介绍了如何使用Vue.js结合ZEGO Express SDK实现一个实时音视频通话功能。从创建引擎、检测浏览器兼容性、登录房间、推流拉流到停止和退出房间的完整步骤，帮助开发者快速搭建音视频通话应用。

摘要由CSDN通过智能技术生成

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” 为接入服务器地址，获取方式如下：

登录 ZEGO 控制台。
在对应项目下单击“查看”。
进入“项目配置”界面，在“项目信息”页签的“配置信息”中，单击 “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 ZegoExpressE