当前位置：首页 > VUE

vue实现语音通话

2026-03-29 20:57:36VUE

Vue 实现语音通话的基本方法

使用 WebRTC 技术结合 Vue.js 框架可以实现浏览器间的实时语音通话。WebRTC 提供了浏览器间点对点通信的能力，无需插件或第三方软件。

安装必要依赖

需要安装 peerjs 或 simple-peer 等 WebRTC 库：

npm install peerjs simple-peer

建立信令服务器

WebRTC 需要信令服务器交换连接信息：

// 使用 Socket.io 或 WebSocket 实现信令
import io from 'socket.io-client'
const socket = io('https://your-signaling-server.com')

获取用户媒体设备

请求用户麦克风权限并获取音频流：

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    this.localStream = stream
  })

创建 Peer 连接

初始化 WebRTC 对等连接：

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

peer.on('signal', data => {
  // 通过信令服务器发送 offer
  socket.emit('signal', data)
})

处理远程流

监听远程音频流并播放：

peer.on('stream', remoteStream => {
  const audio = new Audio()
  audio.srcObject = remoteStream
  audio.play()
})

信令交换处理

通过信令服务器交换 SDP 和 ICE 候选：

socket.on('signal', data => {
  peer.signal(data)
})

错误处理

添加必要的错误处理逻辑：

vue实现语音通话

peer.on('error', err => {
  console.error('WebRTC error:', err)
})

完整组件示例

<template>
  <div>
    <button @click="startCall">开始通话</button>
    <button @click="endCall">结束通话</button>
  </div>
</template>

<script>
import SimplePeer from 'simple-peer'
import io from 'socket.io-client'

export default {
  data() {
    return {
      localStream: null,
      peer: null,
      socket: null
    }
  },
  methods: {
    async startCall() {
      this.socket = io('https://your-signaling-server.com')

      this.localStream = await navigator.mediaDevices.getUserMedia({ audio: true })

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

      this.peer.on('signal', data => {
        this.socket.emit('signal', data)
      })

      this.peer.on('stream', remoteStream => {
        const audio = new Audio()
        audio.srcObject = remoteStream
        audio.play()
      })

      this.socket.on('signal', data => {
        this.peer.signal(data)
      })
    },
    endCall() {
      if (this.peer) this.peer.destroy()
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => track.stop())
      }
      if (this.socket) this.socket.disconnect()
    }
  },
  beforeDestroy() {
    this.endCall()
  }
}
</script>