胡斌 / srs

转到一个项目
Toggle navigation Toggle navigation pinning
winlin
5636fc7c 1 parent 47e173bf

update ui, remove the collaps of local video.

内嵌 并排对比
正在显示 2 个修改的文件 包含 53 行增加 和 18 行删除
@@ -28,6 +28,10 @@ @@ -28,6 +28,10 @@
28 // url set to: rtmp://demo:1935/live/livestream 28 // url set to: rtmp://demo:1935/live/livestream
29 srs_init_publish("#txt_url"); 29 srs_init_publish("#txt_url");
30 30
  31 + $("#realtime_player_url").tooltip({
  32 + title: "右键复制RTMP地址"
  33 + });
  34 +
31 // if no play specified, donot show the player, for debug the publisher. 35 // if no play specified, donot show the player, for debug the publisher.
32 var query = parse_query_string(); 36 var query = parse_query_string();
33 if (query.no_play == "true") { 37 if (query.no_play == "true") {
@@ -63,6 +67,8 @@ @@ -63,6 +67,8 @@
63 }; 67 };
64 srs_publisher.start(); 68 srs_publisher.start();
65 69
  70 + update_play_url();
  71 +
66 if (!no_play) { 72 if (!no_play) {
67 // start the realtime player. 73 // start the realtime player.
68 realtime_player = new SrsPlayer("realtime_player", 430, 185); 74 realtime_player = new SrsPlayer("realtime_player", 430, 185);
@@ -77,6 +83,12 @@ @@ -77,6 +83,12 @@
77 refresh(); 83 refresh();
78 }); 84 });
79 85
  86 + function update_play_url() {
  87 + var url = $("#txt_url").val();
  88 +
  89 + $("#realtime_player_url").attr("href", url).attr("target", "_blank");
  90 + }
  91 +
80 function refresh() { 92 function refresh() {
81 if (!self_chat) { 93 if (!self_chat) {
82 setTimeout(refresh, 1000); 94 setTimeout(refresh, 1000);
@@ -200,8 +212,8 @@ @@ -200,8 +212,8 @@
200 $(obj).attr("chat_id", chat.id); 212 $(obj).attr("chat_id", chat.id);
201 $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id) 213 $(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)
202 $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat") 214 $(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")
203 - $(obj).find("#realtime_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)  
204 - $(obj).find("#realtime_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id) 215 + $(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)
  216 + $(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)
205 $(obj).find("#user_name").text(chat.username); 217 $(obj).find("#user_name").text(chat.username);
206 $(obj).find("#join_date").text(chat.join_date_str); 218 $(obj).find("#join_date").text(chat.join_date_str);
207 $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id); 219 $(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
@@ -456,11 +468,11 @@ @@ -456,11 +468,11 @@
456 <div class="span6"> 468 <div class="span6">
457 <div class="accordion-group"> 469 <div class="accordion-group">
458 <div class="accordion-heading"> 470 <div class="accordion-heading">
459 - <span class="accordion-toggle" data-toggle="collapse" href="#collapseN"> 471 + <span class="accordion-toggle">
460 <strong>[我的] 本地摄像头</strong> 472 <strong>[我的] 本地摄像头</strong>
461 </span> 473 </span>
462 </div> 474 </div>
463 - <div id="collapseM" class="accordion-body collapse in"> 475 + <div class="accordion-body collapse in">
464 <div class="accordion-inner"> 476 <div class="accordion-inner">
465 <div id="local_publisher"></div> 477 <div id="local_publisher"></div>
466 </div> 478 </div>
@@ -470,11 +482,14 @@ @@ -470,11 +482,14 @@
470 <div class="span6"> 482 <div class="span6">
471 <div class="accordion-group"> 483 <div class="accordion-group">
472 <div class="accordion-heading"> 484 <div class="accordion-heading">
473 - <span class="accordion-toggle" data-toggle="collapse" href="#collapseN"> 485 + <span class="accordion-toggle">
474 <strong>[我的] 远程服务器流</strong> 486 <strong>[我的] 远程服务器流</strong>
  487 + <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
  488 + 播放地址<img src="img/tooltip.png"/>
  489 + </a>
475 </span> 490 </span>
476 </div> 491 </div>
477 - <div id="collapseM" class="accordion-body collapse in"> 492 + <div class="accordion-body collapse in">
478 <div class="accordion-inner"> 493 <div class="accordion-inner">
479 <div id="realtime_player"></div> 494 <div id="realtime_player"></div>
480 </div> 495 </div>
@@ -498,8 +513,8 @@ @@ -498,8 +513,8 @@
498 <div class="span2"> 513 <div class="span2">
499 </div> 514 </div>
500 <div class="span8"> 515 <div class="span8">
501 - <div id="realtime_player">  
502 - <div id="realtime_player_raw"> 516 + <div id="chat_player">
  517 + <div id="chat_player_raw">
503 </div> 518 </div>
504 </div> 519 </div>
505 </div> 520 </div>
@@ -37,6 +37,12 @@ @@ -37,6 +37,12 @@
37 $("#low_latecy_tips").tooltip({ 37 $("#low_latecy_tips").tooltip({
38 title: "服务器不转码直接转发FLASH编码器的流，所以延迟比支持HLS的流要低很多" 38 title: "服务器不转码直接转发FLASH编码器的流，所以延迟比支持HLS的流要低很多"
39 }); 39 });
  40 + $("#realtime_player_url").tooltip({
  41 + title: "右键复制RTMP地址"
  42 + });
  43 + $("#remote_player_url").tooltip({
  44 + title: "右键复制RTMP地址"
  45 + });
40 46
41 $("#btn_publish").click(on_user_publish); 47 $("#btn_publish").click(on_user_publish);
42 48
@@ -61,6 +67,8 @@ @@ -61,6 +67,8 @@
61 }; 67 };
62 srs_publisher.start(); 68 srs_publisher.start();
63 69
  70 + update_play_url();
  71 +
64 // if no play specified, donot show the player, for debug the publisher. 72 // if no play specified, donot show the player, for debug the publisher.
65 var query = parse_query_string(); 73 var query = parse_query_string();
66 if (query.no_play != "true") { 74 if (query.no_play != "true") {
@@ -95,6 +103,10 @@ @@ -95,6 +103,10 @@
95 var ret = srs_parse_rtmp_url(url); 103 var ret = srs_parse_rtmp_url(url);
96 var query = parse_query_string(); 104 var query = parse_query_string();
97 105
  106 + var remote_url = "rtmp://" + ret.server + ":" + ret.port + "/" + ret.app + "...vhost..." + srs_get_player_publish_vhost(ret.vhost) + "/" + ret.stream;
  107 + $("#realtime_player_url").attr("href", url).attr("target", "_blank");
  108 + $("#remote_player_url").attr("href", remote_url).attr("target", "_blank");
  109 +
98 var srs_player_url = "http://" + query.host + query.dir + "/srs_player.html?"; 110 var srs_player_url = "http://" + query.host + query.dir + "/srs_player.html?";
99 srs_player_url += "vhost=" + srs_get_player_publish_vhost(ret.vhost) + "&port=" + ret.port + "&app=" + ret.app + "&stream=" + ret.stream; 111 srs_player_url += "vhost=" + srs_get_player_publish_vhost(ret.vhost) + "&port=" + ret.port + "&app=" + ret.app + "&stream=" + ret.stream;
100 srs_player_url += "&autostart=true"; 112 srs_player_url += "&autostart=true";
@@ -118,10 +130,12 @@ @@ -118,10 +130,12 @@
118 if ($("#btn_publish").text() == "停止发布") { 130 if ($("#btn_publish").text() == "停止发布") {
119 srs_publisher.stop(); 131 srs_publisher.stop();
120 $("#btn_publish").text("发布视频"); 132 $("#btn_publish").text("发布视频");
121 - $("#txt_play_realtime").text("RTMP低延时(请发布视频)").attr("href", "#").attr("target", "_self");  
122 - $("#txt_play_url").text("RTMP已转码(请发布视频)").attr("href", "#").attr("target", "_self");  
123 - $("#txt_play_hls").text("HLS-m3u8(请发布视频)").attr("href", "#").attr("target", "_self");  
124 - $("#txt_play_jwplayer").text("HLS-JWPlayer(请发布视频)").attr("href", "#").attr("target", "_self"); 133 + //$("#txt_play_realtime").text("RTMP低延时(请发布视频)").attr("href", "#").attr("target", "_self");
  134 + //$("#txt_play_realtime").attr("href", "#").attr("target", "_self");
  135 + //$("#txt_play_url").text("RTMP已转码(请发布视频)").attr("href", "#").attr("target", "_self");
  136 + //$("#remote_player_url").attr("href", "#").attr("target", "_self");
  137 + //$("#txt_play_hls").text("HLS-m3u8(请发布视频)").attr("href", "#").attr("target", "_self");
  138 + //$("#txt_play_jwplayer").text("HLS-JWPlayer(请发布视频)").attr("href", "#").attr("target", "_self");
125 return; 139 return;
126 } 140 }
127 141
@@ -339,11 +353,11 @@ @@ -339,11 +353,11 @@
339 <div class="span6"> 353 <div class="span6">
340 <div class="accordion-group"> 354 <div class="accordion-group">
341 <div class="accordion-heading"> 355 <div class="accordion-heading">
342 - <span class="accordion-toggle" data-toggle="collapse" href="#collapse1"> 356 + <span class="accordion-toggle">
343 <strong>本地摄像头</strong> 357 <strong>本地摄像头</strong>
344 </span> 358 </span>
345 </div> 359 </div>
346 - <div id="collapse1" class="accordion-body collapse in"> 360 + <div class="accordion-body collapse in">
347 <div class="accordion-inner"> 361 <div class="accordion-inner">
348 <div id="local_publisher"></div> 362 <div id="local_publisher"></div>
349 </div> 363 </div>
@@ -353,14 +367,17 @@ @@ -353,14 +367,17 @@
353 <div class="span6"> 367 <div class="span6">
354 <div class="accordion-group"> 368 <div class="accordion-group">
355 <div class="accordion-heading"> 369 <div class="accordion-heading">
356 - <span class="accordion-toggle" data-toggle="collapse" href="#collapse2"> 370 + <span class="accordion-toggle">
357 <strong>远程服务器</strong> 371 <strong>远程服务器</strong>
358 <a id="remote_tips" href="#" data-toggle="tooltip" data-placement="top" title=""> 372 <a id="remote_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
359 黑屏<img src="img/tooltip.png"/> 373 黑屏<img src="img/tooltip.png"/>
360 </a> 374 </a>
  375 + <a id="remote_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
  376 + 播放地址<img src="img/tooltip.png"/>
  377 + </a>
361 </span> 378 </span>
362 </div> 379 </div>
363 - <div id="collapse2" class="accordion-body collapse in"> 380 + <div class="accordion-body collapse in">
364 <div class="accordion-inner"> 381 <div class="accordion-inner">
365 <div id="remote_player"></div> 382 <div id="remote_player"></div>
366 </div> 383 </div>
@@ -374,14 +391,17 @@ @@ -374,14 +391,17 @@
374 <div class="span6"> 391 <div class="span6">
375 <div class="accordion-group"> 392 <div class="accordion-group">
376 <div class="accordion-heading"> 393 <div class="accordion-heading">
377 - <span class="accordion-toggle" data-toggle="collapse" href="#collapse3"> 394 + <span class="accordion-toggle">
378 <strong>远程服务器</strong> 395 <strong>远程服务器</strong>
379 <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title=""> 396 <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
380 低延时<img src="img/tooltip.png"/> 397 低延时<img src="img/tooltip.png"/>
381 </a> 398 </a>
  399 + <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
  400 + 播放地址<img src="img/tooltip.png"/>
  401 + </a>
382 </span> 402 </span>
383 </div> 403 </div>
384 - <div id="collapse3" class="accordion-body collapse in"> 404 + <div class="accordion-body collapse in">
385 <div class="accordion-inner"> 405 <div class="accordion-inner">
386 <div id="realtime_player"></div> 406 <div id="realtime_player"></div>
387 </div> 407 </div>