当前位置：首页 > VUE

vue实现视频通话功能

2026-01-23 13:00:29VUE

Vue 实现视频通话功能

使用 WebRTC 技术

WebRTC（Web Real-Time Communication）是实现浏览器间实时音视频通信的标准技术。Vue 可以结合 WebRTC 实现视频通话功能。

安装必要的依赖：

npm install peerjs simple-peer

创建 Vue 组件：

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
    <button @click="startCall">开始通话</button>
    <button @click="endCall">结束通话</button>
  </div>
</template>

<script>
import Peer from 'peerjs';
export default {
  data() {
    return {
      peer: null,
      localStream: null,
      remoteStream: null,
      call: null
    }
  },
  methods: {
    async startCall() {
      this.peer = new Peer();

      this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      this.$refs.localVideo.srcObject = this.localStream;

      this.peer.on('call', call => {
        call.answer(this.localStream);
        call.on('stream', remoteStream => {
          this.remoteStream = remoteStream;
          this.$refs.remoteVideo.srcObject = remoteStream;
        });
      });
    },
    endCall() {
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => track.stop());
      }
      if (this.remoteStream) {
        this.remoteStream.getTracks().forEach(track => track.stop());
      }
      if (this.peer) {
        this.peer.destroy();
      }
    }
  },
  beforeDestroy() {
    this.endCall();
  }
}
</script>

使用第三方 SDK

对于更复杂的场景，可以考虑使用专业的实时通信 SDK：

Agora SDK 安装 Agora SDK：
```
npm install agora-rtc-sdk
```

基本实现代码：

<script>
import AgoraRTC from 'agora-rtc-sdk';
export default {
  data() {
    return {
      client: null,
      localStream: null
    }
  },
  methods: {
    async initAgora() {
      this.client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });

      await this.client.init('YOUR_APP_ID');
      await this.client.join('YOUR_TOKEN', 'channelName', null);

      this.localStream = AgoraRTC.createStream({
        audio: true,
        video: true,
        screen: false
      });

      await this.localStream.init();
      this.client.publish(this.localStream, err => {
        console.log('发布流失败', err);
      });

      this.client.on('stream-added', evt => {
        const remoteStream = evt.stream;
        this.client.subscribe(remoteStream, err => {
          console.log('订阅流失败', err);
        });
      });

      this.client.on('stream-subscribed', evt => {
        const remoteStream = evt.stream;
        this.$refs.remoteVideo.srcObject = remoteStream;
      });
    }
  }
}
</script>

信令服务器实现

对于完整的视频通话系统，需要实现信令服务器来交换 SDP 和 ICE 候选信息：

创建信令服务器（Node.js 示例）：


const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

io.on('connection', socket => { socket.on('offer', data => { socket.broadcast.emit('offer', data); });

socket.on('answer', data => { socket.broadcast.emit('answer', data); });

socket.on('candidate', data => { socket.broadcast.emit('candidate', data); }); });

server.listen(3000);


2. Vue 客户端连接信令服务器：
```javascript
import io from 'socket.io-client';
const socket = io('http://localhost:3000');

// 发送offer
socket.emit('offer', offer);

// 接收answer
socket.on('answer', answer => {
  pc.setRemoteDescription(new RTCSessionDescription(answer));
});