IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> 几种前端h264播放器记录 -> 正文阅读

[网络协议]几种前端h264播放器记录

近期做了点工作记录一下。主要是将H264流在html5上进行播放。众所周知,大多数的 video组件都是支持FLV或者MP4以及m3u8格式的,而如果是WebRTC是直接集成好了。本次要求的环境主要是通过Websocket方式进行流传输,不是RMTP也不是RTSP,所以最好的方式是能够直接在前端页面上进行播放。其中应该要包含H264的软解码或者硬解码。

下面介绍几种可以直接播放H264的播放器:

1.?Broadway.js

该项目的说明是将Android的H264解码器通过Emscripten编译成WebGL可用的解码器,并且进行了优化。这个库也是许多后续库的基础,相对而言是一个非常好用的解码器库。

缺点:只支持Baseline格式的H264数据流,如果是其他格式的数据流则无法解析。

额外内容:h264 分为几种,一种为baseline,一种为main,一种为pro。如果一定要使用这个库的话必须要将视频流转为baseline流。

2. h264-live-player

该播放器可以直接结合Websocket播放h264流,并且还能够处理丢帧的问题。号称是一个实时播放器。在项目提供的四种Demo中的使用方法也是非常简单使用的。

缺点:问题同Broadway.js一样,因为这个项目基于Broadway.js实现的,因此存在的问题也一样,无法解析baseline以外的h264流。

3.wfs.js

这个播放器跟前两个对比就没有那么大的知名度的,在github上面也只有200星左右。根据说明来看是直接在标准 HTML5 元素和 MediaSource 扩展之上进行的工作,将 H264 NAL 单元转换为 ISO BMFF (MP4) 片段。这个库的实时性达到了我的要求,对于H264的其他流也能够进行解码,而且还有许多人对此进行各种修改来降低延迟,总之是个挺好用的库。

缺点:针对视频尺寸变化无法及时响应(比如横竖屏切换)。如果需要很好地工作需要自己改源码。

4. JMuxer

jMuxer是一个简单的mp4多路复用器,适用于浏览器和节点环境。借助媒体源扩展在浏览器上播放媒体文件。 它还可以在节点环境中导出 mp4。 输入的视频数据应该为原始 H264 视频数据和/或 AAC 音频数据。

这个库提供了一个demo,可以先将h264视频流保存成264/h264文件,先尝试一下能不能播放再选择是否可以使用。

demo:?Online h264 player using jMuxer

缺点:实时性可能不够,当我将视频流传入库中解码的时候,依旧会有些许延迟。但是好的地方在于比起wfs.js能够适应横竖屏的切换。

5.H264-converter

这是一个TypeScripts写成的解码库,对于TypeScript阅读麻烦的可以直接看编译后的Js代码。这个库既可以识别横竖屏和分辨率切换的数据流,又具有比较高的实时性。但是由于是ts语言写的,使用方法Demo以及其他的使用资料都比较少,使用起来可能会出现问题。(具体在于参数配置上一定要和获取的视频流一致)

缺点:易读性较差,参数配置需要配置一致才能正常播放。使用方法以及文档太少。

6. ffmpeg

这个方式不是一种推荐的方式。总所周知,在视频领域通常绕不过FFmpeg这个库。这边具体的方式可以将FFmpeg编译成ffmpeg.js,通过调用C函数解码成FLV或者其他的格式,再使用FLV.JS或者Video甚至Canvas显示。

(1). ffmpeg编译成js并显示

这个方法是将编译好的ffmpeg编译成js再使用canvas直接绘制倒UI上。可以参考。编译麻烦的也可以直接在github上搜索ffmpeg.js文件可以直接跳过这一过程。

(2)使用已经编译好的ffmpeg库

这个方法使用的是ffmpeg-fluent库将h264流解码成flv流,搭配bilibili开源的flv.js库播放。这边需要对ffmpeg的命令行稍作了解,由于在js中并不存在binarystreamer这种组件,所以大多数的工程中主要使用Pipe的方式将文件流替换为视频流。除了ffmpeg-fluent库以外也可以使用libav库达到同样的效果,不过libav库的说明文档较少。

(3)在后台使用ffmpeg.exe

为了减少前端计算性能的消耗保证实时性,可以直接在后端使用ffmpeg.exe进行转码,这边借鉴了Facebook的一个用法。不过笔者在具体使用的过程中发现ffmpeg初次启动进行解码会有比较大的延迟。比起前面几种虽然理论上降低web的负担,实际上并没有特别好的效果。

  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2022-05-06 11:19:09  更:2022-05-06 11:19:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/26 1:44:11-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码