当前位置：首页 > VUE

vue 实现直播

2026-02-10 01:01:57VUE

Vue 实现直播的基本方法

使用 WebRTC 技术

WebRTC 是实现实时音视频通信的标准技术。在 Vue 项目中可以通过引入第三方库如 peerjs 或 simple-peer 来实现 P2P 直播。

安装 peerjs 依赖：

npm install peerjs

创建视频组件：

<template>
  <div>
    <video ref="localVideo" autoplay muted></video>
    <video ref="remoteVideo" autoplay></video>
  </div>
</template>

<script>
import Peer from 'peerjs';

export default {
  data() {
    return {
      peer: null,
      localStream: null
    }
  },
  mounted() {
    this.initPeer();
  },
  methods: {
    async initPeer() {
      this.peer = new Peer();

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

      this.peer.on('call', call => {
        call.answer(this.localStream);
        call.on('stream', remoteStream => {
          this.$refs.remoteVideo.srcObject = remoteStream;
        });
      });
    }
  }
}
</script>

使用 HLS/FLV 协议

对于大规模直播场景，可以使用 HLS 或 FLV 协议配合流媒体服务器。Vue 中可以通过 video.js 或 flv.js 播放流。

vue 实现直播

安装 flv.js：

npm install flv.js

使用示例：

<template>
  <video ref="videoElement" controls></video>
</template>

<script>
import flvjs from 'flv.js';

export default {
  mounted() {
    if (flvjs.isSupported()) {
      const videoElement = this.$refs.videoElement;
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://example.com/live/stream.flv'
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  }
}
</script>

使用第三方直播 SDK

许多云服务提供商如阿里云、腾讯云提供直播 SDK，可以快速集成到 Vue 项目中。

vue 实现直播

腾讯云直播 SDK 集成示例：

<template>
  <div ref="playerContainer"></div>
</template>

<script>
import TcPlayer from 'tcplayer.js';

export default {
  mounted() {
    new TcPlayer('playerContainer', {
      autoplay: true,
      sources: [{
        src: 'http://playurl/live/stream.flv',
        type: 'video/x-flv'
      }]
    });
  }
}
</script>

使用 WebSocket 实现低延迟

对于需要更低延迟的场景，可以结合 WebSocket 和 Canvas 实现自定义播放器。

基本实现思路：

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    const ws = new WebSocket('ws://your-websocket-server');

    ws.onmessage = (event) => {
      const img = new Image();
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      };
      img.src = URL.createObjectURL(event.data);
    };
  }
}
</script>