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

直播流协议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节点

  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();} // 新的播放源URLvar 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