当前位置：首页 > VUE

vue实现多窗口直播

2026-02-23 13:21:25VUE

Vue 实现多窗口直播方案

使用 WebRTC 和 video 标签

在 Vue 中可以通过 WebRTC 技术结合 video 标签实现多窗口直播。每个 video 标签对应一个独立的视频流，通过动态渲染 video 标签实现多窗口效果。

<template>
  <div>
    <div v-for="(stream, index) in streams" :key="index">
      <video autoplay :srcObject.prop="stream"></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      streams: []
    }
  },
  mounted() {
    this.initMultipleStreams()
  },
  methods: {
    async initMultipleStreams() {
      // 获取多个媒体流
      const stream1 = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
      const stream2 = await navigator.mediaDevices.getDisplayMedia({ video: true })

      this.streams = [stream1, stream2]
    }
  }
}
</script>

使用第三方直播 SDK

对于更专业的直播场景，可以集成第三方 SDK 如 Agora、腾讯云直播等：

// 以 Agora 为例
import AgoraRTC from 'agora-rtc-sdk-ng'

export default {
  data() {
    return {
      client: null,
      localStream: null,
      remoteStreams: []
    }
  },
  mounted() {
    this.initAgora()
  },
  methods: {
    async initAgora() {
      this.client = AgoraRTC.createClient({ mode: 'live', codec: 'h264' })
      await this.client.join('APP_ID', 'CHANNEL_NAME', 'TOKEN')

      this.localStream = await AgoraRTC.createMicrophoneAndCameraTracks()
      await this.client.publish(this.localStream)

      this.client.on('user-published', async (user, mediaType) => {
        const remoteStream = await this.client.subscribe(user, mediaType)
        this.remoteStreams.push(remoteStream)
      })
    }
  }
}

布局优化与性能考虑

多窗口直播需要考虑布局和性能优化：

.video-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}

video {
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #000;
}

事件处理与交互

为每个视频窗口添加交互功能：

<template>
  <div class="video-container">
    <div v-for="(stream, index) in streams" :key="index" class="video-wrapper">
      <video ref="videos" autoplay :srcObject.prop="stream"></video>
      <button @click="toggleFullscreen(index)">全屏</button>
      <button @click="toggleMute(index)">静音</button>
    </div>
  </div>
</template>