浏览器中播放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，正常的话浏览器输入就可以进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 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(
            "" +
            "" +
            "
To view this video please enable JavaScript, and consider upgrading to a web browser that" +
            "supports HTML5 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('A so soon?!');
            });
        });

        $("#videoWatchModal").modal({show: true, keyboard: false, backdrop: 'static'});
    }
};

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


好了，这样我们就实现了rtsp在浏览器中播放的一整套流程。
--------------------- 
作者：方块糖 
来源：CSDN 
原文：https://blog.csdn.net/gui66497/article/details/78590190?utm_source=copy 
版权声明：本文为博主原创文章，转载请附上博文链接！