浏览器中播放rtsp（不依赖vlc插件）

之前是通过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，如果执行失败返回为nullreturn 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'});}
};

这里是将播放器放在了模态框上，效果如下：