third
/
srs
Mirror von https://github.com/ossrs/srs


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
							<!DOCTYPE html>
<html>
<head>
    <title>SRS</title>   
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding-top: 55px;
        }
    </style>
</head>
<body>
<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/srspublisher'/>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a id="srs_index" class="brand" href="#">SRS</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div name="detect_flash">
        <div id="main_flash_alert" class="alert alert-danger fade in hide">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong><p>Usage:</p></strong>
            <p>
                请点击下面的图标，启用Flash
            </p>
            <p>
                若没有见到这个图标，Chrome浏览器请打开
                <span class="text-info">chrome://settings/content/flash</span> 并修改为"Ask first"。
            </p>
        </div>
        <div id="main_flash_hdr" class="hide">
        </div>
    </div>

    <div id="main_content" class="hide">
        <div class="alert alert-danger fade in">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong><span>Remark:</span></strong>
            <span>Flash推流只支持H.264+Speex，音频不支持AAC，所以无法输出HLS</span>
        </div>
        <div class="alert alert-info fade in" id="txt_log">
            <button type="button" class="close" data-dismiss="alert">×</button>
            <strong><span id="txt_log_title">Usage:</span></strong>
            <span id="txt_log_msg">设置编码参数，点“发布视频”，允许Flash访问摄像头即可推流</span>
        </div>
        <div class="control-group">
            <div class="form-inline">
                <button class="btn" id="btn_video_settings">视频编码配置</button>
                <button class="btn" id="btn_audio_settings">音频编码配置</button>
            </div>
        </div>
        <div class="control-group">
            <div class="form-inline">
                发布地址:
                <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
                <button class="btn btn-primary" id="btn_publish">发布视频</button>
                <label class="checkbox">
                    <input type="checkbox" id="cb_preview" checked>预览
                </label>
                <a id="txt_play_realtime" class="input-xxlarge" href="#">RTMP播放地址(请发布视频)</a>
            </div>
        </div>
        <div id="video_modal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>视频编码</h3>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="sl_cameras">
                            摄像头
                            <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span4" id="sl_cameras"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_vcodec">
                            Codec
                            <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_vcodec"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_profile">
                            Profile
                            <a id="sl_profile_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_profile"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_level">
                            Level
                            <a id="sl_level_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_level"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_gop">
                            GOP
                            <a id="sl_gop_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_gop"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_size">
                            尺寸
                            <a id="sl_size_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_size"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_fps">
                            帧率
                            <a id="sl_fps_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_fps"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_bitrate">
                            码率
                            <a id="sl_bitrate_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_bitrate"></select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
            </div>
        </div>
        <div id="audio_modal" class="modal hide fade">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>音频编码</h3>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label" for="sl_microphones">
                            麦克风
                            <a id="worker_id_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span4" id="sl_microphones"></select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="sl_acodec">
                            编码
                            <a id="sl_acodec_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
                                <img src="img/tooltip.png"/>
                            </a>
                        </label>
                        <div class="controls">
                            <select class="span2" id="sl_acodec"></select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
            </div>
        </div>
        <div class="container">
            <div class="row-fluid">
                <div class="span6">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <span class="accordion-toggle">
                                <strong>本地摄像头</strong>
                            </span>
                        </div>
                        <div class="accordion-body collapse in">
                            <div class="accordion-inner">
                                <div id="local_publisher"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <span class="accordion-toggle">
                                <strong>远程服务器</strong>
                                <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
                                    低延时<img src="img/tooltip.png"/>
                                </a>
                                <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
                                    播放地址<img src="img/tooltip.png"/>
                                </a>
                            </span>
                        </div>
                        <div class="accordion-body collapse in">
                            <div class="accordion-inner">
                                <div id="realtime_player"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <p></p>
        <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2013</a></p>
    </footer>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/srs.page.js"></script>
<script type="text/javascript" src="js/srs.log.js"></script>
<script type="text/javascript" src="js/srs.player.js"></script>
<script type="text/javascript" src="js/srs.publisher.js"></script>
<script type="text/javascript" src="js/srs.utility.js"></script>
<script type="text/javascript" src="js/winlin.utility.js"></script>
<script type="text/javascript">
    var __on_flash_ready = null;

    $(function(){
        // 探测Flash是否正常启用。
        $('#main_flash_hdr').html(
            '\
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%"> \
                <param name="movie" value="srs_player/release/srs_player.swf"> \
                <param name="quality" value="autohigh"> \
                <param name="swliveconnect" value="true"> \
                <param name="allowScriptAccess" value="always"> \
                <param name="bgcolor" value="#0"> \
                <param name="allowFullScreen" value="true"> \
                <param name="wmode" value="opaque"> \
                <param name="FlashVars" value="log=1"> \
                <param name="flashvars" value="id=1&on_player_ready=__on_flash_ready"> \
                <embed src="srs_player/release/srs_player.swf" width="100%" height="100%" \
                    quality="autohigh" bgcolor="#0" align="middle" allowfullscreen="true" allowscriptaccess="always" \
                    type="application/x-shockwave-flash" swliveconnect="true" wmode="opaque" \
                    flashvars="id=1&on_player_ready=__on_flash_ready" \
                    pluginspage="http://www.macromedia.com/go/getflashplayer"> \
            </object> \
            '
        );
        $('#main_flash_hdr').show();

        var showFlashHdr = setTimeout(function(){
            $('#main_flash_alert').show();
        }, 300);

        __on_flash_ready = function (id) {
            clearTimeout(showFlashHdr);

            $('#main_flash_alert').hide();
            $('#main_flash_hdr').hide();
            $('#main_content').show();

            autoLoadPage();
        };
    });
</script>
<script type="text/javascript">
    var srs_publisher = null;
    var realtime_player = null;

    var query = parse_query_string();
    var autoLoadPage = function() {
        // get the vhost and port to set the default url.
        // url set to: http://localhost:8080/live/livestream.flv
        srs_init_flv("#txt_url", null);

        if (query.agent == "true") {
            document.write(navigator.userAgent);
            return;
        }

        $("#btn_video_settings").click(function(){
            $("#video_modal").modal({show:true});
        });
        $("#btn_audio_settings").click(function(){
            $("#audio_modal").modal({show:true});
        });

        $("#low_latecy_tips").tooltip({
            title: "服务器不转码直接转发FLASH编码器的流，所以延迟比支持HLS的流要低很多"
        });
        $("#realtime_player_url").tooltip({
            title: "右键复制RTMP地址"
        });

        $("#btn_publish").click(on_user_publish);

        // for publish, we use randome stream name.
        $("#txt_url").val($("#txt_url").val() + "." + new Date().getTime());

        // start the publisher.
        srs_publisher = new SrsPublisher("local_publisher", 430, 185);
        srs_publisher.on_publisher_ready = function(cameras, microphones) {
            srs_publisher_initialize_page(
                    cameras, microphones,
                    "#sl_cameras", "#sl_microphones",
                    "#sl_vcodec", "#sl_profile", "#sl_level", "#sl_gop", "#sl_size",
                    "#sl_fps", "#sl_bitrate",
                    "#sl_acodec"
            );
        };
        srs_publisher.on_publisher_error = function(code, desc) {
            if (!on_publish_stop()) {
                return;
            }
            error(code, desc + "请重试。");
        };
        srs_publisher.on_publisher_warn = function(code, desc) {
            warn(code, desc);
        };
        srs_publisher.start();

        // if no play specified, donot show the player, for debug the publisher.
        if (query.no_play != "true") {
            // start the realtime player.
            realtime_player = new SrsPlayer("realtime_player", 430, 185);
            realtime_player.on_player_ready = function() {
                this.set_bt(0.8);
            };
            realtime_player.on_player_metadata = function(metadata) {
                this.set_dar(0, 0);
                this.set_fs("screen", 100);
            }
            realtime_player.start();
        }
    };

    function on_publish_stop() {
        if (!srs_can_republish()) {
            $("#btn_join").attr("disabled", true);
            error(0, "您使用的浏览器很弱，请关闭页面后重新打开页面（刷新也不管用）。<br/>推荐使用Chrome浏览器，支持重试");

            srs_log_disabled = true;
            return false;
        }

        return true;
    }

    function update_play_url() {
        var url = $("#txt_url").val();
        var ret = srs_parse_rtmp_url(url);

        var remote_url = "rtmp://" + ret.server + ":" + ret.port + "/" + ret.app +  "/" + ret.stream + '?vhost=' + ret.vhost;
        $("#realtime_player_url").attr("href", url).attr("target", "_blank");

        var srs_player_rt_url = "http://" + query.host + query.dir + "/srs_player.html?";
        srs_player_rt_url += "vhost=" + ret.vhost + "&port=" + ret.port + "&app=" + ret.app + "&stream=" + ret.stream;
        srs_player_rt_url += "&autostart=true";

        $("#txt_play_realtime").text("RTMP播放地址").attr("href", srs_player_rt_url).attr("target", "_blank");
    }
    function on_user_publish() {
        if ($("#btn_publish").text() == "停止发布") {
            srs_publisher.stop();
            $("#btn_publish").text("发布视频");

            if (!on_publish_stop()) {
                return;
            }
            return;
        }

        $("#btn_publish").text("停止发布");

        update_play_url();

        var url = $("#txt_url").val();
        var vcodec = {};
        var acodec = {};
        srs_publiser_get_codec(
                vcodec, acodec,
                "#sl_cameras", "#sl_microphones",
                "#sl_vcodec", "#sl_profile", "#sl_level", "#sl_gop", "#sl_size",
                "#sl_fps", "#sl_bitrate",
                "#sl_acodec"
        );

        info("开始推流到服务器");
        srs_publisher.publish(url, vcodec, acodec);

        if (!$("#cb_preview").is(":checked")) {
            return;
        }

        if (realtime_player) {
            // directly play the url for the realtime player.
            realtime_player.stop();
            realtime_player.play(url);
        }
    }
</script>
</html>