浏览器无插件播放rtsp视频流 java后台 + js + html

前言：

　　现在安防设备普遍使用rtsp拉取视频流，要在网页播放rtsp视频流不可以直接实现，html不支持rtsp视频流，所以需要进行转换成html5可以解析的帧数据然后在浏览器进行播放。传输数据流的长连接，网上很多都是node.js开发的http转websocket，借鉴采用java + netty 进行了这一步的转换。这个地方一定要搞清楚http和WS的区别，为啥要转WS。本文的核心就是http转ws+ js页面帧展示.

原理：

　　ffmpeg可以将rtsp视频流转换成很多格式的帧数据。将这些数据以http长连接的方式推送给后台，后台转换为浏览器可以播放的WS数据流，浏览器通过js解析ws协议提取出每一帧后展示。网上的思路也大多是如此，此处以h264_wfs_websocket为例进行分析。

操作步骤

　　1.安装ffmpeg，可以用java驱动ffmpeg进行调用，网上有很多案例，封装的库也很方便，在此就不列举。

　　　　ffmpeg -rtsp_transport tcp -i "rtsp://admin:guide123@192.168.1.190:554/" -q 0 -buffer_size 1024000 -max_delay 500 -f rawvideo -codec:v libx264 -preset ultrafast http://127.0.0.1:8081/supersecret/live3

　　　　这里主要说明优化的几点：

　　　　a.　ffmpeg转tcp协议不会丢帧，但是不可避免的存在延时大，udp在网络不好的情况下出现很多马赛克。

　　　　b.　-preset ultrafast这个指令可以让延迟缩小很多 ,画质有一定影响。

　　2. java后台服务，搭建netty平台，将ffmpeg推送的http连接升级为Websocket（WS）长连接，将收到的WS消息广播给指定用户（通过浏览器连接参数或路径进行广播），参考rtsp+ffmpeg+ netty +jsmpeg。

　　3. 引入wfs.js，按自己需求进行微调，前期由于里面参数调整不到位，读帧的速度没调整好（_this.H264_TIMEBASE = 3000），导致帧跳跃。参考github进行微调，从大往小了调整，找到最合适的值。

　　4. 编写页面进行播放:

<!DOCTYPE html>
<html>
<head>
    <title>h.264 To fmp4</title>  
</head>
<body>
    <h2>h.264 To fmp4</h2>
    <script type="text/javascript" src="../wfs/wfs.js" ></script>
   
    <div class="wfsjs">
    <video id="video1"  width="640" height="480" controls></video>
    <div class="ratio"></div>
    </div>
    <script>
        window.onload = function () {
            if (Wfs.isSupported()) {
                var video1 = document.getElementById("video1"),
                wfs = new Wfs();    
                wfs.attachMedia(video1,'ch1');
            }
        };
    </script>
</body>
</html>

总结了几个地方需注意和优化：

　　1.播放延迟越来越高，可以通过调整播放速率来调整。解决不了的话定时修改player.currentTime = 当前视频加载进度来解决，相当于播放器下的快进键和进度条控制拉动。

　　2.浏览器缩小后视频可能暂停了，需要在重新打开的时候按上面1的方法处理。.

　　3.浏览器缓存越来越大，监控视频是一天24小时不间断的播放，所以浏览器在经过一段时间后绝对会崩溃。解决办法是定时（采用了30分钟）重新打开新的视频连接，替换老的视频连接，相当于偷偷的给用户换了个页面播放连接，新老视频播放中间有时间差注意好，预计新的视频流加载的可以平稳播放了再替换并关闭老的视频流，保证平稳过度。