音频视频处理：前端直播流播放 flv

文章目录

- 需求
- 分析
- - [方案 1：使用 Video.js + HLS 插件（播放 HLS 流，兼容性最好）](#方案 1：使用 Video.js + HLS 插件（播放 HLS 流，兼容性最好）)
  - [方案 2：使用 Flv.js（播放 FLV 流，低延迟）](#方案 2：使用 Flv.js（播放 FLV 流，低延迟）)
  - [方案 2 优化：](#方案 2 优化：)
  - [方案 3：使用 WebRTC 播放器（超低延迟，适合实时场景）](#方案 3：使用 WebRTC 播放器（超低延迟，适合实时场景）)

需求

上一个文章中写到将直播的流转换成前端可播放的格式，使用的是 ffmpeg 的方式进行的：海康监控直播流播放处理

现在如果这一步转换流的方式放在服务端，我们客户端不需要这么处理的话，就需要用前端来播放转换后的流（两种主流播放器方案）

分析

方案 1：使用 Video.js + HLS 插件（播放 HLS 流，兼容性最好）

Video.js 是开源播放器，配合 videojs-hls-plugin 可播放 HLS（m3u8）流，支持所有现代浏览器

javascript 复制代码

<template>
  <div class="player-container">
    <video id="player" class="video-js vjs-big-play-centered" controls preload="auto"></video>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import VideoJs from 'video.js';
import 'video.js/dist/video-js.css';
import Hls from 'videojs-contrib-hls'; // 引入HLS插件

// 注册HLS插件
VideoJs.registerPlugin('hls', Hls);

onMounted(() => {
  // 初始化播放器，播放转换后的HLS流（替换为你的服务器地址）
  const player = VideoJs('player', {
    autoplay: true,
    muted: true, // 自动播放需要静音（浏览器策略）
    loop: false,
    controls: true,
    fluid: true, // 自适应宽高
    sources: [{
      src: 'http://你的服务器IP/live/stream.m3u8', // HLS流地址
      type: 'application/x-mpegURL' // HLS的MIME类型
    }]
  });

  // 销毁播放器（组件卸载时）
  const handleUnmount = () => {
    if (player) {
      player.dispose();
    }
  };
  window.addEventListener('beforeunload', handleUnmount);
});
</script>

<style scoped>
.player-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
</style>

安装依赖：

javascript 复制代码

npm install video.js videojs-contrib-hls --save

方案 2：使用 Flv.js（播放 FLV 流，低延迟）

Flv.js 是 B 站开源的播放器，支持播放 FLV 流，延迟比 HLS 更低。

javascript 复制代码

<template>
  <div class="player-container">
    <video id="player" controls preload="auto" muted autoplay></video>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import flvjs from 'flv.js';

onMounted(() => {
  // 检查浏览器是否支持
  if (flvjs.isSupported()) {
    const videoElement = document.getElementById('player') as HTMLVideoElement;
    const flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: 'http://你的服务器IP/live/stream.flv' // FLV流地址（需Nginx发布）
      // 若为RTMP流，type改为'rtmp'，url改为'rtmp://你的服务器IP:1935/live/stream'
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    flvPlayer.play();

    // 销毁播放器
    const handleUnmount = () => {
      flvPlayer.destroy();
    };
    window.addEventListener('beforeunload', handleUnmount);
  }
});
</script>

<style scoped>
.player-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
</style>

安装依赖

javascript 复制代码

npm install flv.js --save

方案 2 优化：

使用 Flv.js 时，会出现更新流时页面再次初始化播放会报错：Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.

javascript 复制代码

const mixStreamUrl = (Url) => {
  const dom = document.getElementById('player') as HTMLVideoElement
  if (flvjs.isSupported()) {
    // 销毁现有播放器实例
    if (flvPlayer) {
      flvPlayer.destroy()
      flvPlayer = null
    }
    // 创建新的播放器实例
    flvPlayer = flvjs.createPlayer({
      type: 'flv',
      url: Url
      // 若为RTMP流，type改为'rtmp'，url改为'rtmp://你的服务器IP:1935/live/stream'
    })
    flvPlayer.attachMediaElement(dom)
    flvPlayer.load()
    flvPlayer.muted = false
    flvPlayer.play()
  }
}

方案 3：使用 WebRTC 播放器（超低延迟，适合实时场景）

若转换为 WebRTC 流，可使用 simple-peer 或原生 WebRTC API 播放

javascript 复制代码

// 原生WebRTC播放（需配合SRS等服务器的WebRTC推流）
const pc = new RTCPeerConnection({
  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});

// 接收视频流
pc.ontrack = (e) => {
  const videoElement = document.getElementById('player');
  videoElement.srcObject = e.streams[0];
};

// 发起请求（具体信令需配合服务器，如SRS的WebRTC信令）
fetch('http://你的服务器IP/rtc/v1/play/', {
  method: 'POST',
  body: JSON.stringify({
    api: 'play',
    streamurl: 'webrtc://你的服务器IP/live/stream'
  })
}).then(res => res.json()).then(data => {
  pc.setRemoteDescription(new RTCSessionDescription(data.sdp));
  pc.createAnswer().then(answer => {
    pc.setLocalDescription(answer);
    // 发送answer到服务器（信令交互）
  });
});