当前位置：首页 > VUE

vue 实现直播功能

2026-02-19 00:25:43VUE

实现直播功能的核心技术

Vue 结合 WebRTC 或 HLS/FLV 协议实现直播功能，需依赖第三方库如 video.js、flv.js 或 hls.js。以下是具体实现方案：

使用 HLS 协议实现直播

HLS（HTTP Live Streaming）是苹果开发的流媒体协议，兼容性较好。

安装 hls.js 库：

npm install hls.js

在 Vue 组件中引入并初始化：

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

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const videoSrc = 'https://example.com/live/stream.m3u8';
    const videoElement = this.$refs.videoPlayer;

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(videoElement);
    } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      videoElement.src = videoSrc;
    }
  }
};
</script>

使用 FLV 协议实现直播

FLV 协议延迟更低，适合实时性要求高的场景。

安装 flv.js 库：

npm install flv.js

Vue 组件实现：

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

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

export default {
  mounted() {
    const videoSrc = 'https://example.com/live/stream.flv';
    const videoElement = this.$refs.videoPlayer;

    if (flvjs.isSupported()) {
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: videoSrc
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    }
  }
};
</script>

使用 WebRTC 实现低延迟直播

WebRTC 适合需要双向通信的场景（如连麦直播）。

安装 peerjs 库：

npm install peerjs

示例代码：

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

<script>
import Peer from 'peerjs';

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

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

直播状态管理

使用 Vuex 管理直播状态：

// store.js
export default new Vuex.Store({
  state: {
    isLive: false,
    viewerCount: 0
  },
  mutations: {
    SET_LIVE_STATUS(state, status) {
      state.isLive = status;
    },
    UPDATE_VIEWER_COUNT(state, count) {
      state.viewerCount = count;
    }
  }
});

弹幕功能实现

使用 WebSocket 实现实时弹幕：

vue 实现直播功能

<template>
  <div class="danmu-container">
    <div v-for="(msg, index) in messages" :key="index" class="danmu-item">
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      messages: []
    };
  },
  mounted() {
    this.ws = new WebSocket('wss://example.com/danmu');
    this.ws.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
  beforeDestroy() {
    this.ws.close();
  }
};
</script>