项目需求，需要前端页面实时展示摄像头采集的视频，视频啊，之前一点没接触过，经过一番调研、尝试，不得不说，网上文章真的大同小异，踩过许多坑，整理如下。

● RTMP（推流端、拉流端） ● RTSP（推流端） ● HLS（拉流端） ● FLV（拉流端）

● 原生video标签只支持Ogg、MPEG4、WebM三种格式 ● 默认需要安装flash插件才可以播放 ● bilibili开源flv.js插件可直接转码，vue项目直接使用 ○ 推流端视频编码必须是H.264

● 把整个流分成一个个小的基于HTTP的文件下载，所以不适用直播，延迟会比其他协议的高，对网络质量要求高 ● 前端处理HLS格式视频流，引入video.js

● 实时传输协议 ● 大屏项目大部分视频都是通过安装监测摄像头传输展示的 ● 延时低，厂商直接提供，网络负载均衡 ● 不支持移动端，浏览器兼容性差，需要低版本浏览器，且安装插件

● 基于TCP，实时性高、稳定性高，主要用于直播 ● 一般是传输的为flv流

暂不考虑项目要求，对于现阶段前端可实现的途径进行了具体实现，如下：

在vue项目里，安装了flv.js，可直接播放flv编码格式的视频流

从几种方案调研来看，浏览器不支持flash插件已成趋势，不建议ie+vlc插件的方案，至于其他几种直接播放的方法，看项目需求，不过个人看法，主流应该是webrtc（ps：代码截图涉及的很多本地测试地址，都是后台小哥哥用ffmpeg转的😊😊😊）

视频小白，欢迎指正！

持续尝试中，后续更新…

兔年大吉，复工第一天应项目需求，时隔一年多，再次尝试直接用chrome播放rtmp格式的视频流，在一番调研之后，具体实现如下。