实时视频浏览器兼容

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,490评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,581评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,830评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,957评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,974评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,754评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,464评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,847评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,819评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,482评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2 355

推荐阅读更多精彩内容