|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>SRS</title>
|
|
|
<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>
|
|
|
<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>
|
|
|
<style>
|
|
|
body{
|
|
|
padding-top: 55px;
|
|
|
}
|
|
|
</style>
|
|
|
<script type="text/javascript">
|
|
|
var srs_publisher = null;
|
|
|
var realtime_player = null;
|
|
|
var api_server = null;
|
|
|
var self_chat = null;
|
|
|
var global_chat_user_id = 200;
|
|
|
var previous_chats = [];
|
|
|
var no_play = false;
|
|
|
|
|
|
$(function(){
|
|
|
// 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_publish("#txt_url");
|
|
|
|
|
|
$("#realtime_player_url").tooltip({
|
|
|
title: "右键复制RTMP地址"
|
|
|
});
|
|
|
|
|
|
// if no play specified, donot show the player, for debug the publisher.
|
|
|
var query = parse_query_string();
|
|
|
if (query.no_play == "true") {
|
|
|
no_play = true;
|
|
|
}
|
|
|
|
|
|
$("#btn_video_settings").click(function(){
|
|
|
$("#video_modal").modal({show:true});
|
|
|
});
|
|
|
$("#btn_audio_settings").click(function(){
|
|
|
$("#audio_modal").modal({show:true});
|
|
|
});
|
|
|
$("#btn_join").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_chat_initialize_page(
|
|
|
cameras, microphones,
|
|
|
"#sl_cameras", "#sl_microphones",
|
|
|
"#sl_vcodec", "#sl_profile", "#sl_level", "#sl_gop", "#sl_size",
|
|
|
"#sl_fps", "#sl_bitrate"
|
|
|
);
|
|
|
};
|
|
|
srs_publisher.on_publisher_error = function(code, desc) {
|
|
|
error(code, desc);
|
|
|
};
|
|
|
srs_publisher.on_publisher_warn = function(code, desc) {
|
|
|
warn(code, desc);
|
|
|
};
|
|
|
srs_publisher.start();
|
|
|
|
|
|
update_play_url();
|
|
|
|
|
|
if (!no_play) {
|
|
|
// start the realtime player.
|
|
|
realtime_player = new SrsPlayer("realtime_player", 430, 185);
|
|
|
realtime_player.on_player_ready = function() {
|
|
|
this.set_bt(0.5);
|
|
|
};
|
|
|
realtime_player.start();
|
|
|
}
|
|
|
|
|
|
api_server = "http://" + query.hostname + ":" + srs_get_api_server_port() + "/api/v1/chats";
|
|
|
refresh();
|
|
|
});
|
|
|
|
|
|
function update_play_url() {
|
|
|
var url = $("#txt_url").val();
|
|
|
|
|
|
$("#realtime_player_url").attr("href", url).attr("target", "_blank");
|
|
|
}
|
|
|
|
|
|
function refresh() {
|
|
|
if (!self_chat) {
|
|
|
setTimeout(refresh, 1000);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
type : "GET",
|
|
|
async : true,
|
|
|
url : api_server,
|
|
|
contentType: "text/html",
|
|
|
data : "",
|
|
|
dataType : "json",
|
|
|
complete : function() {
|
|
|
},
|
|
|
error : function(ret) {
|
|
|
setTimeout(refresh, 5000);
|
|
|
warn(101, "查询会议室失败：" + JSON.stringify(ret));
|
|
|
},
|
|
|
success : function(ret) {
|
|
|
if(0 != ret["code"]) {
|
|
|
warn(102, "查询会议室失败: " + JSON.stringify(ret));
|
|
|
setTimeout(refresh, 5000);
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
var chats = ret["data"]["chats"];
|
|
|
var server_time = ret["now"];
|
|
|
|
|
|
on_get_chats(chats);
|
|
|
setTimeout(refresh, 5000);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
function on_get_chats(chats) {
|
|
|
if (!self_chat) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// get self, check self is valid?
|
|
|
var _self_chat = null;
|
|
|
for (var i = 0; i < chats.length; i++) {
|
|
|
var chat = chats[i];
|
|
|
if (self_chat && self_chat.id == chat.id) {
|
|
|
_self_chat = chat;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
// rejoin if invalid.
|
|
|
if (!_self_chat) {
|
|
|
on_user_exit_chat(function(){
|
|
|
on_user_join_chat(function(){
|
|
|
info("重新加入会议室成功");
|
|
|
});
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
render_chat_room(chats);
|
|
|
|
|
|
if (!self_chat) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// update self heartbeat.
|
|
|
var url = api_server + "/" + self_chat.id;
|
|
|
|
|
|
var chat = {};
|
|
|
chat.localtime = new Date().getTime();
|
|
|
|
|
|
// publish to api server to requires an id.
|
|
|
$.ajax({
|
|
|
type : "PUT",
|
|
|
async : true,
|
|
|
url : url,
|
|
|
contentType: "text/html",
|
|
|
data : JSON.stringify(chat),
|
|
|
dataType : "json",
|
|
|
complete : function() {
|
|
|
},
|
|
|
error : function(ret) {
|
|
|
warn(105, "更新会议室信息失败：" + JSON.stringify(ret));
|
|
|
},
|
|
|
success : function(ret) {
|
|
|
if(0 != ret["code"]) {
|
|
|
warn(106, "更新会议室信息失败：: " + JSON.stringify(ret));
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
function render_chat_room(chats) {
|
|
|
if (!self_chat) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// new added chat
|
|
|
for (var i = 0; i < chats.length; i++) {
|
|
|
var chat = chats[i];
|
|
|
// ignore the self.
|
|
|
if (self_chat && self_chat.id == chat.id) {
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
// if previous exists, ignore, only add new here.
|
|
|
var previous_chat = get_previous_chat_user(previous_chats, chat.id);
|
|
|
if (previous_chat) {
|
|
|
// update reference.
|
|
|
chat.player = previous_chat.player;
|
|
|
chat.player.private_object = chat;
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
global_chat_user_id++;
|
|
|
|
|
|
// username: a str indicates the user name.
|
|
|
// url: a str indicates the url of user stream.
|
|
|
// join_date: a str indicates the join timestamp in seconds.
|
|
|
// join_date_str: friendly formated time.
|
|
|
var obj = $("<div/>").html($("#template").html());
|
|
|
$(obj).attr("chat_id", chat.id);
|
|
|
$(obj).attr("id", "div_" + chat.id); // for specifed chat: $("#div_" + chat_id)
|
|
|
$(obj).attr("class", "div_chat"); // for all chats: $(".div_chat")
|
|
|
$(obj).find("#chat_player").attr("id", "rp_" + chat.id); // for specifed player: $("#rp_" + chat_id)
|
|
|
$(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("#join_date").text(chat.join_date_str);
|
|
|
$(obj).find("#collapseM").attr("id", "collapse_" + global_chat_user_id);
|
|
|
$(obj).find("#headerN").attr("href", "#collapse_" + global_chat_user_id);
|
|
|
|
|
|
$("#lst_chats").append(obj);
|
|
|
|
|
|
if (!no_play) {
|
|
|
// start the realtime player.
|
|
|
var _player = new SrsPlayer("rp_raw_" + chat.id, 600, 300, chat);
|
|
|
_player.on_player_ready = function() {
|
|
|
this.set_bt(0.5);
|
|
|
this.play();
|
|
|
this.set_fs("screen", 100);
|
|
|
};
|
|
|
_player.start(chat.url);
|
|
|
|
|
|
chat.player = _player;
|
|
|
} else {
|
|
|
chat.player = null;
|
|
|
}
|
|
|
|
|
|
$(obj).find("#collapse_main").on('hidden', function(){
|
|
|
var id = $(this).parent().attr("chat_id");
|
|
|
var chat = get_previous_chat_user(previous_chats, id);
|
|
|
if (!chat || !chat.player) {
|
|
|
return;
|
|
|
}
|
|
|
chat.player.stop();
|
|
|
});
|
|
|
$(obj).find("#collapse_main").on('shown', function(){
|
|
|
var id = $(this).parent().attr("chat_id");
|
|
|
var chat = get_previous_chat_user(previous_chats, id);
|
|
|
if (!chat || !chat.player) {
|
|
|
return;
|
|
|
}
|
|
|
chat.player.play();
|
|
|
chat.player.set_fs("screen", 100);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// removed chat
|
|
|
for (var i = 0; i < previous_chats.length; i++) {
|
|
|
var chat = previous_chats[i];
|
|
|
// ignore the self.
|
|
|
if (self_chat && self_chat.id == chat.id) {
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
var new_chat = get_previous_chat_user(chats, chat.id);
|
|
|
if (new_chat) {
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
if (chat.player) {
|
|
|
chat.player.stop();
|
|
|
}
|
|
|
$("#div_" + chat.id).remove();
|
|
|
}
|
|
|
|
|
|
previous_chats = chats;
|
|
|
}
|
|
|
function get_previous_chat_user(arr, id) {
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
|
var chat = arr[i];
|
|
|
if (id == chat.id) {
|
|
|
return chat;
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
}
|
|
|
|
|
|
function on_user_publish() {
|
|
|
if ($("#txt_name").val().trim() == "") {
|
|
|
$("#txt_name").focus().parent().parent().addClass("error");
|
|
|
warn(100, "请输入您的名字");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
$("#txt_name").parent().parent().removeClass("error");
|
|
|
|
|
|
// join chat.
|
|
|
if (!self_chat) {
|
|
|
on_user_join_chat();
|
|
|
} else {
|
|
|
on_user_exit_chat();
|
|
|
}
|
|
|
}
|
|
|
function on_user_exit_chat(complete_pfn) {
|
|
|
srs_publisher.stop();
|
|
|
$("#btn_join").text("加入会议");
|
|
|
|
|
|
if (realtime_player) {
|
|
|
realtime_player.stop();
|
|
|
}
|
|
|
|
|
|
if (!self_chat) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// removed chat
|
|
|
for (var i = 0; i < previous_chats.length; i++) {
|
|
|
var chat = previous_chats[i];
|
|
|
// ignore the self.
|
|
|
if (self_chat && self_chat.id == chat.id) {
|
|
|
continue;
|
|
|
}
|
|
|
|
|
|
if (chat.player) {
|
|
|
chat.player.stop();
|
|
|
}
|
|
|
$("#div_" + chat.id).remove();
|
|
|
}
|
|
|
previous_chats = [];
|
|
|
|
|
|
var url = api_server + "/" + self_chat.id;
|
|
|
// whatever, cleanup local chat.
|
|
|
self_chat = null;
|
|
|
|
|
|
$("#btn_join").attr("disabled", true);
|
|
|
|
|
|
// publish to api server to requires an id.
|
|
|
$.ajax({
|
|
|
type : "DELETE",
|
|
|
async : true,
|
|
|
url : url,
|
|
|
contentType: "text/html",
|
|
|
data : "",
|
|
|
dataType : "json",
|
|
|
complete : function() {
|
|
|
$("#btn_join").attr("disabled", false);
|
|
|
if (complete_pfn) {
|
|
|
complete_pfn();
|
|
|
}
|
|
|
},
|
|
|
error : function(ret) {
|
|
|
warn(103, "退出会议室失败");
|
|
|
},
|
|
|
success : function(ret) {
|
|
|
if(0 != ret["code"]) {
|
|
|
warn(104, "退出会议室失败");
|
|
|
return;
|
|
|
}
|
|
|
info("退出会议室成功");
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
function on_user_join_chat(complete_pfn) {
|
|
|
if (self_chat) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
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"
|
|
|
);
|
|
|
|
|
|
var chat = {};
|
|
|
chat.id = -1;
|
|
|
chat.username = $("#txt_name").val().trim();
|
|
|
chat.agent = navigator.userAgent;
|
|
|
chat.url = url;
|
|
|
chat.vcodec = vcodec;
|
|
|
chat.acodec = acodec;
|
|
|
|
|
|
$("#btn_join").attr("disabled", true);
|
|
|
|
|
|
// publish to api server to requires an id.
|
|
|
$.ajax({
|
|
|
type : "POST",
|
|
|
async : true,
|
|
|
url : api_server,
|
|
|
contentType: "text/html",
|
|
|
data : JSON.stringify(chat),
|
|
|
dataType : "json",
|
|
|
complete : function() {
|
|
|
$("#btn_join").attr("disabled", false);
|
|
|
if (complete_pfn) {
|
|
|
complete_pfn();
|
|
|
}
|
|
|
},
|
|
|
error : function(ret) {
|
|
|
warn(105, "创建会议室失败：" + JSON.stringify(ret));
|
|
|
},
|
|
|
success : function(ret) {
|
|
|
if(0 != ret["code"]) {
|
|
|
warn(106, "创建会议室失败: " + JSON.stringify(ret));
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
chat.id = ret["data"];
|
|
|
|
|
|
// success, start publish.
|
|
|
self_chat = chat;
|
|
|
|
|
|
$("#btn_join").text("退出会议");
|
|
|
|
|
|
info("开始推流到服务器。请戴耳机聊天，否则音箱的声音会进入麦克风");
|
|
|
srs_publisher.publish(url, vcodec, acodec);
|
|
|
|
|
|
if (realtime_player) {
|
|
|
// directly play the url for the realtime player.
|
|
|
realtime_player.stop();
|
|
|
realtime_player.play(url, 0);
|
|
|
realtime_player.set_fs("screen", 100);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="navbar navbar-fixed-top">
|
|
|
<div class="navbar-inner">
|
|
|
<div class="container">
|
|
|
<a class="brand" href="index.html">SRS</a>
|
|
|
<div class="nav-collapse collapse">
|
|
|
<ul class="nav">
|
|
|
<li><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
|
|
|
<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
|
|
|
<li class="active"><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
|
|
|
<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>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container">
|
|
|
<!-- for the log -->
|
|
|
<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">输入名字，设置编码参数后，加入会议室</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="control-group">
|
|
|
<div class="form-inline">
|
|
|
<input type="text" id="txt_name" class="input-small" placeholder="您的名字..." value=""></input>
|
|
|
<button class="btn input-medium" id="btn_video_settings">视频编码配置</button>
|
|
|
<button class="btn input-medium" id="btn_audio_settings">音频编码配置</button>
|
|
|
<button class="btn input-medium btn-primary" id="btn_join">加入会议</button>
|
|
|
<input type="text" id="txt_url" class="input-mini hide" value=""></input>
|
|
|
</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="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 class="container hide" id="template">
|
|
|
<div class="accordion-group" id="collapse_main">
|
|
|
<div class="accordion-heading" title="点击展开或收起，收起后停止播放流，展开时从服务器请求流">
|
|
|
<span id="headerN" class="accordion-toggle" data-toggle="collapse" href="#collapseN">
|
|
|
<strong>[<a href="#"><span id="user_name">XX</span></a>]</strong>
|
|
|
<strong>加入时间</strong>[<span id="join_date"></span>]
|
|
|
<img src="img/tooltip.png"/>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div id="collapseM" class="accordion-body collapse in">
|
|
|
<div class="accordion-inner">
|
|
|
<div class="row-fluid">
|
|
|
<div class="span2">
|
|
|
</div>
|
|
|
<div class="span8">
|
|
|
<div id="chat_player">
|
|
|
<div id="chat_player_raw">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="span2">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="container" id="lst_chats">
|
|
|
</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>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<hr/>
|
|
|
<footer>
|
|
|
<p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team © 2013</a></p>
|
|
|
</footer>
|
|
|
</div>
|
|
|
</body>
|
|
|
|