当前位置：首页 > VUE

vue实现多人视频

2026-03-26 21:07:58VUE

Vue 实现多人视频

使用 Vue 实现多人视频功能通常需要结合 WebRTC 技术或第三方 SDK。以下是两种常见的方法：

使用 WebRTC 实现

WebRTC 是一种支持浏览器实时通信的技术，适合构建多人视频应用。

安装必要的依赖：

npm install peerjs simple-peer

创建视频组件：

vue实现多人视频

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video v-for="peer in peers" :key="peer.id" :ref="'peerVideo-' + peer.id" autoplay></video>
  </div>
</template>

<script>
import Peer from 'peerjs';
import SimplePeer from 'simple-peer';

export default {
  data() {
    return {
      localStream: null,
      peers: []
    };
  },
  methods: {
    async startVideo() {
      this.localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      this.$refs.localVideo.srcObject = this.localStream;
    },
    setupPeerConnection() {
      const peer = new Peer();
      peer.on('call', call => {
        call.answer(this.localStream);
        call.on('stream', remoteStream => {
          this.addPeerStream(call.peer, remoteStream);
        });
      });
    },
    addPeerStream(peerId, stream) {
      this.peers.push({ id: peerId });
      this.$nextTick(() => {
        this.$refs[`peerVideo-${peerId}`][0].srcObject = stream;
      });
    }
  },
  mounted() {
    this.startVideo();
    this.setupPeerConnection();
  }
};
</script>

使用第三方 SDK

对于更复杂的场景，可以考虑使用专业的视频 SDK：

Agora SDK
```
npm install agora-rtc-sdk
```

在 Vue 中使用：


<template>
<div>
 <video ref="localVideo" autoplay muted></video>
 <video v-for="stream in remoteStreams" :key="stream.getId()" :ref="'remoteVideo-' + stream.getId()" autoplay></video>
</div>
</template>

import AgoraRTC from 'agora-rtc-sdk';

export default { data() { return { client: null, localStream: null, remoteStreams: [] }; }, methods: { async initAgora() { this.client = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' }); await this.client.init('YOUR_APP_ID'); await this.client.join('YOUR_TOKEN', 'CHANNEL_NAME', null);

  this.localStream = AgoraRTC.createStream({ audio: true, video: true });
  await this.localStream.init();
  this.$refs.localVideo.srcObject = this.localStream;
  await this.client.publish(this.localStream);

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

  this.client.on('stream-subscribed', event => {
    const stream = event.stream;
    this.remoteStreams.push(stream);
    this.$nextTick(() => {
      this.$refs[`remoteVideo-${stream.getId()}`][0].srcObject = stream;
    });
  });
}

}, mounted() { this.initAgora(); } };

```