浏览器播放rtsp视频流解决方案

时间 2019-11-06

标签浏览器播放 rtsp 视频解决方案栏目浏览器繁體版

原文原文链接

最近项目中须要实时播放摄像头rtsp视频流，因而就专门作了些研究。而浏览器不能直接播放，只有经过插件或者转码来实现这个需求。javascript

要实现这个目的，能够采用的方案很是得多，有商业的也有开源的，这里主要列举一些开源的方案。这里的方案都是我尝试过了的，有些成功，有些没成功。可是由于每一个项目状况不一样，此次没成的方法，换个项目也许就能成。css

方案一: html5 + websocket_rtsp_proxy 实现视频流直播

实现原理 html

实现步骤html5

服务器安装streamedian服务器java
客户端经过video标签播放linux

<video id="test_video" controls autoplay></video>

<script src="free.player.1.8.4.js"></script>
<script> if (window.Streamedian) { var errHandler = function(err){ console.log('err', err.message); }; var infHandler = function(inf) { console.log('info', inf) }; var playerOptions = { socket: "ws://localhost:8088/ws/", redirectNativeMediaErrors : true, bufferDuration: 30, errorHandler: errHandler, infoHandler: infHandler }; var html5Player = document.getElementById("test_video"); html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"; var player = Streamedian.player('test_video', playerOptions); window.onbeforeunload = function(){ player && player.destroy(); player = null; Request = null; } } </script>
复制代码

注意：测试时先从官网申请license key，不然socket 只能识别localhost和127.0.0.1nginx

优缺点git

优势：实现比较简单
缺点：收费的，免费版有不少限制

参考连接github

方案二：ffmpeg + nginx + video，rtsp转rtmp播放

rtmp是adobe开发的协议，通常使用adobe media server 能够方便的搭建起来；随着开源时代的到来，有大神开发了nginx的rtmp插件，也能够直接使用nginx实现rtmpweb

rtmp方式的最大的优势在于低延时，通过测试延时广泛在1-3秒，能够说很实时了；缺点在于它是adobe开发的，rtmp的播放严重依赖flash，而因为flash自己的安全，现代浏览器大多禁用flash

实现步骤

安装ffmpeg工具
安装nginx 注意：linux系统须要安装 nginx-rtmp-module 模块，Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)
更改nginx配置

rtmp{
    server{
    listen 1935;

        application live{
          live on;
          record off;
        }
        application hls{
          live on;
          hls on;
          hls_path nginx-rtmp-module/hls;
          hls_cleanup off;
        }
    }
}
复制代码

ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"
复制代码

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
    <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/>
</video>

</body>
</html>
<!-- 引入js -->
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-flash.js"></script>

<script> videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('test_video', {"autoplay":true}); player.play(); </script>
复制代码

注意：使用谷歌浏览器播放时，须要开启flash容许

参考连接

方案三：ffmpeg + video，rtsp转hls播放

HLS (HTTP Live Streaming) 直播是有苹果提出的一个基于http的协议。其原理是把整个流切分红一个个的小视频文件，而后经过一个m3u8的文件列表来管理这些视频文件

HTTP Live Streaming 并非一个真正实时的流媒体系统，这是由于对应于媒体分段的大小和持续时间有必定潜在的时间延时。在客户端，至少在一个分段媒体文件被彻底下载后才可以开始播放，而一般要求下载完两个媒体文件以后才开始播放以保证不一样分段音视频之间的无缝链接。

此外，在客户端开始下载以前，必须等待服务器端的编码器和流分割器至少生成一个TS文件，这也会带来潜在的时延。

服务器软件将接收到的流每缓存必定时间后包装为一个新的TS文件，而后更新m3u8文件。m3u8文件中只保留最新的几个片断的索引，以保证观众任什么时候候链接进来都会看到较新的内容，实现近似直播的效果。

这种方式的理论最小延时为一个ts文件的时长，通常为2-3个ts文件的时长。

实现步骤

安装ffmpeg工具
ffmpeg转码

ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"
复制代码

ffmpeg 关于hls方面的指令说明

-hls_time n: 设置每片的长度，默认值为2。单位为秒
-hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
-hls_wrap n:设置多少片以后开始覆盖，若是设置为0则不会覆盖，默认值为0.这个选项可以避免在磁盘上存储过多的片，并且可以限制写入磁盘的最多的片的数量
-hls_start_number n:设置播放列表中sequence number的值为number，默认值为0

video 播放

<html>
<head>
<title>video</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" />

</head>
<body>
<div class="videoBox">
    <video id="my_video_1" class="video-js vjs-default-skin" controls>
        <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> 
    </video>
</div>

</body>
</html>
<script type="text/javascript" src="./videojs/video.min.js"></script>
<script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script>
<script> videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('my_video_1', {"autoplay":true}); player.play(); </script>
复制代码

参考连接

方案四：VLC插件播放

播放步骤

下载安装vlc
浏览器播放

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
    <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
    <param name='controls' value='false' />
</object>
复制代码

优缺点

优势：能够直接播放RTSP，无需任何中介服务器的帮助
缺点：须要手动安装插件；基于NPAPI，不被最新的 Chrome 和 Firefox 支持
若是你项目的其余功能都能兼容客户电脑上的 IE 浏览器，这个方案就是首选。

参考连接

其余方案

WebRTC

WebRTC 是支持网页浏览器进行实时音视频的一套API，例如：HTML5 经过 webRTC 直接调用摄像头，可是若是要实现远程视频流的显示，则须要将 RTSP 转换为 WebRTC 流，供 web 端显示。

参考地址：github.com/lulop-k/kur…

h5stream

参考地址：

写的不清楚的地方，请自行百度，网上案例不少，有什么建议能够随时提出来交流！