当前位置：首页 > VUE

vue实现视频通话

2026-01-14 07:51:58VUE

Vue实现视频通话的方法

使用WebRTC技术

WebRTC是一种支持浏览器之间实时通信的技术，无需插件即可实现视频通话。Vue可以结合WebRTC的API实现视频通话功能。

安装必要的依赖库：

npm install peerjs simple-peer

创建视频组件：

<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 'simple-peer'

export default {
  data() {
    return {
      localStream: null,
      peer: null
    }
  },
  methods: {
    async startCall() {
      try {
        this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        this.$refs.localVideo.srcObject = this.localStream

        this.peer = new Peer({ initiator: true, stream: this.localStream })

        this.peer.on('signal', data => {
          // 发送信令数据给对端
        })

        this.peer.on('stream', stream => {
          this.$refs.remoteVideo.srcObject = stream
        })
      } catch (error) {
        console.error('获取媒体设备失败:', error)
      }
    },
    endCall() {
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => track.stop())
      }
      if (this.peer) {
        this.peer.destroy()
      }
    }
  }
}
</script>

使用第三方SDK

对于更复杂的场景，可以考虑使用专业的实时通信SDK，如Agora、Twilio等。

安装Agora SDK：

vue实现视频通话

npm install agora-rtc-sdk

实现基础视频通话：

<template>
  <div>
    <div id="local-video"></div>
    <div id="remote-video"></div>
    <button @click="joinChannel">加入频道</button>
    <button @click="leaveChannel">离开频道</button>
  </div>
</template>

<script>
import AgoraRTC from 'agora-rtc-sdk'

export default {
  data() {
    return {
      client: null,
      localStream: null
    }
  },
  methods: {
    async joinChannel() {
      this.client = AgoraRTC.createClient({ mode: 'rtc', codec: 'h264' })

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

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

      await this.localStream.init()
      this.client.publish(this.localStream)
      this.localStream.play('local-video')

      this.client.on('stream-added', evt => {
        const remoteStream = evt.stream
        this.client.subscribe(remoteStream)
      })

      this.client.on('stream-subscribed', evt => {
        const remoteStream = evt.stream
        remoteStream.play('remote-video')
      })
    },
    leaveChannel() {
      if (this.localStream) {
        this.localStream.close()
      }
      if (this.client) {
        this.client.leave()
      }
    }
  }
}
</script>

信令服务器搭建

WebRTC需要信令服务器交换SDP和ICE候选信息。可以使用Socket.io或WebSocket实现信令服务器。

基本信令服务器示例：

vue实现视频通话

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

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

http.listen(3000, () => {
  console.log('信令服务器运行在3000端口')
})