浏览器中播放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，如果执行失败返回为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在浏览器中播放的一整套流程。

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

猜你喜欢