将RTSP实时视频流转换为HLS流后,前端使用hls.js或VLC插件进行视频播放。后台使用Java语言来实现业务逻辑,通过Java调用ffmpeg工具进行视频的转换。
也可以将RTSP转为RTMP流后在前端使用flash播放,不过前端flash插件可能会有一些问题,如:新版chrome默认不启用flash,IE下容易出现flash插件启动失败的情况。
本文只介绍RTSP转为HLS流这种视频播放方案(无完整代码)。操作系统为window7,本文不适用于Linux,但思路类似。给自己做个笔记。
工具准备
ffmpeg, VLC media player, nginx1.7Gryphon (其他版本下载),FFCH4J开源java操作ffmpeg命令的代码(有现成的东西就不用自己来实现一遍了)
ffmpeg : 视频媒体转换工具。
VLC media player : 开源的视频播放器,能播放rtsp,rtmp,hls等各种视频,能将视频文件转换为rtsp等视频流。此工具可很好的模拟rtsp流,测试rtsp、rtmp、hls流是否可以播放。
nginx需要支持nginx-rtmp-module模块,检查下载的nginx是否支持这个rtmp模块的方法:使用命令 nginx -V,查看输出的版本信息中是否包含 nginx-rtmp-module这几个字。
模拟RTSP转HLS
1、模拟rtsp流
下载一个时间长点的视频,视频格式不限。使用VLC转流,转流步骤如下图:
下一步
这样得到的地址为 : rtsp://127.0.0.1:8554/test
测试一下此地址是否可用 :使用VLC点击菜单 媒体-->打开网络串流-->填入rtsp地址播放。
2、配置并启动nginx
nginx.conf参考配置:
worker_processes 1;
error_log logs/error.log info;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
application live { live on; }
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 4s;
}
}
}
http {
server {
listen 8090;
location / {
root html;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /hls {
#server hls fragments types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root html;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
#alias temp/hls;
#expires -1;
}
}
}
3、使用ffmpeg转流 (rtsp-->hls)
命令:
ffmpeg -i rtsp://127.0.0.1:8554/test -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_flags delete_segments+omit_endlist -vcodec copy -y H:/xxx/nginx-1.7.11.3-Gryphon/html/hls/test.m3u8
说明:
rtsp://127.0.0.1:8554/test 为rtsp视频地址, 请替换为实际可用的地址。
H:/xxx/nginx-1.7.11.3-Gryphon/html/hls/test.m3u8 为hls视频存放路径,html/hls这个路径可以改变,但需确保nginx.conf配置了这个目录可供访问。m3u8位hls视频后缀名。
使用以上的nginx.config配置的nginx的访问此hls的地址:http://127.0.0.1:8090/hls/test.m3u8。使用VLC测试一下hls地址是否可用。
4、前端播放hls流
前端能播放hls流的js库有很多,这里选择使用hls.js。在hls.js不可用时使用VLC插件播放hls流。js代码如下:
function loadVideoInto (videoUrl, width, height, targetSelector) { loadVideoWithHlsJs("video", videoUrl, width, height, targetSelector);
}
function loadVideoWithHlsJs (id, videoUrl, width, height, targetSelector) {
var videoHtml = '<video id="' + id + '" muted autoplay width="' + width + '" height="' + height + '"></video>';
$(targetSelector).html(videoHtml);
var video = document.getElementById(id);
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,
function() { video.play(); });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoUrl;
video.addEventListener('loadedmetadata',function() {
video.play();
});
} else {
//use VLC plugin
$("#" + id).remove();
var videoDoc = getVlcVideoDoc(id, videoUrl, width, height); $(targetSelector).html(videoDoc);
$("#" + id).attr("style", "width:" + width + "; height:" + height);
}
}
function getVlcVideoDoc(id, videoUrl, width, height) {
var html = "<object "
+ 'classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" '
+ 'codebase="/WebFish/resource/axvlc.cab" '
+ 'id="' + id + '" '
+ 'name="vlc" '
+ 'class="vlcPlayer" '
+ 'width="' + width + '" height="' + height + '" '
+ 'events="True">'
+ '<param name="Src" value="' + videoUrl + '" />'
+ '<param name="ShowDisplay" value="True" />'
+ '<param name="AutoLoop" value="False" />'
+ '<param name="AutoPlay" value="True" />'
+ '</object>';
return html;
}
前端能顺利使用VLC插件的前提是按照VLC Media Player, 安装的时候需要注意勾选中网页插件。
后台Java控制拉流 (rtsp-->hls)
使用FFCH4J这个开源库即可。若要检测拉流是否中断,目前的一个方法是Java监控ffmpeg这个进程的输出结果,正常情况下ffmpeg会不断的输出日志信息,如果输出中断(进程未退出)那么表示拉流出现异常,此时可进行重新拉流操作。
Java可控制rtsp地址以及要转换为的hls地址,开始拉流以及中止拉流等操作。