javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端浏览器端播放直播流协议

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

作者：不怕麻烦的鹿丸

直播依赖录播所需要的播放技术,同时依赖HTTP FLV或者WebSocket中的一种协议来传输FLV,这篇文章主要给大家介绍了关于前端在浏览器端播放直播流协议的2种方式,需要的朋友可以参考下

直播流协议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中进行编译。

特征

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

到此这篇关于前端在浏览器端播放直播流协议的2种方式讲解的文章就介绍到这了,更多相关前端浏览器端播放直播流协议内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文