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

直播流协议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();
  }
   
  // 新的播放源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