mirror of
https://github.com/ossrs/srs.git
synced 2025-03-09 15:49:59 +00:00
refine the ui of chat, to 5x3+1
This commit is contained in:
winlin
parent
5cec967931
commit
2e58de393a
7 changed files with 68 additions and 63 deletions
|
|
@ -251,7 +251,7 @@ function srs_initialize_codec_page(
|
|||
|
||||
$(sl_size).empty();
|
||||
var sizes = ["176x144", "320x240", "352x240",
|
||||
"352x288", "460x240", "640x480", "720x480", "720x576", "800x600",
|
||||
"352x288", "480x360", "640x480", "720x480", "720x576", "800x600",
|
||||
"1024x768", "1280x720", "1360x768", "1920x1080"];
|
||||
for (i = 0; i < sizes.length; i++) {
|
||||
$(sl_size).append("<option value='" + sizes[i] + "'>" + sizes[i] + "</option");
|
||||
|
|
@ -294,7 +294,7 @@ function srs_publisher_initialize_page(
|
|||
$(sl_gop + " option[value='10']").attr("selected", true);
|
||||
|
||||
//var sizes = ["176x144", "320x240", "352x240",
|
||||
// "352x288", "460x240", "640x480", "720x480", "720x576", "800x600",
|
||||
// "352x288", "480x360", "640x480", "720x480", "720x576", "800x600",
|
||||
// "1024x768", "1280x720", "1360x768", "1920x1080"];
|
||||
$(sl_size + " option[value='640x480']").attr("selected", true);
|
||||
|
||||
|
|
@ -322,16 +322,16 @@ function srs_chat_initialize_page(
|
|||
|
||||
//var levels = ["1", "1b", "1.1", "1.2", "1.3",
|
||||
// "2", "2.1", "2.2", "3", "3.1", "3.2", "4", "4.1", "4.2", "5", "5.1"];
|
||||
$(sl_level + " option[value='2.1']").attr("selected", true);
|
||||
$(sl_level + " option[value='3.1']").attr("selected", true);
|
||||
|
||||
//var gops = ["0.3", "0.5", "1", "2", "3", "4",
|
||||
// "5", "6", "7", "8", "9", "10", "15", "20"];
|
||||
$(sl_gop + " option[value='1']").attr("selected", true);
|
||||
$(sl_gop + " option[value='2']").attr("selected", true);
|
||||
|
||||
//var sizes = ["176x144", "320x240", "352x240",
|
||||
// "352x288", "460x240", "640x480", "720x480", "720x576", "800x600",
|
||||
// "352x288", "480x360", "640x480", "720x480", "720x576", "800x600",
|
||||
// "1024x768", "1280x720", "1360x768", "1920x1080"];
|
||||
$(sl_size + " option[value='640x480']").attr("selected", true);
|
||||
$(sl_size + " option[value='480x360']").attr("selected", true);
|
||||
|
||||
//var fpses = ["5", "10", "15", "20", "24", "25", "29.97", "30"];
|
||||
$(sl_fps + " option[value='15']").attr("selected", true);
|
||||
|
|
|
|||
|
|
@ -113,13 +113,13 @@ SrsPlayer.prototype.resume = function() {
|
|||
this.callbackObj.ref.__resume();
|
||||
}
|
||||
/**
|
||||
* to set the DAR, for example, DAR=16:9
|
||||
* @param num, for example, 9.
|
||||
* use metadata height if 0.
|
||||
* use user specified height if -1.
|
||||
* @param den, for example, 16.
|
||||
* to set the DAR, for example, DAR=16:9 where num=16,den=9.
|
||||
* @param num, for example, 16.
|
||||
* use metadata width if 0.
|
||||
* use user specified width if -1.
|
||||
* @param den, for example, 9.
|
||||
* use metadata height if 0.
|
||||
* use user specified height if -1.
|
||||
*/
|
||||
SrsPlayer.prototype.set_dar = function(num, den) {
|
||||
this.callbackObj.ref.__set_dar(num, den);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
body{
|
||||
padding-top: 55px;
|
||||
}
|
||||
.accordion-group {
|
||||
width: 310px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var srs_publisher = null;
|
||||
|
|
@ -34,6 +37,19 @@
|
|||
// url set to: rtmp://demo:1935/live/livestream
|
||||
srs_init_publish("#txt_url");
|
||||
|
||||
// support 5x3+1 users
|
||||
for (var i = 0; i < 5; i++) {
|
||||
var tr = $("<tr></tr>").hide();
|
||||
$("#lst_chats").append(tr);
|
||||
|
||||
for (var j = 0; j < 3; j++) {
|
||||
tr.append($("<td></td>").attr("id", "td_" + ((i+1) * 8 + j)));
|
||||
}
|
||||
}
|
||||
// remove border of row.
|
||||
$("#lst_chats").find("td").css("border", "none").css("padding", "2px")
|
||||
.css("padding-left", "0px").css("width", "327px");
|
||||
|
||||
if (query.agent == "true") {
|
||||
document.write(navigator.userAgent);
|
||||
return;
|
||||
|
|
@ -60,7 +76,7 @@
|
|||
$("#txt_url").val($("#txt_url").val() + "." + new Date().getTime());
|
||||
|
||||
// start the publisher.
|
||||
srs_publisher = new SrsPublisher("local_publisher", 430, 185);
|
||||
srs_publisher = new SrsPublisher("local_publisher", 280, 180);
|
||||
srs_publisher.on_publisher_ready = function(cameras, microphones) {
|
||||
srs_chat_initialize_page(
|
||||
cameras, microphones,
|
||||
|
|
@ -85,7 +101,7 @@
|
|||
|
||||
if (!no_play) {
|
||||
// start the realtime player.
|
||||
realtime_player = new SrsPlayer("realtime_player", 430, 185);
|
||||
realtime_player = new SrsPlayer("realtime_player", 280, 180);
|
||||
realtime_player.on_player_ready = function() {
|
||||
this.set_bt(0.5);
|
||||
};
|
||||
|
|
@ -98,18 +114,6 @@
|
|||
realtime_player.start();
|
||||
}
|
||||
|
||||
// 2x8 users
|
||||
for (var i = 0; i < 8; i++) {
|
||||
var tr = $("<tr></tr>").hide();
|
||||
$("#lst_chats").append(tr);
|
||||
|
||||
for (var j = 0; j < 2; j++) {
|
||||
tr.append($("<td></td>").attr("id", "td_" + (i * 8 + j)));
|
||||
}
|
||||
}
|
||||
// remove border of row.
|
||||
$("#lst_chats").find("td").css("border", "none");
|
||||
|
||||
$("#txt_name").focus();
|
||||
|
||||
api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats";
|
||||
|
|
@ -321,7 +325,7 @@
|
|||
$(obj).find("#chat_player_raw").attr("id", "rp_raw_" + chat.id); // for specifed player: $("#rp_raw_" + chat_id)
|
||||
$(obj).find("#user_name").text(chat.username);
|
||||
$(obj).find("#user_player_url").attr("href", chat.url);
|
||||
$(obj).find("#join_date").text(chat.join_date_str);
|
||||
$(obj).find("#join_date").text(chat.join_date_str.split(" ")[1]);
|
||||
$(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
|
||||
$(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
|
||||
}
|
||||
|
|
@ -352,7 +356,7 @@
|
|||
|
||||
if (!no_play) {
|
||||
// start the realtime player.
|
||||
var _player = new SrsPlayer("rp_raw_" + chat.id, 430, 185, chat);
|
||||
var _player = new SrsPlayer("rp_raw_" + chat.id, 240, 180, chat);
|
||||
_player.on_player_ready = function() {
|
||||
this.set_bt(0.5);
|
||||
this.play();
|
||||
|
|
@ -580,7 +584,7 @@
|
|||
</div>
|
||||
<table id="lst_chats" class="table">
|
||||
<tr>
|
||||
<td>
|
||||
<td id="td_0">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<span class="accordion-toggle">
|
||||
|
|
@ -594,7 +598,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<td id="td_1">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<span class="accordion-toggle">
|
||||
|
|
@ -611,6 +615,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td id="td_2"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="container hide" id="template">
|
||||
|
|
|
|||
|
|
@ -196,13 +196,13 @@
|
|||
select_dar("#btn_dar_original", 0, 0);
|
||||
});
|
||||
$("#btn_dar_21_9").click(function(){
|
||||
select_dar("#btn_dar_21_9", 9, 21);
|
||||
select_dar("#btn_dar_21_9", 21, 9);
|
||||
});
|
||||
$("#btn_dar_16_9").click(function(){
|
||||
select_dar("#btn_dar_16_9", 9, 16);
|
||||
select_dar("#btn_dar_16_9", 16, 9);
|
||||
});
|
||||
$("#btn_dar_4_3").click(function(){
|
||||
select_dar("#btn_dar_4_3", 3, 4);
|
||||
select_dar("#btn_dar_4_3", 4, 3);
|
||||
});
|
||||
$("#btn_dar_fill").click(function(){
|
||||
select_dar("#btn_dar_fill", -1, -1);
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -37,8 +37,8 @@ package
|
|||
private var user_w:int = 0;
|
||||
private var user_h:int = 0;
|
||||
// user set dar den:num
|
||||
private var user_dar_num:int = 0;
|
||||
private var user_dar_den:int = 0;
|
||||
private var user_dar_num:int = 0;
|
||||
// user set fs(fullscreen) refer and percent.
|
||||
private var user_fs_refer:String = null;
|
||||
private var user_fs_percent:int = 0;
|
||||
|
|
@ -221,13 +221,13 @@ package
|
|||
}
|
||||
|
||||
/**
|
||||
* to set the DAR, for example, DAR=16:9
|
||||
* @param num, for example, 9.
|
||||
* use metadata height if 0.
|
||||
* use user specified height if -1.
|
||||
* @param den, for example, 16.
|
||||
* use metadata width if 0.
|
||||
* use user specified width if -1.
|
||||
* to set the DAR, for example, DAR=16:9 where num=16,den=9.
|
||||
* @param num, for example, 16.
|
||||
* use metadata width if 0.
|
||||
* use user specified width if -1.
|
||||
* @param den, for example, 9.
|
||||
* use metadata height if 0.
|
||||
* use user specified height if -1.
|
||||
*/
|
||||
private function js_call_set_dar(num:int, den:int):void {
|
||||
user_dar_num = num;
|
||||
|
|
@ -402,21 +402,21 @@ package
|
|||
var obj:Object = __get_video_size_object();
|
||||
|
||||
// get the DAR
|
||||
var num:int = user_dar_num;
|
||||
var den:int = user_dar_den;
|
||||
|
||||
if (num == 0) {
|
||||
num = obj.height;
|
||||
}
|
||||
if (num == -1) {
|
||||
num = this.stage.fullScreenHeight;
|
||||
}
|
||||
var num:int = user_dar_num;
|
||||
|
||||
if (den == 0) {
|
||||
den = obj.width;
|
||||
den = obj.height;
|
||||
}
|
||||
if (den == -1) {
|
||||
den = this.stage.fullScreenWidth;
|
||||
den = this.stage.fullScreenHeight;
|
||||
}
|
||||
|
||||
if (num == 0) {
|
||||
num = obj.width;
|
||||
}
|
||||
if (num == -1) {
|
||||
num = this.stage.fullScreenWidth;
|
||||
}
|
||||
|
||||
// for refer is screen.
|
||||
|
|
@ -436,23 +436,23 @@ package
|
|||
*/
|
||||
private function __execute_user_set_dar():void {
|
||||
// get the DAR
|
||||
var num:int = user_dar_num;
|
||||
var den:int = user_dar_den;
|
||||
var num:int = user_dar_num;
|
||||
|
||||
var obj:Object = __get_video_size_object();
|
||||
|
||||
if (num == 0) {
|
||||
num = obj.height;
|
||||
}
|
||||
if (num == -1) {
|
||||
num = this.user_h;
|
||||
}
|
||||
|
||||
if (den == 0) {
|
||||
den = obj.width;
|
||||
den = obj.height;
|
||||
}
|
||||
if (den == -1) {
|
||||
den = this.user_w;
|
||||
den = this.user_h;
|
||||
}
|
||||
|
||||
if (num == 0) {
|
||||
num = obj.width;
|
||||
}
|
||||
if (num == -1) {
|
||||
num = this.user_w;
|
||||
}
|
||||
|
||||
__update_video_size(num, den, this.user_w, this.user_h, this.user_w, this.user_h);
|
||||
|
|
@ -468,19 +468,19 @@ package
|
|||
* @param _sw/_wh the stage size, >= paper size. used to center the player.
|
||||
*/
|
||||
private function __update_video_size(_num:int, _den:int, _w:int, _h:int, _sw:int, _sh:int):void {
|
||||
if (!this.media_video || _num <= 0 || _den <= 0) {
|
||||
if (!this.media_video || _den <= 0 || _num <= 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// set DAR.
|
||||
// calc the height by DAR
|
||||
var _height:int = _w * _num / _den;
|
||||
var _height:int = _w * _den / _num;
|
||||
if (_height <= _h) {
|
||||
this.media_video.width = _w;
|
||||
this.media_video.height = _height;
|
||||
} else {
|
||||
// height overflow, calc the width by DAR
|
||||
var _width:int = _h * _den / _num;
|
||||
var _width:int = _h * _num / _den;
|
||||
|
||||
this.media_video.width = _width;
|
||||
this.media_video.height = _h;
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue