mirror of
https://github.com/ossrs/srs.git
synced 2025-03-09 15:49:59 +00:00
refine the demo pages, move scripts after body.
This commit is contained in:
winlin
parent
575a698820
commit
018af55d65
15 changed files with 1756 additions and 1313 deletions
|
|
@ -6,6 +6,7 @@
|
||||||
<script type="text/javascript" src="players/js/jquery-1.10.2.min.js"></script>
|
<script type="text/javascript" src="players/js/jquery-1.10.2.min.js"></script>
|
||||||
<script type="text/javascript" src="players/js/srs.page.js"></script>
|
<script type="text/javascript" src="players/js/srs.page.js"></script>
|
||||||
<script type="text/javascript" src="players/js/srs.utility.js"></script>
|
<script type="text/javascript" src="players/js/srs.utility.js"></script>
|
||||||
|
<script type="text/javascript" src="players/js/winlin.utility.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
|
||||||
|
|
@ -4,35 +4,11 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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.utility.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
$(function(){
|
|
||||||
update_nav();
|
|
||||||
|
|
||||||
var query = parse_query_string();
|
|
||||||
var url = "srs_chat.html?vhost=" + srs_get_player_vhost();
|
|
||||||
|
|
||||||
for (var key in query.user_query) {
|
|
||||||
if (key == "vhost") {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
url += "&" + key + "=" + query[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function(){
|
|
||||||
window.location.href = url;
|
|
||||||
}, 100);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -59,5 +35,30 @@
|
||||||
<p><a href="https://github.com/simple-rtmp-server/srs">SRS Team © 2013</a></p>
|
<p><a href="https://github.com/simple-rtmp-server/srs">SRS Team © 2013</a></p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
<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.utility.js"></script>
|
||||||
|
<script type="text/javascript" src="js/winlin.utility.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
update_nav();
|
||||||
|
|
||||||
|
var query = parse_query_string();
|
||||||
|
var url = "srs_chat.html?vhost=" + srs_get_player_vhost();
|
||||||
|
|
||||||
|
for (var key in query.user_query) {
|
||||||
|
if (key == "vhost") {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
url += "&" + key + "=" + query[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
window.location.href = url;
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
//////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
// to query the swf anti cache.
|
// to query the swf anti cache.
|
||||||
function srs_get_version_code() { return "1.23"; }
|
function srs_get_version_code() { return "1.25"; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* player specified size.
|
* player specified size.
|
||||||
|
|
@ -135,6 +135,12 @@ function build_default_hls_url() {
|
||||||
* @param hls_url the div id contains the hls stream url to play
|
* @param hls_url the div id contains the hls stream url to play
|
||||||
* @param modal_player the div id contains the modal player
|
* @param modal_player the div id contains the modal player
|
||||||
*/
|
*/
|
||||||
|
function srs_init_rtmp(rtmp_url, modal_player) {
|
||||||
|
srs_init(rtmp_url, null, modal_player);
|
||||||
|
}
|
||||||
|
function srs_init_hls(hls_url, modal_player) {
|
||||||
|
srs_init(null, hls_url, modal_player);
|
||||||
|
}
|
||||||
function srs_init(rtmp_url, hls_url, modal_player) {
|
function srs_init(rtmp_url, hls_url, modal_player) {
|
||||||
update_nav();
|
update_nav();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,154 +1,8 @@
|
||||||
/**
|
|
||||||
* padding the output.
|
|
||||||
* padding(3, 5, '0') is 00003
|
|
||||||
* padding(3, 5, 'x') is xxxx3
|
|
||||||
* @see http://blog.csdn.net/win_lin/article/details/12065413
|
|
||||||
*/
|
|
||||||
function padding(number, length, prefix) {
|
|
||||||
if(String(number).length >= length){
|
|
||||||
return String(number);
|
|
||||||
}
|
|
||||||
return padding(prefix+number, length, prefix);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* parse the query string to object.
|
|
||||||
* parse the url location object as: host(hostname:http_port), pathname(dir/filename)
|
|
||||||
* for example, url http://192.168.1.168:1980/ui/players.html?vhost=player.vhost.com&app=test&stream=livestream
|
|
||||||
* parsed to object:
|
|
||||||
{
|
|
||||||
host : "192.168.1.168:1980",
|
|
||||||
hostname : "192.168.1.168",
|
|
||||||
http_port : 1980,
|
|
||||||
pathname : "/ui/players.html",
|
|
||||||
dir : "/ui",
|
|
||||||
filename : "/players.html",
|
|
||||||
|
|
||||||
vhost : "player.vhost.com",
|
|
||||||
app : "test",
|
|
||||||
stream : "livestream"
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
function parse_query_string(){
|
|
||||||
var obj = {};
|
|
||||||
|
|
||||||
// add the uri object.
|
|
||||||
// parse the host(hostname:http_port), pathname(dir/filename)
|
|
||||||
obj.host = window.location.host;
|
|
||||||
obj.hostname = window.location.hostname;
|
|
||||||
obj.http_port = (window.location.port == "")? 80:window.location.port;
|
|
||||||
obj.pathname = window.location.pathname;
|
|
||||||
if (obj.pathname.lastIndexOf("/") <= 0) {
|
|
||||||
obj.dir = "/";
|
|
||||||
obj.filename = "";
|
|
||||||
} else {
|
|
||||||
obj.dir = obj.pathname.substr(0, obj.pathname.lastIndexOf("/"));
|
|
||||||
obj.filename = obj.pathname.substr(obj.pathname.lastIndexOf("/"));
|
|
||||||
}
|
|
||||||
|
|
||||||
// pure user query object.
|
|
||||||
obj.user_query = {};
|
|
||||||
|
|
||||||
// parse the query string.
|
|
||||||
var query_string = String(window.location.search).replace(" ", "").split("?")[1];
|
|
||||||
if(query_string == undefined){
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
var queries = query_string.split("&");
|
|
||||||
$(queries).each(function(){
|
|
||||||
var query = this.split("=");
|
|
||||||
obj[query[0]] = query[1];
|
|
||||||
obj.user_query[query[0]] = query[1];
|
|
||||||
});
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* parse the rtmp url,
|
* parse the rtmp url,
|
||||||
* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
||||||
* @return object {server, port, vhost, app, stream}
|
* @return object {server, port, vhost, app, stream}
|
||||||
*/
|
*/
|
||||||
function srs_parse_rtmp_url(rtmp_url) {
|
function srs_parse_rtmp_url(rtmp_url) {
|
||||||
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
|
return parse_rtmp_url(rtmp_url);
|
||||||
var a = document.createElement("a");
|
|
||||||
a.href = rtmp_url.replace("rtmp://", "http://");
|
|
||||||
|
|
||||||
var vhost = a.hostname;
|
|
||||||
var port = (a.port == "")? "1935":a.port;
|
|
||||||
var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
|
|
||||||
var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
|
|
||||||
|
|
||||||
// parse the vhost in the params of app, that srs supports.
|
|
||||||
app = app.replace("...vhost...", "?vhost=");
|
|
||||||
if (app.indexOf("?") >= 0) {
|
|
||||||
var params = app.substr(app.indexOf("?"));
|
|
||||||
app = app.substr(0, app.indexOf("?"));
|
|
||||||
|
|
||||||
if (params.indexOf("vhost=") > 0) {
|
|
||||||
vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
|
|
||||||
if (vhost.indexOf("&") > 0) {
|
|
||||||
vhost = vhost.substr(0, vhost.indexOf("&"));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var ret = {
|
|
||||||
server: a.hostname, port: port,
|
|
||||||
vhost: vhost, app: app, stream: stream
|
|
||||||
};
|
|
||||||
|
|
||||||
return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* get the agent.
|
|
||||||
* @return an object specifies some browser.
|
|
||||||
* for example, get_browser_agents().MSIE
|
|
||||||
*/
|
|
||||||
function get_browser_agents() {
|
|
||||||
var agent = navigator.userAgent;
|
|
||||||
|
|
||||||
/**
|
|
||||||
WindowsPC platform, Win7:
|
|
||||||
chrome 31.0.1650.63:
|
|
||||||
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
|
||||||
(KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
|
|
||||||
firefox 23.0.1:
|
|
||||||
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101
|
|
||||||
Firefox/23.0
|
|
||||||
safari 5.1.7(7534.57.2):
|
|
||||||
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2
|
|
||||||
(KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
|
|
||||||
opera 15.0.1147.153:
|
|
||||||
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
|
||||||
(KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
|
|
||||||
OPR/15.0.1147.153
|
|
||||||
360 6.2.1.272:
|
|
||||||
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
|
||||||
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
|
||||||
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
|
||||||
.NET4.0E)
|
|
||||||
IE 10.0.9200.16750(update: 10.0.12):
|
|
||||||
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
|
||||||
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
|
||||||
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
|
||||||
.NET4.0E)
|
|
||||||
*/
|
|
||||||
|
|
||||||
return {
|
|
||||||
// platform
|
|
||||||
Android: agent.indexOf("Android") != -1,
|
|
||||||
Windows: agent.indexOf("Windows") != -1,
|
|
||||||
iPhone: agent.indexOf("iPhone") != -1,
|
|
||||||
// Windows Browsers
|
|
||||||
Chrome: agent.indexOf("Chrome") != -1,
|
|
||||||
Firefox: agent.indexOf("Firefox") != -1,
|
|
||||||
QQBrowser: agent.indexOf("QQBrowser") != -1,
|
|
||||||
MSIE: agent.indexOf("MSIE") != -1,
|
|
||||||
// Android Browsers
|
|
||||||
Opera: agent.indexOf("Presto") != -1,
|
|
||||||
MQQBrowser: agent.indexOf("MQQBrowser") != -1
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
562
trunk/research/players/js/winlin.utility.js
Normal file
562
trunk/research/players/js/winlin.utility.js
Normal file
|
|
@ -0,0 +1,562 @@
|
||||||
|
// winlin.utility.js
|
||||||
|
|
||||||
|
/**
|
||||||
|
* common utilities
|
||||||
|
* depends: jquery1.10
|
||||||
|
* https://code.csdn.net/snippets/147103
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* v 1.0.10
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* padding the output.
|
||||||
|
* padding(3, 5, '0') is 00003
|
||||||
|
* padding(3, 5, 'x') is xxxx3
|
||||||
|
* @see http://blog.csdn.net/win_lin/article/details/12065413
|
||||||
|
*/
|
||||||
|
function padding(number, length, prefix) {
|
||||||
|
if(String(number).length >= length){
|
||||||
|
return String(number);
|
||||||
|
}
|
||||||
|
return padding(prefix+number, length, prefix);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* extends system array, to remove all specified elem.
|
||||||
|
* @param arr the array to remove elem from.
|
||||||
|
* @param elem the elem to remove.
|
||||||
|
* @remark all elem will be removed.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_remove(arr, 10) // arr=[15, 20, 30, 20, 40]
|
||||||
|
* system_array_remove(arr, 20) // arr=[15, 30, 40]
|
||||||
|
*/
|
||||||
|
function system_array_remove(arr, elem) {
|
||||||
|
if (!arr) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var removed = true;
|
||||||
|
var i = 0;
|
||||||
|
while (removed) {
|
||||||
|
removed = false;
|
||||||
|
for (; i < arr.length; i++) {
|
||||||
|
if (elem == arr[i]) {
|
||||||
|
arr.splice(i, 1);
|
||||||
|
removed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the array contains specified element.
|
||||||
|
* @param arr the array to find.
|
||||||
|
* @param elem_or_function the element value or compare function.
|
||||||
|
* @returns true contains elem; otherwise false.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_contains(arr, 10) // true
|
||||||
|
* system_array_contains(arr, 11) // false
|
||||||
|
* system_array_contains(arr, function(elem){return elem == 30;}); // true
|
||||||
|
* system_array_contains(arr, function(elem){return elem == 60;}); // false
|
||||||
|
*/
|
||||||
|
function system_array_contains(arr, elem_or_function) {
|
||||||
|
return system_array_get(arr, elem_or_function) != null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get the specified element from array
|
||||||
|
* @param arr the array to find.
|
||||||
|
* @param elem_or_function the element value or compare function.
|
||||||
|
* @returns the matched elem; otherwise null.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_get(arr, 10) // 10
|
||||||
|
* system_array_get(arr, 11) // null
|
||||||
|
* system_array_get(arr, function(elem){return elem == 30;}); // 30
|
||||||
|
* system_array_get(arr, function(elem){return elem == 60;}); // null
|
||||||
|
*/
|
||||||
|
function system_array_get(arr, elem_or_function) {
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (typeof elem_or_function == "function") {
|
||||||
|
if (elem_or_function(arr[i])) {
|
||||||
|
return arr[i];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (elem_or_function == arr[i]) {
|
||||||
|
return arr[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* to iterate on array.
|
||||||
|
* @param arr the array to iterate on.
|
||||||
|
* @param pfn the function to apply on it
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_foreach(arr, function(elem, index){
|
||||||
|
* console.log('index=' + index + ',elem=' + elem);
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
function system_array_foreach(arr, pfn) {
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (pfn) {
|
||||||
|
pfn(arr[i], i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* array sort asc, for example:
|
||||||
|
* [a, b] in [10, 11, 9]
|
||||||
|
* then sort to: [9, 10, 11]
|
||||||
|
* Usage, for example:
|
||||||
|
obj.data.data.sort(function(a, b){
|
||||||
|
return array_sort_asc(a.metadata.meta_id, b.metadata.meta_id);
|
||||||
|
});
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @remark, if need desc, use -1*array_sort_asc(a,b)
|
||||||
|
*/
|
||||||
|
function array_sort_asc(elem_a, elem_b) {
|
||||||
|
if (elem_a > elem_b) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return (elem_a < elem_b)? -1 : 0;
|
||||||
|
}
|
||||||
|
function array_sort_desc(elem_a, elem_b) {
|
||||||
|
return -1 * array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
function system_array_sort_asc(elem_a, elem_b) {
|
||||||
|
return array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
function system_array_sort_desc(elem_a, elem_b) {
|
||||||
|
return -1 * array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the query string to object.
|
||||||
|
* parse the url location object as: host(hostname:http_port), pathname(dir/filename)
|
||||||
|
* for example, url http://192.168.1.168:1980/ui/players.html?vhost=player.vhost.com&app=test&stream=livestream
|
||||||
|
* parsed to object:
|
||||||
|
{
|
||||||
|
host : "192.168.1.168:1980",
|
||||||
|
hostname : "192.168.1.168",
|
||||||
|
http_port : 1980,
|
||||||
|
pathname : "/ui/players.html",
|
||||||
|
dir : "/ui",
|
||||||
|
filename : "/players.html",
|
||||||
|
|
||||||
|
vhost : "player.vhost.com",
|
||||||
|
app : "test",
|
||||||
|
stream : "livestream"
|
||||||
|
}
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
*/
|
||||||
|
function parse_query_string(){
|
||||||
|
var obj = {};
|
||||||
|
|
||||||
|
// add the uri object.
|
||||||
|
// parse the host(hostname:http_port), pathname(dir/filename)
|
||||||
|
obj.host = window.location.host;
|
||||||
|
obj.hostname = window.location.hostname;
|
||||||
|
obj.http_port = (window.location.port == "")? 80:window.location.port;
|
||||||
|
obj.pathname = window.location.pathname;
|
||||||
|
if (obj.pathname.lastIndexOf("/") <= 0) {
|
||||||
|
obj.dir = "/";
|
||||||
|
obj.filename = "";
|
||||||
|
} else {
|
||||||
|
obj.dir = obj.pathname.substr(0, obj.pathname.lastIndexOf("/"));
|
||||||
|
obj.filename = obj.pathname.substr(obj.pathname.lastIndexOf("/"));
|
||||||
|
}
|
||||||
|
|
||||||
|
// pure user query object.
|
||||||
|
obj.user_query = {};
|
||||||
|
|
||||||
|
// parse the query string.
|
||||||
|
var query_string = String(window.location.search).replace(" ", "").split("?")[1];
|
||||||
|
if(query_string == undefined){
|
||||||
|
query_string = String(window.location.hash).replace(" ", "").split("#")[1];
|
||||||
|
if(query_string == undefined){
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var queries = query_string.split("&");
|
||||||
|
$(queries).each(function(){
|
||||||
|
var query = this.split("=");
|
||||||
|
obj[query[0]] = query[1];
|
||||||
|
obj.user_query[query[0]] = query[1];
|
||||||
|
});
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the rtmp url,
|
||||||
|
* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
||||||
|
* @return object {server, port, vhost, app, stream}
|
||||||
|
* for exmaple, rtmp_url is rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
||||||
|
* parsed to object:
|
||||||
|
{
|
||||||
|
server: "demo.srs.com",
|
||||||
|
port: 1935,
|
||||||
|
vhost: "players",
|
||||||
|
app: "live",
|
||||||
|
stream: "livestream"
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
function parse_rtmp_url(rtmp_url) {
|
||||||
|
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
|
||||||
|
var a = document.createElement("a");
|
||||||
|
a.href = rtmp_url.replace("rtmp://", "http://");
|
||||||
|
|
||||||
|
var vhost = a.hostname;
|
||||||
|
var port = (a.port == "")? "1935":a.port;
|
||||||
|
var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
|
||||||
|
var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
|
||||||
|
|
||||||
|
// parse the vhost in the params of app, that srs supports.
|
||||||
|
app = app.replace("...vhost...", "?vhost=");
|
||||||
|
if (app.indexOf("?") >= 0) {
|
||||||
|
var params = app.substr(app.indexOf("?"));
|
||||||
|
app = app.substr(0, app.indexOf("?"));
|
||||||
|
|
||||||
|
if (params.indexOf("vhost=") > 0) {
|
||||||
|
vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
|
||||||
|
if (vhost.indexOf("&") > 0) {
|
||||||
|
vhost = vhost.substr(0, vhost.indexOf("&"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var ret = {
|
||||||
|
server: a.hostname, port: port,
|
||||||
|
vhost: vhost, app: app, stream: stream
|
||||||
|
};
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get the agent.
|
||||||
|
* @return an object specifies some browser.
|
||||||
|
* for example, get_browser_agents().MSIE
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
*/
|
||||||
|
function get_browser_agents() {
|
||||||
|
var agent = navigator.userAgent;
|
||||||
|
|
||||||
|
/**
|
||||||
|
WindowsPC platform, Win7:
|
||||||
|
chrome 31.0.1650.63:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
||||||
|
(KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
|
||||||
|
firefox 23.0.1:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101
|
||||||
|
Firefox/23.0
|
||||||
|
safari 5.1.7(7534.57.2):
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2
|
||||||
|
(KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
|
||||||
|
opera 15.0.1147.153:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
||||||
|
(KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
|
||||||
|
OPR/15.0.1147.153
|
||||||
|
360 6.2.1.272:
|
||||||
|
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
||||||
|
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
||||||
|
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
||||||
|
.NET4.0E)
|
||||||
|
IE 10.0.9200.16750(update: 10.0.12):
|
||||||
|
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
||||||
|
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
||||||
|
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
||||||
|
.NET4.0E)
|
||||||
|
*/
|
||||||
|
|
||||||
|
return {
|
||||||
|
// platform
|
||||||
|
Android: agent.indexOf("Android") != -1,
|
||||||
|
Windows: agent.indexOf("Windows") != -1,
|
||||||
|
iPhone: agent.indexOf("iPhone") != -1,
|
||||||
|
// Windows Browsers
|
||||||
|
Chrome: agent.indexOf("Chrome") != -1,
|
||||||
|
Firefox: agent.indexOf("Firefox") != -1,
|
||||||
|
QQBrowser: agent.indexOf("QQBrowser") != -1,
|
||||||
|
MSIE: agent.indexOf("MSIE") != -1,
|
||||||
|
// Android Browsers
|
||||||
|
Opera: agent.indexOf("Presto") != -1,
|
||||||
|
MQQBrowser: agent.indexOf("MQQBrowser") != -1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format relative seconds to HH:MM:SS,
|
||||||
|
* for example, 210s formated to 00:03:30
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage relative_seconds_to_HHMMSS(210)
|
||||||
|
*/
|
||||||
|
function relative_seconds_to_HHMMSS(seconds){
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = padding(date.getUTCHours(), 2, '0')
|
||||||
|
+ ":" + padding(date.getUTCMinutes(), 2, '0')
|
||||||
|
+ ":" + padding(date.getUTCSeconds(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format absolute seconds to HH:MM:SS,
|
||||||
|
* for example, 1389146480s (2014-01-08 10:01:20 GMT+0800) formated to 10:01:20
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage absolute_seconds_to_HHMMSS(new Date().getTime() / 1000)
|
||||||
|
*/
|
||||||
|
function absolute_seconds_to_HHMMSS(seconds){
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = padding(date.getHours(), 2, '0')
|
||||||
|
+ ":" + padding(date.getMinutes(), 2, '0')
|
||||||
|
+ ":" + padding(date.getSeconds(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format absolute seconds to YYYY-mm-dd,
|
||||||
|
* for example, 1389146480s (2014-01-08 10:01:20 GMT+0800) formated to 2014-01-08
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage absolute_seconds_to_YYYYmmdd(new Date().getTime() / 1000)
|
||||||
|
*/
|
||||||
|
function absolute_seconds_to_YYYYmmdd(seconds) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = date.getFullYear()
|
||||||
|
+ "-" + padding(date.getMonth() + 1, 2, '0')
|
||||||
|
+ "-" + padding(date.getDate(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the date in str to Date object.
|
||||||
|
* @param str the date in str, format as "YYYY-mm-dd", for example, 2014-12-11
|
||||||
|
* @returns a date object.
|
||||||
|
* @usage YYYYmmdd_parse("2014-12-11")
|
||||||
|
*/
|
||||||
|
function YYYYmmdd_parse(str) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Date.parse(str));
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* async refresh function call. to avoid multiple call.
|
||||||
|
* @remark AsyncRefresh is for jquery to refresh the speicified pfn in a page;
|
||||||
|
* if angularjs, use AsyncRefresh2 to change pfn, cancel previous request for angularjs use singleton object.
|
||||||
|
* @param refresh_interval the default refresh interval ms.
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* the pfn can be implements as following:
|
||||||
|
var async_refresh = new AsyncRefresh(pfn, 3000);
|
||||||
|
function pfn() {
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
async_refresh.request(100);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
type: 'GET', async: true, url: 'xxxxx',
|
||||||
|
complete: function(){
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
async_refresh.request(0);
|
||||||
|
} else {
|
||||||
|
async_refresh.request(async_refresh.refresh_interval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
success: function(res){
|
||||||
|
// if donot allow refresh, directly return.
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// render the res.
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
function AsyncRefresh(pfn, refresh_interval) {
|
||||||
|
this.refresh_interval = refresh_interval;
|
||||||
|
|
||||||
|
this.__handler = null;
|
||||||
|
this.__pfn = pfn;
|
||||||
|
|
||||||
|
this.__enabled = true;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* disable the refresher, the pfn must check the refresh state.
|
||||||
|
*/
|
||||||
|
AsyncRefresh.prototype.refresh_disable = function() {
|
||||||
|
this.__enabled = false;
|
||||||
|
}
|
||||||
|
AsyncRefresh.prototype.refresh_enable = function() {
|
||||||
|
this.__enabled = true;
|
||||||
|
}
|
||||||
|
AsyncRefresh.prototype.refresh_is_enabled = function() {
|
||||||
|
return this.__enabled;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* start new async request
|
||||||
|
* @param timeout the timeout in ms.
|
||||||
|
* user can use the refresh_interval of the AsyncRefresh object,
|
||||||
|
* which initialized in constructor.
|
||||||
|
*/
|
||||||
|
AsyncRefresh.prototype.request = function(timeout) {
|
||||||
|
if (this.__handler) {
|
||||||
|
clearTimeout(this.__handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__handler = setTimeout(this.__pfn, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* async refresh v2, support cancellable refresh, and change the refresh pfn.
|
||||||
|
* @remakr for angularjs. if user only need jquery, maybe AsyncRefresh is better.
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* Usage:
|
||||||
|
bsmControllers.controller('CServers', ['$scope', 'MServer', function($scope, MServer){
|
||||||
|
async_refresh2.refresh_change(function(){
|
||||||
|
// 获取服务器列表
|
||||||
|
MServer.servers_load({}, function(data){
|
||||||
|
$scope.servers = data.data.servers;
|
||||||
|
async_refresh2.request();
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
async_refresh2.request(0);
|
||||||
|
}]);
|
||||||
|
bsmControllers.controller('CStreams', ['$scope', 'MStream', function($scope, MStream){
|
||||||
|
async_refresh2.refresh_change(function(){
|
||||||
|
// 获取流列表
|
||||||
|
MStream.streams_load({}, function(data){
|
||||||
|
$scope.streams = data.data.streams;
|
||||||
|
async_refresh2.request();
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
async_refresh2.request(0);
|
||||||
|
}]);
|
||||||
|
*/
|
||||||
|
function AsyncRefresh2() {
|
||||||
|
/**
|
||||||
|
* the function callback before call the pfn.
|
||||||
|
* the protype is function():bool, which return true to invoke, false to abort the call.
|
||||||
|
* null to ignore this callback.
|
||||||
|
*
|
||||||
|
* for example, user can abort the refresh by find the class popover:
|
||||||
|
* async_refresh2.on_before_call_pfn = function() {
|
||||||
|
* if ($(".popover").length > 0) {
|
||||||
|
* async_refresh2.request();
|
||||||
|
* return false;
|
||||||
|
* }
|
||||||
|
* return true;
|
||||||
|
* };
|
||||||
|
*/
|
||||||
|
this.on_before_call_pfn = null;
|
||||||
|
|
||||||
|
// use a anonymous function to call, and check the enabled when actually invoke.
|
||||||
|
this.__call = {
|
||||||
|
pfn: null,
|
||||||
|
timeout: 0,
|
||||||
|
__enabled: false,
|
||||||
|
__handler: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// singleton
|
||||||
|
var async_refresh2 = new AsyncRefresh2();
|
||||||
|
/**
|
||||||
|
* initialize or refresh change. cancel previous request, setup new request.
|
||||||
|
* @param pfn a function():void to request after timeout. null to disable refresher.
|
||||||
|
* @param timeout the timeout in ms, to call pfn. null to disable refresher.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.initialize = function(pfn, timeout) {
|
||||||
|
this.refresh_change(pfn, timeout);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* stop refresh, the refresh pfn is set to null.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.stop = function() {
|
||||||
|
this.refresh_change(null, null);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* change refresh pfn, the old pfn will set to disabled.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.refresh_change = function(pfn, timeout) {
|
||||||
|
// cancel the previous call.
|
||||||
|
if (this.__call.__handler) {
|
||||||
|
clearTimeout(this.__handler);
|
||||||
|
}
|
||||||
|
this.__call.__enabled = false;
|
||||||
|
|
||||||
|
// setup new call.
|
||||||
|
this.__call = {
|
||||||
|
pfn: pfn,
|
||||||
|
timeout: timeout,
|
||||||
|
__enabled: true,
|
||||||
|
__handler: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* start new request, we never auto start the request,
|
||||||
|
* user must start new request when previous completed.
|
||||||
|
* @param timeout [optional] if not specified, use the timeout in initialize or refresh_change.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.request = function(timeout) {
|
||||||
|
var self = this;
|
||||||
|
var this_call = this.__call;
|
||||||
|
|
||||||
|
// clear previous timeout.
|
||||||
|
if (this_call.__handler) {
|
||||||
|
clearTimeout(this_call.__handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// override the timeout
|
||||||
|
if (timeout == undefined) {
|
||||||
|
timeout = this_call.timeout;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if user disabled refresher.
|
||||||
|
if (this_call.pfn == null || timeout == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this_call.__handler = setTimeout(function(){
|
||||||
|
// cancelled by refresh_change, ignore.
|
||||||
|
if (!this_call.__enabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// callback if the handler installled.
|
||||||
|
if (self.on_before_call_pfn) {
|
||||||
|
if (!self.on_before_call_pfn()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// do the actual call.
|
||||||
|
this_call.pfn();
|
||||||
|
}, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
// other components.
|
||||||
|
/**
|
||||||
|
* jquery/bootstrap pager.
|
||||||
|
* depends: jquery1.10, boostrap2
|
||||||
|
* https://code.csdn.net/snippets/146160
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17628631
|
||||||
|
*/
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
<script type="text/javascript" src="js/srs.player.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.publisher.js"></script>
|
||||||
<script type="text/javascript" src="js/srs.utility.js"></script>
|
<script type="text/javascript" src="js/srs.utility.js"></script>
|
||||||
|
<script type="text/javascript" src="js/winlin.utility.js"></script>
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,10 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
</body>
|
||||||
|
<script type="text/javascript">
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
window.location.href = "players/index.html" + window.location.search;
|
window.location.href = "players/index.html" + window.location.search;
|
||||||
}, 500);
|
}, 500);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,6 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
|
|
@ -21,58 +13,6 @@
|
||||||
margin-left: -350px;
|
margin-left: -350px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
function osmf_play(url) {
|
|
||||||
$("#div_container").remove();
|
|
||||||
|
|
||||||
var div_container = $("<div/>");
|
|
||||||
$(div_container).attr("id", "div_container");
|
|
||||||
$("#player").append(div_container);
|
|
||||||
|
|
||||||
var player = $("<div/>");
|
|
||||||
$(player).attr("id", "player_id");
|
|
||||||
$(div_container).append(player);
|
|
||||||
|
|
||||||
var flashvars = {};
|
|
||||||
flashvars.src = url;
|
|
||||||
flashvars.streamType = "live"; // live or recorded
|
|
||||||
flashvars.autoPlay = true;
|
|
||||||
flashvars.controlBarAutoHide = false;
|
|
||||||
flashvars.scaleMode = "stretch";
|
|
||||||
flashvars.bufferTime = 0.8;
|
|
||||||
|
|
||||||
var params = {};
|
|
||||||
params.allowFullScreen = true;
|
|
||||||
|
|
||||||
var attributes = {};
|
|
||||||
|
|
||||||
swfobject.embedSWF(
|
|
||||||
"js/StrobeMediaPlayback.swf", "player_id",
|
|
||||||
srs_get_player_width(), srs_get_player_height(),
|
|
||||||
"11.1", "js/AdobeFlashPlayerInstall.swf",
|
|
||||||
flashvars, params, attributes
|
|
||||||
);
|
|
||||||
}
|
|
||||||
$(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("#txt_url", null, "#main_modal");
|
|
||||||
|
|
||||||
$("#main_modal").on("hide", function(){
|
|
||||||
osmf_play("http://localhost");
|
|
||||||
$("#div_container").remove();
|
|
||||||
});
|
|
||||||
$("#main_modal").on("show", function(){
|
|
||||||
var url = $("#txt_url").val();
|
|
||||||
osmf_play(url);
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#btn_play").click(function(){
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -120,3 +60,65 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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/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">
|
||||||
|
function osmf_play(url) {
|
||||||
|
$("#div_container").remove();
|
||||||
|
|
||||||
|
var div_container = $("<div/>");
|
||||||
|
$(div_container).attr("id", "div_container");
|
||||||
|
$("#player").append(div_container);
|
||||||
|
|
||||||
|
var player = $("<div/>");
|
||||||
|
$(player).attr("id", "player_id");
|
||||||
|
$(div_container).append(player);
|
||||||
|
|
||||||
|
var flashvars = {};
|
||||||
|
flashvars.src = url;
|
||||||
|
flashvars.streamType = "live"; // live or recorded
|
||||||
|
flashvars.autoPlay = true;
|
||||||
|
flashvars.controlBarAutoHide = false;
|
||||||
|
flashvars.scaleMode = "stretch";
|
||||||
|
flashvars.bufferTime = 0.8;
|
||||||
|
|
||||||
|
var params = {};
|
||||||
|
params.allowFullScreen = true;
|
||||||
|
|
||||||
|
var attributes = {};
|
||||||
|
|
||||||
|
swfobject.embedSWF(
|
||||||
|
"js/StrobeMediaPlayback.swf", "player_id",
|
||||||
|
srs_get_player_width(), srs_get_player_height(),
|
||||||
|
"11.1", "js/AdobeFlashPlayerInstall.swf",
|
||||||
|
flashvars, params, attributes
|
||||||
|
);
|
||||||
|
}
|
||||||
|
$(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_rtmp("#txt_url", "#main_modal");
|
||||||
|
|
||||||
|
$("#main_modal").on("hide", function(){
|
||||||
|
osmf_play("http://localhost");
|
||||||
|
$("#div_container").remove();
|
||||||
|
});
|
||||||
|
$("#main_modal").on("show", function(){
|
||||||
|
var url = $("#txt_url").val();
|
||||||
|
osmf_play(url);
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#btn_play").click(function(){
|
||||||
|
$("#main_modal").modal({show:true, keyboard:false});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,16 @@
|
||||||
<head>
|
<head>
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<script type="text/javascript" src="players/js/jquery-1.10.2.min.js"></script>
|
|
||||||
<script type="text/javascript" src="players/js/srs.page.js"></script>
|
|
||||||
<script type="text/javascript" src="players/js/srs.utility.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="text/javascript">
|
</body>
|
||||||
|
<script type="text/javascript" src="players/js/jquery-1.10.2.min.js"></script>
|
||||||
|
<script type="text/javascript" src="players/js/srs.page.js"></script>
|
||||||
|
<script type="text/javascript" src="players/js/srs.utility.js"></script>
|
||||||
|
<script type="text/javascript" src="players/js/winlin.utility.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
window.location.href = "players/index.html" + window.location.search;
|
window.location.href = "players/index.html" + window.location.search;
|
||||||
}, 500);
|
}, 500);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,6 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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>
|
|
||||||
<script type="text/javascript" src="srs_bwt/src/srs.bandwidth.js"></script>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
|
|
@ -22,62 +13,6 @@
|
||||||
margin-left: -350px;
|
margin-left: -350px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
var bandwidth = null;
|
|
||||||
|
|
||||||
$(function(){
|
|
||||||
srs_init_bwt("#txt_url");
|
|
||||||
|
|
||||||
$("#btn_play").click(on_click_play);
|
|
||||||
$("#main_modal").on("show", on_start_bandwidth_test);
|
|
||||||
$("#main_modal").on("hide", on_stop_bandwidth_test);
|
|
||||||
});
|
|
||||||
|
|
||||||
function on_click_play() {
|
|
||||||
$("#check_status").text("");
|
|
||||||
$("#check_info").text("");
|
|
||||||
$("#progress_bar").width("0%");
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
}
|
|
||||||
function on_start_bandwidth_test() {
|
|
||||||
$("#div_container").remove();
|
|
||||||
$("#progress_bar").removeClass("bar-danger");
|
|
||||||
|
|
||||||
var div_container = $("<div/>");
|
|
||||||
$(div_container).attr("id", "div_container");
|
|
||||||
$("#player").append(div_container);
|
|
||||||
|
|
||||||
var player = $("<div/>");
|
|
||||||
$(player).attr("id", "player_id");
|
|
||||||
$(div_container).append(player);
|
|
||||||
|
|
||||||
var url = $("#txt_url").val();
|
|
||||||
|
|
||||||
bandwidth = new SrsBandwidth("player_id", 100, 1);
|
|
||||||
bandwidth.on_bandwidth_ready = function() {
|
|
||||||
this.check_bandwidth(url);
|
|
||||||
}
|
|
||||||
bandwidth.on_update_progress = function(percent) {
|
|
||||||
$("#progress_bar").width(percent + "%");
|
|
||||||
}
|
|
||||||
bandwidth.on_update_status = function(status) {
|
|
||||||
$("#check_status").text(status);
|
|
||||||
}
|
|
||||||
bandwidth.on_srs_info = function(srs_server, srs_primary, srs_authors, srs_id, srs_pid, srs_server_ip) {
|
|
||||||
$("#check_info").text(
|
|
||||||
"server:" + srs_server + ", primary:" + srs_primary + ", authors:" + srs_authors +
|
|
||||||
", srs_id:" + srs_id + ", srs_pid:" + srs_pid + ", ip:" + srs_server_ip
|
|
||||||
);
|
|
||||||
}
|
|
||||||
bandwidth.on_error = function(code) {
|
|
||||||
$("#progress_bar").addClass("bar-danger");
|
|
||||||
}
|
|
||||||
bandwidth.render(url);
|
|
||||||
}
|
|
||||||
function on_stop_bandwidth_test() {
|
|
||||||
bandwidth.stop();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -139,4 +74,70 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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/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" src="srs_bwt/src/srs.bandwidth.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var bandwidth = null;
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
srs_init_bwt("#txt_url");
|
||||||
|
|
||||||
|
$("#btn_play").click(on_click_play);
|
||||||
|
$("#main_modal").on("show", on_start_bandwidth_test);
|
||||||
|
$("#main_modal").on("hide", on_stop_bandwidth_test);
|
||||||
|
});
|
||||||
|
|
||||||
|
function on_click_play() {
|
||||||
|
$("#check_status").text("");
|
||||||
|
$("#check_info").text("");
|
||||||
|
$("#progress_bar").width("0%");
|
||||||
|
$("#main_modal").modal({show:true, keyboard:false});
|
||||||
|
}
|
||||||
|
function on_start_bandwidth_test() {
|
||||||
|
$("#div_container").remove();
|
||||||
|
$("#progress_bar").removeClass("bar-danger");
|
||||||
|
|
||||||
|
var div_container = $("<div/>");
|
||||||
|
$(div_container).attr("id", "div_container");
|
||||||
|
$("#player").append(div_container);
|
||||||
|
|
||||||
|
var player = $("<div/>");
|
||||||
|
$(player).attr("id", "player_id");
|
||||||
|
$(div_container).append(player);
|
||||||
|
|
||||||
|
var url = $("#txt_url").val();
|
||||||
|
|
||||||
|
bandwidth = new SrsBandwidth("player_id", 100, 1);
|
||||||
|
bandwidth.on_bandwidth_ready = function() {
|
||||||
|
this.check_bandwidth(url);
|
||||||
|
}
|
||||||
|
bandwidth.on_update_progress = function(percent) {
|
||||||
|
$("#progress_bar").width(percent + "%");
|
||||||
|
}
|
||||||
|
bandwidth.on_update_status = function(status) {
|
||||||
|
$("#check_status").text(status);
|
||||||
|
}
|
||||||
|
bandwidth.on_srs_info = function(srs_server, srs_primary, srs_authors, srs_id, srs_pid, srs_server_ip) {
|
||||||
|
$("#check_info").text(
|
||||||
|
"server:" + srs_server + ", primary:" + srs_primary + ", authors:" + srs_authors +
|
||||||
|
", srs_id:" + srs_id + ", srs_pid:" + srs_pid + ", ip:" + srs_server_ip
|
||||||
|
);
|
||||||
|
}
|
||||||
|
bandwidth.on_error = function(code) {
|
||||||
|
$("#progress_bar").addClass("bar-danger");
|
||||||
|
}
|
||||||
|
bandwidth.render(url);
|
||||||
|
}
|
||||||
|
function on_stop_bandwidth_test() {
|
||||||
|
bandwidth.stop();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,6 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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/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>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
|
|
@ -21,7 +12,255 @@
|
||||||
width: 310px;
|
width: 310px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
</head>
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<button class="btn input-small" id="btn_video_settings">摄像头</button>
|
||||||
|
<button class="btn input-small" id="btn_audio_settings">麦克风</button>
|
||||||
|
<input type="text" id="txt_name" class="input-large" placeholder="请输入您的名字..." value=""></input>
|
||||||
|
<button class="btn input-small" id="btn_join">加入会议</button>
|
||||||
|
<input type="text" id="txt_url" class="input-mini hide" value=""></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table id="lst_chats" class="table">
|
||||||
|
<tr>
|
||||||
|
<td id="td_0">
|
||||||
|
<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>
|
||||||
|
</td>
|
||||||
|
<td id="td_1">
|
||||||
|
<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>
|
||||||
|
</td>
|
||||||
|
<td id="td_2"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<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>]
|
||||||
|
<a id="user_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
|
||||||
|
播放地址<img src="img/tooltip.png"/>
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div id="collapseM" class="accordion-body collapse in">
|
||||||
|
<div class="accordion-inner">
|
||||||
|
<div id="chat_player">
|
||||||
|
<div id="chat_player_raw">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="table">
|
||||||
|
</table>
|
||||||
|
<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>
|
||||||
|
<hr/>
|
||||||
|
<footer>
|
||||||
|
<p><a href="https://github.com/simple-rtmp-server/srs">SRS Team © 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 srs_publisher = null;
|
var srs_publisher = null;
|
||||||
var realtime_player = null;
|
var realtime_player = null;
|
||||||
var api_server = null;
|
var api_server = null;
|
||||||
|
|
@ -546,243 +785,6 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</html>
|
||||||
<body>
|
|
||||||
<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>
|
|
||||||
<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">
|
|
||||||
<button class="btn input-small" id="btn_video_settings">摄像头</button>
|
|
||||||
<button class="btn input-small" id="btn_audio_settings">麦克风</button>
|
|
||||||
<input type="text" id="txt_name" class="input-large" placeholder="请输入您的名字..." value=""></input>
|
|
||||||
<button class="btn input-small" id="btn_join">加入会议</button>
|
|
||||||
<input type="text" id="txt_url" class="input-mini hide" value=""></input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<table id="lst_chats" class="table">
|
|
||||||
<tr>
|
|
||||||
<td id="td_0">
|
|
||||||
<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>
|
|
||||||
</td>
|
|
||||||
<td id="td_1">
|
|
||||||
<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>
|
|
||||||
</td>
|
|
||||||
<td id="td_2"></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<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>]
|
|
||||||
<a id="user_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
|
|
||||||
播放地址<img src="img/tooltip.png"/>
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div id="collapseM" class="accordion-body collapse in">
|
|
||||||
<div class="accordion-inner">
|
|
||||||
<div id="chat_player">
|
|
||||||
<div id="chat_player_raw">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<table class="table">
|
|
||||||
</table>
|
|
||||||
<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>
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p><a href="https://github.com/simple-rtmp-server/srs">SRS Team © 2013</a></p>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,15 +4,6 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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/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>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
|
|
@ -29,250 +20,6 @@
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
var srs_player = null;
|
|
||||||
var url = null;
|
|
||||||
|
|
||||||
var __active_dar = null;
|
|
||||||
function select_dar(dar_id, num, den) {
|
|
||||||
srs_player.set_dar(num, den);
|
|
||||||
|
|
||||||
if (__active_dar) {
|
|
||||||
__active_dar.removeClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
__active_dar = $(dar_id).parent();
|
|
||||||
__active_dar.addClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
var __active_size = null;
|
|
||||||
function select_fs_size(size_id, refer, percent) {
|
|
||||||
srs_player.set_fs(refer, percent);
|
|
||||||
|
|
||||||
if (__active_size) {
|
|
||||||
__active_size.removeClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
__active_size = $(size_id).parent();
|
|
||||||
__active_size.addClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
var __active_bt = null;
|
|
||||||
function select_buffer_time(bt_id, buffer_time) {
|
|
||||||
srs_player.set_bt(buffer_time);
|
|
||||||
|
|
||||||
if (__active_bt) {
|
|
||||||
__active_bt.removeClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
__active_bt = $(bt_id).parent();
|
|
||||||
__active_bt.addClass("active");
|
|
||||||
}
|
|
||||||
|
|
||||||
$(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("#txt_url", null, "#main_modal");
|
|
||||||
|
|
||||||
$("#fs_tips").tooltip({
|
|
||||||
title: "点击视频进入或退出全屏"
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#main_modal").on("show", function(){
|
|
||||||
if (srs_player) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$("#div_container").remove();
|
|
||||||
|
|
||||||
var div_container = $("<div/>");
|
|
||||||
$(div_container).attr("id", "div_container");
|
|
||||||
$("#player").append(div_container);
|
|
||||||
|
|
||||||
var player = $("<div/>");
|
|
||||||
$(player).attr("id", "player_id");
|
|
||||||
$(div_container).append(player);
|
|
||||||
|
|
||||||
srs_player = new SrsPlayer("player_id", srs_get_player_width(), srs_get_player_height());
|
|
||||||
srs_player.on_player_ready = function() {
|
|
||||||
select_buffer_time("#btn_bt_0_1", 0.1);
|
|
||||||
this.play(url);
|
|
||||||
};
|
|
||||||
srs_player.on_player_metadata = function(metadata) {
|
|
||||||
$("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")");
|
|
||||||
select_dar("#btn_dar_original", 0, 0);
|
|
||||||
select_fs_size("#btn_fs_size_screen_100", "screen", 100);
|
|
||||||
};
|
|
||||||
srs_player.on_player_timer = function(time, buffer_length) {
|
|
||||||
var buffer = buffer_length / this.buffer_time * 100;
|
|
||||||
$("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
|
|
||||||
|
|
||||||
$("#pb_buffer_bg").attr("title",
|
|
||||||
"缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒("
|
|
||||||
+ Number(buffer).toFixed(1) + "%)");
|
|
||||||
|
|
||||||
var time_str = "";
|
|
||||||
// day
|
|
||||||
time_str = padding(parseInt(time / 24 / 3600), 2, '0') + " ";
|
|
||||||
// hour
|
|
||||||
time = time % (24 * 3600);
|
|
||||||
time_str += padding(parseInt(time / 3600), 2, '0') + ":";
|
|
||||||
// minute
|
|
||||||
time = time % (3600);
|
|
||||||
time_str += padding(parseInt(time / 60), 2, '0') + ":";
|
|
||||||
// seconds
|
|
||||||
time = time % (60);
|
|
||||||
time_str += padding(parseInt(time), 2, '0');
|
|
||||||
// show
|
|
||||||
$("#txt_time").val(time_str);
|
|
||||||
};
|
|
||||||
srs_player.start();
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#main_modal").on("hide", function(){
|
|
||||||
if ($("#main_modal").is(":visible")) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (srs_player) {
|
|
||||||
srs_player.stop();
|
|
||||||
srs_player = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#btn_play").click(function(){
|
|
||||||
url = $("#txt_url").val();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#btn_pause").click(function(){
|
|
||||||
if ($("#btn_pause").text() == "暂停") {
|
|
||||||
$("#btn_pause").text("继续");
|
|
||||||
srs_player.pause();
|
|
||||||
} else {
|
|
||||||
$("#btn_pause").text("暂停");
|
|
||||||
srs_player.resume();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#srs_publish").click(function(){
|
|
||||||
url = $("#srs_publish").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
$("#srs_publish_ld").click(function(){
|
|
||||||
url = $("#srs_publish_ld").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
$("#srs_publish_sd").click(function(){
|
|
||||||
url = $("#srs_publish_sd").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
$("#srs_publish_fw").click(function(){
|
|
||||||
url = $("#srs_publish_fw").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
$("#srs_publish_fw_ld").click(function(){
|
|
||||||
url = $("#srs_publish_fw_ld").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
$("#srs_publish_fw_sd").click(function(){
|
|
||||||
url = $("#srs_publish_fw_sd").text();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
});
|
|
||||||
|
|
||||||
var query = parse_query_string();
|
|
||||||
var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=live&hls_autostart=true";
|
|
||||||
$("#srs_publish_hls").attr("href", jwplayer_url + "&stream=livestream");
|
|
||||||
$("#srs_publish_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
|
|
||||||
$("#srs_publish_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
|
|
||||||
var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=forward/live&hls_autostart=true";
|
|
||||||
$("#srs_publish_fw_hls").attr("href", jwplayer_url + "&stream=livestream");
|
|
||||||
$("#srs_publish_fw_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
|
|
||||||
$("#srs_publish_fw_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
$("#btn_dar_original").click(function(){
|
|
||||||
select_dar("#btn_dar_original", 0, 0);
|
|
||||||
});
|
|
||||||
$("#btn_dar_21_9").click(function(){
|
|
||||||
select_dar("#btn_dar_21_9", 21, 9);
|
|
||||||
});
|
|
||||||
$("#btn_dar_16_9").click(function(){
|
|
||||||
select_dar("#btn_dar_16_9", 16, 9);
|
|
||||||
});
|
|
||||||
$("#btn_dar_4_3").click(function(){
|
|
||||||
select_dar("#btn_dar_4_3", 4, 3);
|
|
||||||
});
|
|
||||||
$("#btn_dar_fill").click(function(){
|
|
||||||
select_dar("#btn_dar_fill", -1, -1);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
$("#btn_fs_size_video_100").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_video_100", "video", 100);
|
|
||||||
});
|
|
||||||
$("#btn_fs_size_video_75").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_video_75", "video", 75);
|
|
||||||
});
|
|
||||||
$("#btn_fs_size_video_50").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_video_50", "video", 50);
|
|
||||||
});
|
|
||||||
$("#btn_fs_size_screen_100").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_screen_100", "screen", 100);
|
|
||||||
});
|
|
||||||
$("#btn_fs_size_screen_75").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_screen_75", "screen", 75);
|
|
||||||
});
|
|
||||||
$("#btn_fs_size_screen_50").click(function(){
|
|
||||||
select_fs_size("#btn_fs_size_screen_50", "screen", 50);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
$("#btn_bt_0_1").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_0_1", 0.1);
|
|
||||||
});
|
|
||||||
$("#btn_bt_0_2").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_0_2", 0.2);
|
|
||||||
});
|
|
||||||
$("#btn_bt_0_3").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_0_3", 0.3);
|
|
||||||
});
|
|
||||||
$("#btn_bt_0_5").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_0_5", 0.5);
|
|
||||||
});
|
|
||||||
$("#btn_bt_0_8").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_0_8", 0.8);
|
|
||||||
});
|
|
||||||
$("#btn_bt_1").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_1", 1);
|
|
||||||
});
|
|
||||||
$("#btn_bt_2").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_2", 2);
|
|
||||||
});
|
|
||||||
$("#btn_bt_3").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_3", 3);
|
|
||||||
});
|
|
||||||
$("#btn_bt_5").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_5", 5);
|
|
||||||
});
|
|
||||||
$("#btn_bt_10").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_10", 10);
|
|
||||||
});
|
|
||||||
$("#btn_bt_30").click(function(){
|
|
||||||
select_buffer_time("#btn_bt_30", 30);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
var query = parse_query_string();
|
|
||||||
if (query.autostart == "true") {
|
|
||||||
url = $("#txt_url").val();
|
|
||||||
$("#main_modal").modal({show:true, keyboard:false});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -539,3 +286,262 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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 srs_player = null;
|
||||||
|
var url = null;
|
||||||
|
|
||||||
|
var __active_dar = null;
|
||||||
|
function select_dar(dar_id, num, den) {
|
||||||
|
srs_player.set_dar(num, den);
|
||||||
|
|
||||||
|
if (__active_dar) {
|
||||||
|
__active_dar.removeClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
__active_dar = $(dar_id).parent();
|
||||||
|
__active_dar.addClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
var __active_size = null;
|
||||||
|
function select_fs_size(size_id, refer, percent) {
|
||||||
|
srs_player.set_fs(refer, percent);
|
||||||
|
|
||||||
|
if (__active_size) {
|
||||||
|
__active_size.removeClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
__active_size = $(size_id).parent();
|
||||||
|
__active_size.addClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
var __active_bt = null;
|
||||||
|
function select_buffer_time(bt_id, buffer_time) {
|
||||||
|
srs_player.set_bt(buffer_time);
|
||||||
|
|
||||||
|
if (__active_bt) {
|
||||||
|
__active_bt.removeClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
__active_bt = $(bt_id).parent();
|
||||||
|
__active_bt.addClass("active");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(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_rtmp("#txt_url", "#main_modal");
|
||||||
|
|
||||||
|
$("#fs_tips").tooltip({
|
||||||
|
title: "点击视频进入或退出全屏"
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#main_modal").on("show", function(){
|
||||||
|
if (srs_player) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#div_container").remove();
|
||||||
|
|
||||||
|
var div_container = $("<div/>");
|
||||||
|
$(div_container).attr("id", "div_container");
|
||||||
|
$("#player").append(div_container);
|
||||||
|
|
||||||
|
var player = $("<div/>");
|
||||||
|
$(player).attr("id", "player_id");
|
||||||
|
$(div_container).append(player);
|
||||||
|
|
||||||
|
srs_player = new SrsPlayer("player_id", srs_get_player_width(), srs_get_player_height());
|
||||||
|
srs_player.on_player_ready = function() {
|
||||||
|
select_buffer_time("#btn_bt_0_1", 0.1);
|
||||||
|
this.play(url);
|
||||||
|
};
|
||||||
|
srs_player.on_player_metadata = function(metadata) {
|
||||||
|
$("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")");
|
||||||
|
select_dar("#btn_dar_original", 0, 0);
|
||||||
|
select_fs_size("#btn_fs_size_screen_100", "screen", 100);
|
||||||
|
};
|
||||||
|
srs_player.on_player_timer = function(time, buffer_length) {
|
||||||
|
var buffer = buffer_length / this.buffer_time * 100;
|
||||||
|
$("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
|
||||||
|
|
||||||
|
$("#pb_buffer_bg").attr("title",
|
||||||
|
"缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒("
|
||||||
|
+ Number(buffer).toFixed(1) + "%)");
|
||||||
|
|
||||||
|
var time_str = "";
|
||||||
|
// day
|
||||||
|
time_str = padding(parseInt(time / 24 / 3600), 2, '0') + " ";
|
||||||
|
// hour
|
||||||
|
time = time % (24 * 3600);
|
||||||
|
time_str += padding(parseInt(time / 3600), 2, '0') + ":";
|
||||||
|
// minute
|
||||||
|
time = time % (3600);
|
||||||
|
time_str += padding(parseInt(time / 60), 2, '0') + ":";
|
||||||
|
// seconds
|
||||||
|
time = time % (60);
|
||||||
|
time_str += padding(parseInt(time), 2, '0');
|
||||||
|
// show
|
||||||
|
$("#txt_time").val(time_str);
|
||||||
|
};
|
||||||
|
srs_player.start();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#main_modal").on("hide", function(){
|
||||||
|
if ($("#main_modal").is(":visible")) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (srs_player) {
|
||||||
|
srs_player.stop();
|
||||||
|
srs_player = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#btn_play").click(function(){
|
||||||
|
url = $("#txt_url").val();
|
||||||
|
$("#main_modal").modal({show:true, keyboard:false});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#btn_pause").click(function(){
|
||||||
|
if ($("#btn_pause").text() == "暂停") {
|
||||||
|
$("#btn_pause").text("继续");
|
||||||
|
srs_player.pause();
|
||||||
|
} else {
|
||||||
|
$("#btn_pause").text("暂停");
|
||||||
|
srs_player.resume();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
$("#srs_publish").click(function () {
|
||||||
|
url = $("#srs_publish").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
$("#srs_publish_ld").click(function () {
|
||||||
|
url = $("#srs_publish_ld").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
$("#srs_publish_sd").click(function () {
|
||||||
|
url = $("#srs_publish_sd").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
$("#srs_publish_fw").click(function () {
|
||||||
|
url = $("#srs_publish_fw").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
$("#srs_publish_fw_ld").click(function () {
|
||||||
|
url = $("#srs_publish_fw_ld").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
$("#srs_publish_fw_sd").click(function () {
|
||||||
|
url = $("#srs_publish_fw_sd").text();
|
||||||
|
$("#main_modal").modal({show: true, keyboard: false});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var query = parse_query_string();
|
||||||
|
var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=live&hls_autostart=true";
|
||||||
|
if (true) {
|
||||||
|
$("#srs_publish_hls").attr("href", jwplayer_url + "&stream=livestream");
|
||||||
|
$("#srs_publish_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
|
||||||
|
$("#srs_publish_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
|
||||||
|
var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=forward/live&hls_autostart=true";
|
||||||
|
$("#srs_publish_fw_hls").attr("href", jwplayer_url + "&stream=livestream");
|
||||||
|
$("#srs_publish_fw_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
|
||||||
|
$("#srs_publish_fw_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
$("#btn_dar_original").click(function(){
|
||||||
|
select_dar("#btn_dar_original", 0, 0);
|
||||||
|
});
|
||||||
|
$("#btn_dar_21_9").click(function(){
|
||||||
|
select_dar("#btn_dar_21_9", 21, 9);
|
||||||
|
});
|
||||||
|
$("#btn_dar_16_9").click(function(){
|
||||||
|
select_dar("#btn_dar_16_9", 16, 9);
|
||||||
|
});
|
||||||
|
$("#btn_dar_4_3").click(function(){
|
||||||
|
select_dar("#btn_dar_4_3", 4, 3);
|
||||||
|
});
|
||||||
|
$("#btn_dar_fill").click(function(){
|
||||||
|
select_dar("#btn_dar_fill", -1, -1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
$("#btn_fs_size_video_100").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_video_100", "video", 100);
|
||||||
|
});
|
||||||
|
$("#btn_fs_size_video_75").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_video_75", "video", 75);
|
||||||
|
});
|
||||||
|
$("#btn_fs_size_video_50").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_video_50", "video", 50);
|
||||||
|
});
|
||||||
|
$("#btn_fs_size_screen_100").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_screen_100", "screen", 100);
|
||||||
|
});
|
||||||
|
$("#btn_fs_size_screen_75").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_screen_75", "screen", 75);
|
||||||
|
});
|
||||||
|
$("#btn_fs_size_screen_50").click(function(){
|
||||||
|
select_fs_size("#btn_fs_size_screen_50", "screen", 50);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
$("#btn_bt_0_1").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_0_1", 0.1);
|
||||||
|
});
|
||||||
|
$("#btn_bt_0_2").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_0_2", 0.2);
|
||||||
|
});
|
||||||
|
$("#btn_bt_0_3").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_0_3", 0.3);
|
||||||
|
});
|
||||||
|
$("#btn_bt_0_5").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_0_5", 0.5);
|
||||||
|
});
|
||||||
|
$("#btn_bt_0_8").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_0_8", 0.8);
|
||||||
|
});
|
||||||
|
$("#btn_bt_1").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_1", 1);
|
||||||
|
});
|
||||||
|
$("#btn_bt_2").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_2", 2);
|
||||||
|
});
|
||||||
|
$("#btn_bt_3").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_3", 3);
|
||||||
|
});
|
||||||
|
$("#btn_bt_5").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_5", 5);
|
||||||
|
});
|
||||||
|
$("#btn_bt_10").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_10", 10);
|
||||||
|
});
|
||||||
|
$("#btn_bt_30").click(function(){
|
||||||
|
select_buffer_time("#btn_bt_30", 30);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var query = parse_query_string();
|
||||||
|
if (query.autostart == "true") {
|
||||||
|
url = $("#txt_url").val();
|
||||||
|
$("#main_modal").modal({show:true, keyboard:false});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -38,3 +38,4 @@
|
||||||
<buildCSSFiles/>
|
<buildCSSFiles/>
|
||||||
<flashCatalyst validateFlashCatalystCompatibility="false"/>
|
<flashCatalyst validateFlashCatalystCompatibility="false"/>
|
||||||
</actionScriptProperties>
|
</actionScriptProperties>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,213 +4,11 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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/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>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
var srs_publisher = null;
|
|
||||||
var remote_player = null;
|
|
||||||
var realtime_player = null;
|
|
||||||
|
|
||||||
var query = parse_query_string();
|
|
||||||
$(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("#txt_url", null, 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});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#remote_tips").tooltip({
|
|
||||||
title: "为了支持HLS输出，FLASH编码器输出的流需要经过转码(VP6=>H264,MP3=>aac)，所以会黑屏较长时间，请耐心等待"
|
|
||||||
});
|
|
||||||
$("#low_latecy_tips").tooltip({
|
|
||||||
title: "服务器不转码直接转发FLASH编码器的流，所以延迟比支持HLS的流要低很多"
|
|
||||||
});
|
|
||||||
$("#realtime_player_url").tooltip({
|
|
||||||
title: "右键复制RTMP地址"
|
|
||||||
});
|
|
||||||
$("#remote_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();
|
|
||||||
|
|
||||||
update_play_url();
|
|
||||||
|
|
||||||
// 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() {
|
|
||||||
this.set_bt(0.8);
|
|
||||||
};
|
|
||||||
remote_player.on_player_metadata = function(metadata) {
|
|
||||||
this.set_dar(0, 0);
|
|
||||||
this.set_fs("screen", 100);
|
|
||||||
}
|
|
||||||
remote_player.start();
|
|
||||||
|
|
||||||
// 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/Firefox/Safari/Opera浏览器，支持重试");
|
|
||||||
|
|
||||||
srs_log_disabled = true;
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
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 + "...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");
|
|
||||||
|
|
||||||
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";
|
|
||||||
|
|
||||||
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";
|
|
||||||
|
|
||||||
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";
|
|
||||||
|
|
||||||
var hls_url = "http://" + ret.server + ":" + query.http_port + "/" + ret.app + "/" + ret.stream + ".m3u8";
|
|
||||||
|
|
||||||
$("#txt_play_realtime").text("RTMP低延时(点击打开)").attr("href", srs_player_rt_url).attr("target", "_blank");
|
|
||||||
$("#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");
|
|
||||||
}
|
|
||||||
function on_user_publish() {
|
|
||||||
if ($("#btn_publish").text() == "停止发布") {
|
|
||||||
srs_publisher.stop();
|
|
||||||
$("#btn_publish").text("发布视频");
|
|
||||||
//$("#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");
|
|
||||||
|
|
||||||
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 (realtime_player) {
|
|
||||||
// directly play the url for the realtime player.
|
|
||||||
realtime_player.stop();
|
|
||||||
realtime_player.play(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -464,4 +262,208 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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 srs_publisher = null;
|
||||||
|
var remote_player = null;
|
||||||
|
var realtime_player = null;
|
||||||
|
|
||||||
|
var query = parse_query_string();
|
||||||
|
$(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_rtmp("#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});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#remote_tips").tooltip({
|
||||||
|
title: "为了支持HLS输出，FLASH编码器输出的流需要经过转码(VP6=>H264,MP3=>aac)，所以会黑屏较长时间，请耐心等待"
|
||||||
|
});
|
||||||
|
$("#low_latecy_tips").tooltip({
|
||||||
|
title: "服务器不转码直接转发FLASH编码器的流，所以延迟比支持HLS的流要低很多"
|
||||||
|
});
|
||||||
|
$("#realtime_player_url").tooltip({
|
||||||
|
title: "右键复制RTMP地址"
|
||||||
|
});
|
||||||
|
$("#remote_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();
|
||||||
|
|
||||||
|
update_play_url();
|
||||||
|
|
||||||
|
// 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() {
|
||||||
|
this.set_bt(0.8);
|
||||||
|
};
|
||||||
|
remote_player.on_player_metadata = function(metadata) {
|
||||||
|
this.set_dar(0, 0);
|
||||||
|
this.set_fs("screen", 100);
|
||||||
|
}
|
||||||
|
remote_player.start();
|
||||||
|
|
||||||
|
// 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/Firefox/Safari/Opera浏览器，支持重试");
|
||||||
|
|
||||||
|
srs_log_disabled = true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
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 + "...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");
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
var hls_url = "http://" + ret.server + ":" + query.http_port + "/" + ret.app + "/" + ret.stream + ".m3u8";
|
||||||
|
|
||||||
|
$("#txt_play_realtime").text("RTMP低延时(点击打开)").attr("href", srs_player_rt_url).attr("target", "_blank");
|
||||||
|
$("#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");
|
||||||
|
}
|
||||||
|
function on_user_publish() {
|
||||||
|
if ($("#btn_publish").text() == "停止发布") {
|
||||||
|
srs_publisher.stop();
|
||||||
|
$("#btn_publish").text("发布视频");
|
||||||
|
//$("#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");
|
||||||
|
|
||||||
|
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 (realtime_player) {
|
||||||
|
// directly play the url for the realtime player.
|
||||||
|
realtime_player.stop();
|
||||||
|
realtime_player.play(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -4,21 +4,11 @@
|
||||||
<title>SRS</title>
|
<title>SRS</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
<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>
|
|
||||||
<style>
|
<style>
|
||||||
body{
|
body{
|
||||||
padding-top: 55px;
|
padding-top: 55px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
|
||||||
$(function(){
|
|
||||||
update_nav();
|
|
||||||
$("#main_frame").attr("src", "http://www.videolan.org/vlc/");
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="navbar navbar-fixed-top">
|
<div class="navbar navbar-fixed-top">
|
||||||
|
|
@ -49,4 +39,15 @@
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</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/srs.page.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function(){
|
||||||
|
update_nav();
|
||||||
|
$("#main_frame").attr("src", "http://www.videolan.org/vlc/");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue