Mpegts.js

mpegts.js 是在 HTML5 上直接播放 MPEG2-TS 流的播放器，针对低延迟直播优化，可用于 DVB/ISDB 数字电视流或监控摄像头等的低延迟回放。 mpegts.js 基于 flv.js 改造而来。

原理

mpegts.js 通过在 JavaScript 中渐进化解析 MPEG2-TS 流并实时转封装为 ISO BMFF (Fragmented MP4),喂给video标签。

安装使用

npm install --save mpegts.js

player.value = Mpegts.createPlayer({
    url: props.url,
    type: 'mse',
    isLive: true
  });
  player.value.attachMediaElement(el);
  player.value.load();
  player.value.play();

事件处理

const loding = ref(false)
const videoRef = ref(null);
const player = ref<Mpegts.Player>()

const createPlayer = (el: HTMLVideoElement) => {
  loding.value = true;

  player.value = Mpegts.createPlayer({
    url: props.url,
    type: 'mse',
    isLive: true
  });
  player.value.attachMediaElement(el);
  player.value.load();
  player.value.play();

  const option = {
    lastDecodeFrame: 0,
    count: 0,
    max_count: 30
  }
  player.value.on(Mpegts.Events.STATISTICS_INFO, e => {
    if (option.lastDecodeFrame === 0) {
      option.lastDecodeFrame = e.decodedFrames;
      return;
    }
    if (option.lastDecodeFrame === e.decodedFrames) {
      option.count++;
      if (option.count > option.max_count) {
        // 断流重连
        destory();
        createPlayer(videoRef.value as unknown as HTMLVideoElement)
      } else {
        option.lastDecodeFrame = e.decodedFrames;
        option.count = 0
      }
    }
  })

  // 构建成功的信息
  player.value.on(Mpegts.Events.MEDIA_INFO, info => {
    console.log('[Mpegts 构建成功]', info);

  })

  player.value.on(Mpegts.Events.LOADING_COMPLETE, () => {
    console.log('[LOADING_COMPLETE]');
    destory();
    createPlayer(videoRef.value as unknown as HTMLVideoElement)
  })

  loding.value = false;
}

// 销毁
const destory = () => {
  if (!player.value) return;
  player.value.unload();
  player.value.detachMediaElement();
  player.value.destroy();
  player.value = undefined;
}

文档

官方api文档

mpegts.createPlayer()

function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;

1. MediaDataSource

配置项	类型	描述	默认值
type	string	媒体类型, 'mse', 'mpegts', 'm2ts', 'flv' or 'mp4'
url?	string	媒体URL
isLive?	boolean	是否是直播流	true
hasAudio?	boolean	指示流是否具有音频轨道	true
hasVideo?	boolean	指示流是否具有视频轨道	true

2. Config

配置项	类型	描述	默认值
enableWorker?	boolean	transmuxing过程是否启用worker	false
enableWorkerForMSE?	boolean	MediaSource是否启用worker	false
enableStashBuffer?	boolean	启用IO存储缓冲区	true
stashInitialSize?	number	设置IO存储缓冲区的初始大小	384(KB)
isLive?	boolean	是否是直播流，同MediaDataSource	true
liveBufferLatencyChasing?	boolean	启用缓存追帧策略	false
liveBufferLatencyMaxLatency?	number	HTMLMediaElement中可接受的最大缓冲区延迟	1.5(s)
liveBufferLatencyMinRemain?	number	HTMLMediaElement中要保持的最小缓冲区延迟	0.5(s)
autoCleanupSourceBuffer?	boolean	自动清理sourceBuffer	false

mpegts.Events

事件	描述
ERROR	播放过程中出现错误
MEDIA_INFO	构建成功后触发，提供视频/音频编解码器、比特率等信息
STATISTICS_INFO	播放过程中持续触发，当前解码数据，用于判断断流重连
LOADING_COMPLETE	视频流连接断开会触发，用于处理画面卡死