前端在浏览器端播放直播流协议的方式

直播流协议2种：.flv后缀是http-flv协议，.m3u8后缀是hls协议

一、播放.m3u8

1、hls.js

HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术，包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。

hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。

它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF（MP4）片段来工作。 如果在浏览器中可用，可以使用Web Worker异步执行此转换。 WWDC2016期间宣布，hls.js还支持HLS + fmp4

hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。

hls.js用ECMAScript6（* .js）和TypeScript（* .ts）（ES6的强类型超集）编写，并使用TypeScript编译器在ECMAScript5中进行编译。

特征

• VOD 和现场播放列表
• 实时播放列表上的 DVR 支持
• 碎片化的 MP4 容器
• MPEG-2 TS 容器
• ITU-T 建议书 H.264 和 ISO/IEC 14496-10 基本流
• ISO/IEC 13818-7 ADTS AAC 基本流
• ISO/IEC 11172-3 / ISO/IEC 13818-3（MPEG-1/2 Audio Layer III）基本流
• 打包元数据 (ID3v2.3.0) 基本流
• AAC 容器（仅音频流）
• MPEG 音频容器（MPEG-1/2 Audio Layer III 仅音频流）
• HTTP Live Streaming 的定时元数据（ID3 格式，MPEG-2 TS 承载）
• AES-128 解密
• SAMPLE-AES 解密（仅当使用 MPEG-2 TS 容器时才支持）
• 对 DRM（数字权限管理）的加密媒体扩展 (EME) 支持
• Widevine CDM（仅在演示页面上使用shaka-packager test-stream 进行测试）
• CEA-608/708 字幕
• WebVTT 字幕
• 用于 VoD 和现场播放列表的备用音轨再现（带有备用音频的主播放列表）
• 自适应流媒体
• 手动和自动质量切换
  • 3种质量切换模式可用（可通过API方式控制）
    • 即时切换（在当前视频位置即时质量切换）
    • 平滑切换（下一个加载片段的质量切换）
    • 带宽保守切换（下一个加载片段的质量切换更改，不刷新缓冲区）
  • 在自动质量模式下，紧急关闭以防带宽突然下降以最小化缓冲。
• VoD & Live 上的准确搜索（不限于片段或关键帧边界）
• 无需重新下载段即可在缓冲区和后台缓冲区中查找的能力
• 内置分析
• 可以监控所有内部事件（网络事件、视频事件）
• 播放会话指标也公开
• 容错能力
• 库中嵌入的重试机制
• 可以触发恢复操作修复致命的媒体或网络错误

2、使用hls.js

1. 安装hls.js

npm i hls.js

 2. 使用hls.js实现播放m3u8格式流，获取video节点

<video id="video" ref="videoRef" autoplay width="800" height="400" controls></video>

import Hls from 'hls.js'

// 获取视频元素
var video = document.getElementById('video');
 


if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = videoSrc;
	//
	// If no native HLS support, check if HLS.js is supported
	//
} else if (Hls.isSupported()) {
    let config = {
	    xhrSetup: function (xhr, url) {
	    	xhr.withCredentials = true; // 会携带cookie
		    // xhr.setRequestHeader('token',"my-token")
	    },
	}

    // 创建一个新的HLS实例
    var hls = new Hls(config);

 
    // 绑定 canplay 事件，当能够播放时开始播放
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
 
    // 绑定错误事件
    hls.on(Hls.Events.ERROR, function(event, data) {
      var errorType = data.type;
      var errorDetails = data.details;
      var errorFatal = data.fatal;

      if (data.fatal) {
        switch(data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            // 网络错误处理
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            // 媒体错误处理
            break;
          default:
            // 其他错误处理
            break;
        }
      }
    });
 
    // 在video元素上附加MSE
    hls.attachMedia(video);
 
    // 开始加载HLS流
    hls.loadSource('xxx.m3u8');
}

3. 销毁

应调用以释放使用的资源并销毁 hls 上下文

hls.destroy() 

4. 致命错误恢复

hls.js 提供了通过以下 2 种方法“尝试”恢复致命网络和媒体错误的方法：

hls.startLoad()

应调用以恢复网络错误。

hls.recoverMediaError()

应调用以恢复媒体错误。

错误恢复示例代码

hls.on(Hls.Events.ERROR, function (event, data) {
  if (data.fatal) {
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        // try to recover network error
        console.log('fatal network error encountered, try to recover');
        hls.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        console.log('fatal media error encountered, try to recover');
        hls.recoverMediaError();
        break;
      default:
        // cannot recover
        hls.destroy();
        break;
    }
  }
});

hls.swapAudioCodec()

如果调用后仍然引发媒体错误hls.recoverMediaError()，调用此方法可能有助于解决音频编解码器不匹配的问题。工作流程应该是：

关于第一媒体错误：调用 hls.recoverMediaError()

如果在第一个媒体错误之后“快速”引发另一个媒体错误：首先调用hls.swapAudioCodec()，然后调用hls.recoverMediaError()。

5. 切换播放源

首先检查hls对象是否已经定义，如果已定义，则停止当前的播放器实例。然后创建新的播放器实例，绑定到video元素，并开始加载新的播放源。加载成功后，播放器会自动开始播放新的视频内容。如果在加载过程中发生错误，会有相应的错误处理逻辑。

if (typeof hls !== 'undefined') {
  // 停止当前的播放器实例
  hls.destroy();
}
 
// 新的播放源URL
var newVideoUrl = 'new_source_url.m3u8';
 
// 创建新的HLS播放器实例
var hls = new Hls();
 
// 绑定到video元素
var video = document.getElementById('video');
hls.attachMedia(video);
 
// 监听加载事件
hls.on(Hls.Events.MANIFEST_PARSED, function () {
  video.play();
});
 
// 错误处理
hls.on(Hls.Events.ERROR, function (event, data) {
  if (data.fatal) {
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        // 网络错误处理
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        // 媒体错误处理
        break;
      default:
        // 其他错误处理
        break;
    }
  }
});
 
// 加载新的播放源
hls.loadSource(newVideoUrl);

二、播放.flv

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

1、安装flv.js

npm i flv.js

2、使用flv.js实现播放flv格式流，获取video节点

import flvjs from 'flv.js'

let videoElement = document.getElementById('my-player');

if (flvjs.isSupported()) {
    flvPlayer = flvjs.createPlayer({
        type: 'flv',					//媒体类型
        url: 'XXXX'						//flv格式媒体URL
        isLive: true,					//数据源是否为直播流
        hasAudio: false,				//数据源是否包含有音频
	    hasVideo: true,					//数据源是否包含有视频
	    enableStashBuffer: false		//是否启用缓存区
    },{
        enableWorker: false, 			//不启用分离线程
        enableStashBuffer: false, 		//关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true 	//自动清除缓存
    });

    flvPlayer.attachMediaElement(videoElement);	//将播放实例注册到节点
    flvPlayer.load(); 					//加载数据流
    flvPlayer.play();					//播放数据流
}

3、关闭视频流

flvPlayer.pause();						//暂停播放数据流							
flvPlayer.unload();						//取消数据流加载
flvPlayer.detachMediaElement();			//将播放实例从节点中取出
flvPlayer.destroy();					//销毁播放实例

4、flv.js常用方法

1：flvjs.isSupported()：判断当前浏览器是否支持播放

2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例

3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点

4：flvPlayer.load()：加载数据流

5：flvPlayer.play()：播放数据流

6：flvPlayer.pause()：暂停播放数据流

7：flvPlayer.unload()：取消数据流加载

8：flvPlayer.detachMediaElement()：将播放实例从节点中取出

9：flvPlayer.destroy()：销毁播放实例

参考文档

hls.js - npm

flv.js - npm