前端在浏览器端播放直播流协议的2种方式讲解_Javascript

直播流协议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()：销毁播放实例