视频格式
常见的视频格式有WEBM、AVI、MPEG,但是对于有些需要实时监控的场景项目,我们可能需要用到rtsp协议的视频流,例如大华、海康威视的项目,以及可能遇到的rtmp直播实时视频流。
HTML中的video标签能够允许我们在浏览器中播放视频,对于视频的格式也是有限制的,仅支持OGG、MPEG4、WebM,不同的浏览器支持程度和兼容性也不一样。
视频格式 | IE | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
OGG | × | 3.5+ | 5.0+ | 10.5+ | × |
MPEG4 | 9.0+ | × | 5.0+ | × | 3.0+ |
WEBM | × | 4.0+ | 6.0+ | 10.6+ | × |
然而即使是你使用的视频格式符合要求,浏览器也并不能进行直接播放,因为浏览器支持的编码格式也是有限制的,我们所说的视频格式只是一个文件格式,视频流的编码格式就类似我们使用的语言,语言不同即使输出的是一样格式的视频也并不能被浏览器所支持。
video标签所支持的视频格式和编码:
- MP4格式
MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 - WebM格式
WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器 - Ogg格式
Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
只有h264编码的MP4视频(MPEG-LA公司)、VP8编码的webm格式的视频(Google公司)和Theora编码的ogg格式的视频(iTouch开发)可以使用html5的<video>
标签直接进行播放。
视频流
视频流四字编码格式有很多,具体对照表可以参考
[https://blog.csdn.net/xunan003/article/details/92794237]
本地播放转码处理
对于无法使用HTML5的video标签进行直接播放的视频文件,可以通过在本地使用VLC 亦或者是格式工厂进行转码操作,具体工具的使用就不多说了,本文主要是讲如何通过RTSP、RTMP协议来传输视频流达到画面实时展示的。
在线网页播放转码处理
首先介绍一下RTSP、RTMP协议,他们都是流媒体协议,都可以用来做直播或者是有实时画面需要的应用场景。
理论上使用HTTP-FLV协议也能进行直播,但是一般都是用来作为点播功能。
- RTMP一般传输的是FLV、F4V格式的视频流
- RTSP一般传输的是TS 、MP4格式的视频流
| 协议 | 格式 | 延迟 | 离线监测 | 端口占用 | 依赖库 |
| — | — | — | — | — | — |
| HLS | OGG | 高,10s+ | 难 | n | VLC视频转码+video.js |
| RTMP | FLV | 较低,5s | 难 | n | ffmpeg+nginx+flash+video.js |
| WebSocket | MPEGTS | 很低,渲染慢 | 易 | 1 | ffmpeg+express+jsmpeg.js |
| HTTP-FLV | FLV | 很低,渲染快 | 易 | 1 | ffmpeg+express+flv.js |
由此可见我们可以采用三四两种结合的方式实现直播或者摄像头内容展示。
实现:
使用express+expressWs实现一个后台服务器和ws服务器