之前是通过vlc插件来显示rtsp流视频,但是限制很多:1.要安装vlc的插件2.插件目前只支持ie,像chrome在46版本之后根本就无法使用,于是上网搜索得出rtsp->rtmp->videoJS这样的一个方案,具体流程如下:
一.rtsp转rtmp
1.首先测试rtsp链接是否有效,这里用的vlc midia player:
如下图所示 媒体->打开网络串流->输入rtsp链接->播放,正常的话就可以看到画面了。
2.接下来就是转换,用的是nginx-rtmp-module+Ffmpeg的方案,首先下载nginx-rtmp-module,按照说明双击nginx.exe启动nginx,正常的话浏览器输入http://localhost:8080/就可以进demo,chrome记得要允许允许flash。
FFmpeg转码用的这个方案 java封装FFmpeg命令,下载好后不改源码的话直接引入FFmpegCommandHandler.jar这个jar包即可。
启动转码的代码:
@Override
public String startTranscoding(Camera camera) {
String ip = camera.getIp();
String id = "fourfour";
if (manager == null) {
manager = new FFmpegManagerImpl();
}
Map<String,String> map = new HashMap<>();
map.put("appName", id);
map.put("input", "rtsp://admin:admin1234@" + ip + ":554");
map.put("output", "rtmp://localhost/live/");
map.put("codec", "h264");
map.put("fmt", "flv");
map.put("fps", "25");
map.put("rs", "640x360");
map.put("twoPart", "0");
// 执行任务,id就是appName,如果执行失败返回为null
return manager.start(map);
}
代码运行日志截图:
可以看到执行的命令,具体参数就不做解释了,可以自行百度;这样我们就获得了rtmp://localhost/live/fourfour这个rtmp流。
同样的我们可以先用vlc media player先测试下这个流,操作方法同上:
顺利的话将会出现画面。
3.前端显示
前端主流的有jwplayer、videoJS等方案,这里选择的免费的VideoJS,主要代码如下:
//videoJS播放器实例
var player = null;
//通过videoJs进行rtmp播放
$scope.rtmpReview = function (decoder) {
console.log("点解的decoder", decoder);
if (decoder.style === 1) {
var cameraIp = decoder.head;
var id = "fourfour";
$http.post("/decoder/decoderManager/transcode", {ip:cameraIp}).success(function (data) {
console.log("transcode:", data);
}).error(function (data) {
console.log(data);
});
$("#videoBody").append(
"<video id=\"my-video1\" class=\"video-js vjs-big-play-centered\" controls preload=\"auto\" width=\"560\" height=\"360\" poster=\"\" data-setup=\"{}\">" +
"<source type=\"rtmp/flv\">" +
"<p class=\"vjs-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that" +
"<a href=\"http://videojs.com/html5-video-support/\" target=\"_blank\">supports HTML5 video</a>" +
"</p></video>");
var videoUrl = "rtmp://localhost/live/" + id;
player = videojs('my-video1');
videojs('my-video1', {
controls: true,
autoplay: true,
preload: 'auto'
}, function () {
player.src(videoUrl);
player.load(videoUrl);
player.play();
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
$("#videoWatchModal").modal({show: true, keyboard: false, backdrop: 'static'});
}
};
这里是将播放器放在了模态框上,效果如下:
好了,这样我们就实现了rtsp在浏览器中播放的一整套流程。