Blame view

trunk/research/players/srs_publisher.html 21.4 KB
1 2 3
<!DOCTYPE html>
<html>
<head>
winlin authored
4
    <title>SRS</title>   
5 6 7 8 9
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <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>
10
    <script type="text/javascript" src="js/json2.js"></script>
winlin authored
11
    <script type="text/javascript" src="js/srs.page.js"></script>
12
    <script type="text/javascript" src="js/srs.log.js"></script>
winlin authored
13 14 15
    <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>
16 17 18 19 20 21
    <style>
        body{
            padding-top: 55px;
        }
    </style>
    <script type="text/javascript">
winlin authored
22 23
        var srs_publisher = null;
        var remote_player = null;
winlin authored
24
        var realtime_player = null;
winlin authored
25
        
26
        var query = parse_query_string();
27
        $(function(){
winlin authored
28 29 30 31 32
            // get the vhost and port to set the default url.
            // for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
            // url set to: rtmp://demo:1935/live/livestream
            srs_init("#txt_url", null, null);
            
33 34 35 36 37
            if (query.agent == "true") {
                document.write(navigator.userAgent);
                return;
            }
            
winlin authored
38 39 40 41 42 43 44
            $("#btn_video_settings").click(function(){
                $("#video_modal").modal({show:true});
            });
            $("#btn_audio_settings").click(function(){
                $("#audio_modal").modal({show:true});
            });
            
winlin authored
45 46 47
            $("#remote_tips").tooltip({
                title: "为了支持HLS输出,FLASH编码器输出的流需要经过转码(VP6=>H264,MP3=>aac),所以会黑屏较长时间,请耐心等待"
            });
winlin authored
48 49 50
            $("#low_latecy_tips").tooltip({
                title: "服务器不转码直接转发FLASH编码器的流,所以延迟比支持HLS的流要低很多"
            });
51 52 53 54 55 56
            $("#realtime_player_url").tooltip({
                title: "右键复制RTMP地址"
            });
            $("#remote_player_url").tooltip({
                title: "右键复制RTMP地址"
            });
winlin authored
57
            
winlin authored
58 59
            $("#btn_publish").click(on_user_publish);
            
winlin authored
60 61
            // for publish, we use randome stream name.
            $("#txt_url").val($("#txt_url").val() + "." + new Date().getTime());
winlin authored
62 63 64 65
            
            // start the publisher.
            srs_publisher = new SrsPublisher("local_publisher", 430, 185);
            srs_publisher.on_publisher_ready = function(cameras, microphones) {
winlin authored
66 67 68 69
                srs_publisher_initialize_page(
                    cameras, microphones,
                    "#sl_cameras", "#sl_microphones", 
                    "#sl_vcodec", "#sl_profile", "#sl_level", "#sl_gop", "#sl_size",
winlin authored
70 71
                    "#sl_fps", "#sl_bitrate",
                    "#sl_acodec"
winlin authored
72
                );
winlin authored
73
            };
74
            srs_publisher.on_publisher_error = function(code, desc) {
75 76 77
                if (!on_publish_stop()) {
                    return;
                }
78
                error(code, desc + "请重试。");
winlin authored
79
            };
80 81
            srs_publisher.on_publisher_warn = function(code, desc) {
                warn(code, desc);
winlin authored
82
            };
83
            srs_publisher.start();
winlin authored
84
            
85 86
            update_play_url();
            
87 88 89 90 91
            // if no play specified, donot show the player, for debug the publisher.
            if (query.no_play != "true") {
                // start the normal player with HLS supported.
                remote_player = new SrsPlayer("remote_player", 430, 185);
                remote_player.on_player_ready = function() {
92
                    this.set_bt(0.8);
93
                };
winlin authored
94 95 96 97
                remote_player.on_player_metadata = function(metadata) {
                    this.set_dar(0, 0);
                    this.set_fs("screen", 100);
                }
98 99 100 101 102
                remote_player.start();
                
                // start the realtime player.
                realtime_player = new SrsPlayer("realtime_player", 430, 185);
                realtime_player.on_player_ready = function() {
103
                    this.set_bt(0.8);
104
                };
winlin authored
105 106 107 108
                realtime_player.on_player_metadata = function(metadata) {
                    this.set_dar(0, 0);
                    this.set_fs("screen", 100);
                }
109 110
                realtime_player.start();
            }
111
        });
winlin authored
112
        
113 114 115 116 117 118 119 120 121 122 123 124
        function on_publish_stop() {
            if (!srs_can_republish()) {
                $("#btn_join").attr("disabled", true);
                error(0, "您使用的浏览器很弱,请关闭页面后重新打开页面(刷新也不管用)。<br/>推荐使用Chrome/Firefox/Safari/Opera浏览器,支持重试");
                
                srs_log_disabled = true;
                return false;
            }
            
            return true;
        }
        
125 126 127 128 129 130 131 132
        /**
        * we generate the transcoded stream url for flash publish donot support HLS
        * which requires aac, so the publish vhost maybe players for example, we
        * use players_pub vhost(transcoded stream to which) for all clients,
        * both players and players_pub are write HLS to the sample dir, 
        * it's ok for the players vhost disabled the HLS, only the 
        * players_pub enalbed HLS.
        */
winlin authored
133
        function update_play_url() {
winlin authored
134 135
            var url = $("#txt_url").val();
            var ret = srs_parse_rtmp_url(url);
winlin authored
136
            
137 138 139 140
            var remote_url = "rtmp://" + ret.server + ":" + ret.port + "/" + ret.app + "...vhost..." + srs_get_player_publish_vhost(ret.vhost) + "/" + ret.stream;
            $("#realtime_player_url").attr("href", url).attr("target", "_blank");
            $("#remote_player_url").attr("href", remote_url).attr("target", "_blank");
            
141 142 143
            var srs_player_url = "http://" + query.host + query.dir + "/srs_player.html?";
            srs_player_url += "vhost=" + srs_get_player_publish_vhost(ret.vhost) + "&port=" + ret.port + "&app=" + ret.app + "&stream=" + ret.stream;
            srs_player_url += "&autostart=true";
winlin authored
144
            
winlin authored
145 146 147 148
            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";
            
149 150 151
            var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?";
            jwplayer_url += "vhost=" + srs_get_player_publish_vhost(ret.vhost) + "&port=" + ret.port + "&app=" + ret.app + "&stream=" + ret.stream;
            jwplayer_url += "&hls_autostart=true";
winlin authored
152
            
153
            var hls_url = "http://" + ret.server + ":" + query.http_port + "/" + ret.app + "/" + ret.stream + ".m3u8";
winlin authored
154
            
winlin authored
155
            $("#txt_play_realtime").text("RTMP低延时(点击打开)").attr("href", srs_player_rt_url).attr("target", "_blank");
winlin authored
156 157 158
            $("#txt_play_url").text("RTMP已转码(点击打开)").attr("href", srs_player_url).attr("target", "_blank");
            $("#txt_play_hls").text("HLS-m3u8(点击打开或右键复制)").attr("href", hls_url).attr("target", "_blank");
            $("#txt_play_jwplayer").text("HLS-JWPlayer(点击打开)").attr("href", jwplayer_url).attr("target", "_blank");
winlin authored
159 160 161 162 163
        }
        function on_user_publish() {
            if ($("#btn_publish").text() == "停止发布") {
                srs_publisher.stop();
                $("#btn_publish").text("发布视频");
164 165 166 167 168 169
                //$("#txt_play_realtime").text("RTMP低延时(请发布视频)").attr("href", "#").attr("target", "_self");
                //$("#txt_play_realtime").attr("href", "#").attr("target", "_self");
                //$("#txt_play_url").text("RTMP已转码(请发布视频)").attr("href", "#").attr("target", "_self");
                //$("#remote_player_url").attr("href", "#").attr("target", "_self");
                //$("#txt_play_hls").text("HLS-m3u8(请发布视频)").attr("href", "#").attr("target", "_self");
                //$("#txt_play_jwplayer").text("HLS-JWPlayer(请发布视频)").attr("href", "#").attr("target", "_self");
170 171 172 173
                
                if (!on_publish_stop()) {
                    return;
                }
winlin authored
174 175 176 177 178 179 180 181 182 183
                return;
            }
            
            $("#btn_publish").text("停止发布");
            
            update_play_url();
            
            var url = $("#txt_url").val();
            var vcodec = {};
            var acodec = {};
winlin authored
184 185 186 187
            srs_publiser_get_codec(
                vcodec, acodec,
                "#sl_cameras", "#sl_microphones", 
                "#sl_vcodec", "#sl_profile", "#sl_level", "#sl_gop", "#sl_size",
winlin authored
188 189
                "#sl_fps", "#sl_bitrate",
                "#sl_acodec"
winlin authored
190
            );
winlin authored
191 192 193 194
            
            info("开始推流到服务器");
            srs_publisher.publish(url, vcodec, acodec);
            
195 196 197 198 199
            if (realtime_player) {
                // directly play the url for the realtime player.
                realtime_player.stop();
                realtime_player.play(url);
            }
winlin authored
200
            
201 202 203 204 205 206 207 208 209 210 211
            if (remote_player) {
                // the normal player should play the transcoded stream in another vhost.
                // for example, publish stream to vhost players,
                // the realtime player play the vhost players, which may donot support HLS,
                // the normal player play the vhost players_pub, which transcoded to h264/aac with HLS.
                var ret = srs_parse_rtmp_url(url);
                var pub_url = "rtmp://" + ret.server + ":" + ret.port + "/" + ret.app;
                pub_url += "?vhost=" + srs_get_player_publish_vhost(ret.vhost) + "/" + ret.stream;
                remote_player.stop();
                remote_player.play(pub_url);
            }
winlin authored
212
        }
213 214 215 216 217 218
    </script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
219
            <a id="srs_index" class="brand" href="#">SRS</a>
220 221
            <div class="nav-collapse collapse">
                <ul class="nav">
winlin authored
222 223
                    <li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                    <li class="active"><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
224
                    <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
winlin authored
225 226 227 228
                    <li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>
                    <li><a id="nav_jwplayer6" href="jwplayer6.html">JWPlayer6播放器</a></li>
                    <li><a id="nav_osmf" href="osmf.html">AdobeOSMF播放器</a></li>
                    <li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li>
229 230 231 232 233
                </ul>
            </div>
        </div>
    </div>
</div>
winlin authored
234
<div class="container">
winlin authored
235 236 237
    <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>
238
        <span id="txt_log_msg">设置编码参数,点“发布视频”,允许Flash访问摄像头即可推流</span>
winlin authored
239 240 241 242 243 244 245 246 247 248 249
    </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>
250
            <button class="btn btn-primary" id="btn_publish">发布视频</button>
winlin authored
251 252 253 254
        </div>
    </div>
    <div class="control-group">
        <div class="form-inline">
winlin authored
255 256 257 258 259
            播放地址
            1.<a id="txt_play_realtime" class="input-xxlarge" href="#">RTMP低延时(请发布视频)</a>
            2.<a id="txt_play_url" class="input-xxlarge" href="#">RTMP已转码(请发布视频)</a>
            3.<a id="txt_play_hls" class="input-xxlarge" href="#">HLS-m3u8(请发布视频)</a>
            4.<a id="txt_play_jwplayer" class="input-xxlarge" href="#">HLS-JWPlayer(请发布视频)</a>
260 261
        </div>
    </div>
winlin authored
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380
    <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>
winlin authored
381 382 383 384 385 386 387 388 389 390 391
                <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>
winlin authored
392 393 394 395 396 397 398 399 400 401 402
            </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">
403
                        <span class="accordion-toggle">
winlin authored
404 405 406
                            <strong>本地摄像头</strong>
                        </span>
                    </div>
407
                    <div class="accordion-body collapse in">
winlin authored
408 409 410 411 412 413 414 415 416
                        <div class="accordion-inner">
                            <div id="local_publisher"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
                <div class="accordion-group">
                    <div class="accordion-heading">
417
                        <span class="accordion-toggle">
winlin authored
418
                            <strong>远程服务器</strong>
winlin authored
419 420 421
                            <a id="remote_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
                                黑屏<img src="img/tooltip.png"/>
                            </a>
422 423 424
                            <a id="remote_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
                                播放地址<img src="img/tooltip.png"/>
                            </a>
winlin authored
425 426
                        </span>
                    </div>
427
                    <div class="accordion-body collapse in">
winlin authored
428 429 430 431 432 433 434 435
                        <div class="accordion-inner">
                            <div id="remote_player"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
winlin authored
436 437 438 439 440
    <div class="container">
        <div class="row-fluid">
            <div class="span6">
                <div class="accordion-group">
                    <div class="accordion-heading">
441
                        <span class="accordion-toggle">
winlin authored
442 443 444 445
                            <strong>远程服务器</strong>
                            <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
                                低延时<img src="img/tooltip.png"/>
                            </a>
446 447 448
                            <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
                                播放地址<img src="img/tooltip.png"/>
                            </a>
winlin authored
449 450
                        </span>
                    </div>
451
                    <div class="accordion-body collapse in">
winlin authored
452 453 454 455 456 457 458 459 460 461
                        <div class="accordion-inner">
                            <div id="realtime_player"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span6">
            </div>
        </div>
    </div>
winlin authored
462
    <footer>
463
        <p><a href="https://github.com/simple-rtmp-server/srs">SRS Team &copy; 2013</a></p>
winlin authored
464 465
    </footer>
</div>
466 467
</body>