Vue实现视频通话的两种方式

Vue.js是一个流行的前端框架，被广泛应用于Web应用程序的开发中。除了常规的界面开发，Vue.js还可以与音视频处理相结合，实现流媒体和音视频编解码的功能。下面来看看Vue实现视频通话的两种常用方式。

一使用vue-webRTC库

要实现视频通话，可以使用vue-webRTC库，它是一个基于vue.js的WebRTC封装。

下面是一个简单的实现代码：

<template>
  <div class="video-chat">
    <video-stream ref="localStream" :stream="localStream"></video-stream>
    <video-stream ref="remoteStream" :stream="remoteStream"></video-stream>
  </div>
</template>

<script>
import VideoStream from './VideoStream.vue'
import WebRTC from 'vue-webrtc'

export default {
  components: {
    VideoStream
  },
  data () {
    return {
      localStream: null,
      remoteStream: null
    }
  },
  created () {
    this.initWebRTC()
  },
  methods: {
    async initWebRTC () {
      const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      this.localStream = localStream

      this.$webrtc = new WebRTC({
        connection: {
          iceServers: [
            { urls: 'stun:stun.l.google.com:19302' }
          ]
        }
      })

      this.$webrtc.on('peerStreamAdded', (peer) => {
        this.remoteStream = peer.stream
      })
    }
  }
}
</script>

这段代码实现了使用vue-webrtc库创建一个WebRTC连接，并且获取本地音视频流，当对方的音视频流添加时，将其设置为远程音视频流。

二基于第三方SDK实现视频通话

相比第一种方式，基于第三方成熟的SDK，可以保证稳定，高质量，高并发等优势的视频通话质量。

下面以 ZEGO Express SDK 为例，介绍如何快速使用 Vue 实现一个简单的实时音视频通话。

ZEGO Express SDK是由 ZEGO 提供的实时音视频 SDK，能够为开发者提供便捷接入、高清流畅、多平台互通、低延迟、高并发的音视频服务。

前提条件

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

已在项目中集成 ZEGO Express SDK，实现基本的实时音视频功能，详情请参考快速开始 – 集成和快速开始 – 实现流程。
已在 ZEGO 控制台创建项目，并申请有效的 AppID 和 Server 地址，详情请参考控制台 – 项目信息。
使用 Node 版本为 14.17.3，Vue 版本为 2.4.2以上。

Vue实现视频通话步骤

1 创建引擎

在 “/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>

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

初始化实例：

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

2 登录房间

2.1 生成 Token

登录房间需要用于验证身份的 Token，获取方式请参考使用 Token 鉴权。如需快速调试，可使用控制台生成临时 Token。

2.2 登录房间

调用 loginRoom 接口，传入房间 ID 参数 “roomID”、“token” 和用户参数 “user”，根据实际情况传入参数 “config”，登录房间。

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

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

// 房间状态更新回调
this.zg.on('roomStateChanged', (roomID, reason, errorCode, extendData) => {
        if (reason == 'LOGINING') {
            // 登录中
        } else if (reason == 'LOGINED') {
            // 登录成功
            //只有当房间状态是登录成功或重连成功时，推流（startPublishingStream）、拉流（startPlayingStream）才能正常收发音视频
            //将自己的音视频流推送到 ZEGO 音视频云
        } else if (reason == 'LOGIN_FAILED') {
            // 登录失败
        } else if (reason == 'RECONNECTING') {
            // 重连中
        } else if (reason == 'RECONNECTED') {
            // 重连成功
        } else if (reason == 'RECONNECT_FAILED') {
            // 重连失败
        } else if (reason == 'KICKOUT') {
            // 被踢出房间
        } else if (reason == 'LOGOUT') {
            // 登出成功
        } else if (reason == 'LOGOUT_FAILED') {
            // 登出失败
        }
});

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

// 流状态更新回调
// 回调方法具体实现可以参考“视频通话”示例源码文件 /src/Examples/QuickStart/VideoTalk/index.js
this.zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // 流新增，开始拉流
    } else if (updateType == 'DELETE') {
        // 流删除，停止拉流
    }
});

3 推流

3.1 创建流

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

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

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

创建流后播放媒体流。

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

// 播放预览推流前或者推流中的视频。
localStream.playVideo(document.querySelector("#local-video"));

3.2 开始推流

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

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

3.3 监听推流后的事件回调

// 注册 publisherStateUpdate 推流状态更新事件回调。
this.zg.on('publisherStateUpdate',({streamID, state}) => {
    // streamID 为推流的流 ID，state 为推流状态，可以根据这些状态做一些逻辑处理
})
// 注册 publishQualityUpdate 推流质量更新事件回调。
this.zg.on('publishQualityUpdate', (streamID, stats) => {
    // stats 对象中可以拿到分辨率、帧率、码率等流质量相关信息做数据展示
})

4 拉流

4.1 开始拉流

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

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

4.2 监听拉流后的事件回调

// 注册 playerStateUpdate 拉流状态更新事件回调。
this.zg.on('playerStateUpdate',({streamID, state}) => {
    // streamID 为拉流的流 ID，state 为拉流状态。 可以根据这些状态做一些逻辑处理。
})
// 注册 playQualityUpdate 拉流质量更新事件回调。
this.zg.on('playQualityUpdate', (streamID, stats) => {
    // stats 对象中可以拿到分辨率、帧率、码率等流质量相关信息做数据展示。
})

在真机中运行项目，运行成功后，可以看到本端视频画面，即实现视频通话功能。最后调用相关接口停止推拉流，退出房间即可。

参考资料：

1、掘金：https://juejin.cn/s/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91vue%E5%AE%9E%E7%8E%B0%E8%A7%86%E9%A2%91%E9%80%9A%E8%AF%9D

2、ZEGO开发者文档：https://doc-zh.zego.im/article/12163

本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/yinshipin/37884.html