| |
|
开发:
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流。 该播放器可以直接结合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能够适应横竖屏的切换。 这是一个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文件可以直接跳过这一过程。 这个方法使用的是ffmpeg-fluent库将h264流解码成flv流,搭配bilibili开源的flv.js库播放。这边需要对ffmpeg的命令行稍作了解,由于在js中并不存在binarystreamer这种组件,所以大多数的工程中主要使用Pipe的方式将文件流替换为视频流。除了ffmpeg-fluent库以外也可以使用libav库达到同样的效果,不过libav库的说明文档较少。 为了减少前端计算性能的消耗保证实时性,可以直接在后端使用ffmpeg.exe进行转码,这边借鉴了Facebook的一个用法。不过笔者在具体使用的过程中发现ffmpeg初次启动进行解码会有比较大的延迟。比起前面几种虽然理论上降低web的负担,实际上并没有特别好的效果。 |
|
网络协议 最新文章 |
使用Easyswoole 搭建简单的Websoket服务 |
常见的数据通信方式有哪些? |
Openssl 1024bit RSA算法---公私钥获取和处 |
HTTPS协议的密钥交换流程 |
《小白WEB安全入门》03. 漏洞篇 |
HttpRunner4.x 安装与使用 |
2021-07-04 |
手写RPC学习笔记 |
K8S高可用版本部署 |
mySQL计算IP地址范围 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
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- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |