0
0

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

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

标签： 前端 音视频 html5
本文转载自: https://blog.csdn.net/qq_31851435/article/details/136626757
版权归原作者 不怕麻烦的鹿丸 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端在浏览器端播放直播流协议的方式”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航