在VUE框架的WEB网页端播放海康威视RTSP视频流完全方案

一、背景

如果你问一个前端技术人员，近几年最火的前端框架技术是什么，肯定会有人说VUE，确实VUE凭借其简单特性赢得了大家的喜爱，而近期公司有个项目，需要在VUE框架网页上播放RTSP实时视频。

小编对目前市场上的所有方案进行了测试，发现市面上行大部分方案都是转码转流方案，需要服务器不停的转码转流，不仅延迟高，能达到几秒甚至几分钟，播放高清视频或者H.265格式视频容易卡顿，同时多路播放效果也差，比如WebAssembly甚至本地录像抓图功能都不能实现，很难用于商业。小编对比了几个方案，发现个有优劣，只要最后一种延迟低，性能稳定，播放体验最好！

二、方案

1.服务器转流前端转码方案

服务器端先把RTSP流用Web Socket或WebRTC推送到前端，再通过WASM转码MP4播放。此方案虽号称是无插件方案，但是需要服务器支持，两次转码导致延迟较高，一般高达数秒甚至数分钟。此方案首屏画面显示很慢。因为需要服务器不断转码转流，对CPU和内存消耗较大，带宽占用高，长期综合使用成本也很高。如果多路播放或者看高分辨率或 H.265视频，很可能就会出现卡顿、花屏等情况。

综合来看，此方案摄像头较少或者对延迟、画面要求较低的需求，商用难堪重任。