实时视频浏览器兼容

    将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地址,开始拉流以及中止拉流等操作。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容