866 lines
30 KiB
HTML
866 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>DEMO</title>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
||
<style>
|
||
body{
|
||
padding-top: 30px;
|
||
}
|
||
#my_modal_footer {
|
||
margin-top: -20px;
|
||
padding-top: 3px;
|
||
}
|
||
#main_modal {
|
||
margin-top: -60px;
|
||
}
|
||
#rtc_player_modal {
|
||
margin-top: -60px;
|
||
}
|
||
.div_play_time {
|
||
margin-top: 10px;
|
||
}
|
||
#pb_buffer_bg {
|
||
margin-top: -4px;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<img src=' '/>
|
||
<div class="navbar navbar-fixed-top">
|
||
<div class="navbar-inner">
|
||
<div class="container">
|
||
<a id="srs_index" class="brand" href="#">DEMO</a>
|
||
<div class="nav-collapse collapse">
|
||
<ul class="nav">
|
||
<li class="active" ><a id="nav_gb28181" href="srs_gb28181.html">GB28181</a></li>
|
||
<li>
|
||
<a href="https://github.com/ossrs/srs">
|
||
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs?style=social">
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div name="detect_flash">
|
||
<div id="main_flash_alert" class="alert alert-danger fade in hide">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong><p>Usage:</p></strong>
|
||
<p>
|
||
请点击下面的图标，启用Flash
|
||
</p>
|
||
<p>
|
||
若没有见到这个图标，Chrome浏览器请打开
|
||
<span class="text-info">chrome://settings/content/flash</span> 并修改为"Ask first"。
|
||
</p>
|
||
</div>
|
||
<div id="main_flash_hdr" class="hide">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-inline">
|
||
API地址与端口
|
||
<input type="text" id="txt_api_url" class="input-xxlarge">
|
||
<p></p>
|
||
|
||
</div>
|
||
|
||
<div>
|
||
<div class="row">
|
||
<div class="span4" id="divSipSessionList">
|
||
<span>设备列表</span><label id="lab_sip_session"></label>
|
||
<div style="overflow:scroll; height:330px; width:310px">
|
||
<ul id="channelList"></ul>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="span8">
|
||
<button class="btn btn-primary" id="btn_query_channel">获取设备</button>
|
||
<button class="btn btn-primary" id="btn_sip_bye">bye</button>
|
||
<button class="btn btn-primary" id="btn_sip_querycatalog" style="display:none;">querycatalog</button>
|
||
<div id="context2">
|
||
<div>
|
||
<pre id="video" style="overflow:scroll; height:280px"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p></p>
|
||
|
||
<div>
|
||
<div class="row">
|
||
<div class="span4" id="divMediaChannelList">
|
||
</div>
|
||
<div class="span8">
|
||
<div id="context2">
|
||
URL:<a id="gb28181ChannelId"></a>
|
||
<div>
|
||
<textarea class="span6" id="txt_rtc_url" rows="2"></textarea>
|
||
<button class="btn btn-primary" id="btn_rtc_play">RTC播放</button>
|
||
</div>
|
||
<div>
|
||
<div>Message</div>
|
||
<pre id="apiMessage" style="overflow:scroll; height:210px"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="main_content" class="hide">
|
||
<div id="main_modal" class="modal hide fade">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h3><a href="https://github.com/ossrs/srs">SrsFlvPlayer</a></h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div>
|
||
<video id="video_player" width="98%" autoplay controls></video>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer" id="my_modal_footer">
|
||
<div>
|
||
<div class="btn-group dropup">
|
||
<button class="btn btn-primary" id="btn_ptz_up"> 上↑ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_down"> 下↓ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_left"> ←左 </button>
|
||
<button class="btn btn-primary" id="btn_ptz_right"> 右→ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_zoomin"> 放大＋ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_zoomout"> 缩小－ </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="rtc_player_modal" class="modal hide fade">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h3><a href="https://github.com/ossrs/srs">RtcPlayer</a></h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<video id="rtc_media_player" width="100%" controls autoplay ></video>
|
||
</div>
|
||
<div class="modal-footer" id="my_modal_footer">
|
||
<div>
|
||
<div class="btn-group dropup">
|
||
<button class="btn btn-primary" id="btn_ptz_up_rtc"> 上↑ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_down_rtc"> 下↓ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_left_rtc"> ←左 </button>
|
||
<button class="btn btn-primary" id="btn_ptz_right_rtc"> 右→ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_zoomin_rtc"> 放大＋ </button>
|
||
<button class="btn btn-primary" id="btn_ptz_zoomout_rtc"> 缩小－ </button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<footer>
|
||
<p></p>
|
||
<p><a href="https://github.com/ossrs/srs">SRS Team © 2013</a></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
|
||
<script type="text/javascript" src="js/bootstrap.min.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.utility.js"></script>
|
||
<script type="text/javascript" src="js/winlin.utility.js"></script>
|
||
<script type="text/javascript">
|
||
$(function(){
|
||
$('#main_content').show();
|
||
autoLoadPage();
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
var srs_player = null;
|
||
var url = null;
|
||
|
||
var query = parse_query_string();
|
||
var query_host = query.host.split(':');
|
||
if (query_host && query_host.length == 2) {
|
||
$("#txt_api_url").val("http://" + query_host[0] + ":2020");
|
||
} else {
|
||
$("#txt_api_url").val("http://" + query.host + ":2020");
|
||
}
|
||
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");
|
||
}
|
||
|
||
function select_buffer(buffer_time) {
|
||
var bt = buffer_time;
|
||
var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
|
||
select_buffer_time(bt_id, bt);
|
||
}
|
||
function select_max_buffer(max_buffer_time) {
|
||
var mbt = max_buffer_time;
|
||
var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
|
||
select_max_buffer_time(mbt_id, mbt);
|
||
}
|
||
|
||
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");
|
||
|
||
select_max_buffer(srs_player.max_buffer_time);
|
||
}
|
||
|
||
var __active_mbt = null;
|
||
function select_max_buffer_time(mbt_id, max_buffer_time) {
|
||
srs_player.set_mbt(max_buffer_time);
|
||
|
||
if (__active_mbt) {
|
||
__active_mbt.removeClass("active");
|
||
}
|
||
|
||
__active_mbt = $(mbt_id).parent();
|
||
__active_mbt.addClass("active");
|
||
}
|
||
|
||
|
||
//格式化json显示
|
||
function syntaxHighlight(json) {
|
||
if (typeof json != 'string') {
|
||
json = JSON.stringify(json, undefined, 2);
|
||
}
|
||
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
|
||
var cls = 'number';
|
||
if (/^"/.test(match)) {
|
||
if (/:$/.test(match)) {
|
||
cls = 'key';
|
||
} else {
|
||
cls = 'string';
|
||
}
|
||
} else if (/true|false/.test(match)) {
|
||
cls = 'boolean';
|
||
} else if (/null/.test(match)) {
|
||
cls = 'null';
|
||
}
|
||
return '<span class="' + cls + '">' + match + '</span>';
|
||
});
|
||
}
|
||
|
||
function http_get(url){
|
||
var retdata = null;
|
||
console.log("GET", url);
|
||
$.ajax({
|
||
type : "GET",
|
||
async : false,
|
||
url : url,
|
||
contentType: "text/html",
|
||
data : "",
|
||
complete : function() {
|
||
},
|
||
error : function(ret) {
|
||
alert("GET 请求失败:" + url);
|
||
},
|
||
success : function(ret) {
|
||
console.log(ret);
|
||
retdata = ret;
|
||
}
|
||
});
|
||
return retdata;
|
||
}
|
||
|
||
function http_post(url, data){
|
||
var retdata = null;
|
||
console.log("POST", url);
|
||
$.ajax({
|
||
type : "POST",
|
||
async : false,
|
||
url : url,
|
||
contentType: "application/json",
|
||
data : JSON.stringify(data),
|
||
complete : function() {
|
||
},
|
||
error : function(ret) {
|
||
alert("POST 请求失败:" + url);
|
||
},
|
||
success : function(ret) {
|
||
console.log(ret);
|
||
retdata = ret;
|
||
}
|
||
});
|
||
return retdata;
|
||
}
|
||
|
||
function getParentIdById(id) {
|
||
for (let parentId in devices) {
|
||
let parentDevices = devices[parentId];
|
||
for (let idx in parentDevices) {
|
||
if (parentDevices[idx].id == id) {
|
||
return parentId;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
|
||
|
||
// request: {"device_id": "1", "channel_id": "1", "sub_stream": 0}
|
||
// response: {"code": 0, "data": {"channel_id": "1", "url": "webrtc://"}}
|
||
function channelOnClick(chidObj){
|
||
var chId = chidObj.text;
|
||
var parentId = getParentIdById(chId);
|
||
|
||
var body = {
|
||
"device_id": parentId,
|
||
"channel_id": chId,
|
||
"sub_stream": "0"
|
||
};
|
||
url = $("#txt_api_url").val();
|
||
var apiurl = url + "/srs-sip/v1/invite";
|
||
|
||
var ret = http_post(apiurl, body);
|
||
$('#sipSessionMessage').html(syntaxHighlight(ret));
|
||
|
||
if (ret == undefined || ret.code != 0) {
|
||
alert("invite请求失败");
|
||
return;
|
||
}
|
||
play(ret.data);
|
||
}
|
||
|
||
function play(data) {
|
||
$("#txt_rtc_url").val(data.url);
|
||
$("#btn_rtc_play").click();
|
||
}
|
||
|
||
function refreshGb28181ChList(data) {
|
||
$("#channelList").empty();
|
||
devices = {};
|
||
|
||
// 遍历数据，将设备信息按照parent_id进行分组
|
||
for (let idx in data) {
|
||
var device = data[idx];
|
||
var parent = device.parent_id;
|
||
var id = device.device_id;
|
||
|
||
// 如果该parent_id不存在在devices对象中，则创建一个新数组
|
||
if (!devices[parent]) {
|
||
devices[parent] = [];
|
||
}
|
||
|
||
// 将设备信息添加到对应的parent_id数组中
|
||
devices[parent].push({ id: id, ip: device.ip_address, name: device.name});
|
||
}
|
||
|
||
// 遍历devices对象，生成设备树
|
||
for (let parent in devices) {
|
||
var parentDevices = devices[parent];
|
||
var parentLi = "<li>" + parent + "<ul>";
|
||
|
||
// 遍历该parent_id下的设备信息
|
||
parentDevices.forEach(function(device) {
|
||
var id = device.id;
|
||
var title = device.name + "(" + device.ip + ")";
|
||
var childLi = "<li><a id='linkChannelId" + id + "' href='javascript:void(0)' title='" + title + "' onclick='channelOnClick(this)'>" + id + "</a></li>";
|
||
parentLi += childLi;
|
||
});
|
||
|
||
parentLi += "</ul></li>";
|
||
|
||
// 将生成的设备树添加到页面中
|
||
$("#channelList").append(parentLi);
|
||
}
|
||
|
||
}
|
||
|
||
// Async-await-promise based SRS RTC Player.
|
||
function SrsRtcPlayerAsync() {
|
||
var self = {};
|
||
|
||
// @see https://github.com/rtcdn/rtcdn-draft
|
||
// @url The WebRTC url to play with, for example:
|
||
// webrtc://r.ossrs.net/live/livestream
|
||
// or specifies the API port:
|
||
// webrtc://r.ossrs.net:11985/live/livestream
|
||
// or autostart the play:
|
||
// webrtc://r.ossrs.net/live/livestream?autostart=true
|
||
// or change the app from live to myapp:
|
||
// webrtc://r.ossrs.net:11985/myapp/livestream
|
||
// or change the stream from livestream to mystream:
|
||
// webrtc://r.ossrs.net:11985/live/mystream
|
||
// or set the api server to myapi.domain.com:
|
||
// webrtc://myapi.domain.com/live/livestream
|
||
// or set the candidate(ip) of answer:
|
||
// webrtc://r.ossrs.net/live/livestream?eip=39.107.238.185
|
||
// or force to access https API:
|
||
// webrtc://r.ossrs.net/live/livestream?schema=https
|
||
// or use plaintext, without SRTP:
|
||
// webrtc://r.ossrs.net/live/livestream?encrypt=false
|
||
// or any other information, will pass-by in the query:
|
||
// webrtc://r.ossrs.net/live/livestream?vhost=xxx
|
||
// webrtc://r.ossrs.net/live/livestream?token=xxx
|
||
self.play = async function(url) {
|
||
var conf = self.__internal.prepareUrl(url);
|
||
self.pc.addTransceiver("audio", {direction: "recvonly"});
|
||
self.pc.addTransceiver("video", {direction: "recvonly"});
|
||
|
||
var offer = await self.pc.createOffer();
|
||
await self.pc.setLocalDescription(offer);
|
||
var session = await new Promise(function(resolve, reject) {
|
||
// @see https://github.com/rtcdn/rtcdn-draft
|
||
var data = {
|
||
api: conf.apiUrl, streamurl: conf.streamUrl, clientip: null, sdp: offer.sdp
|
||
};
|
||
console.log("Generated offer: ", data);
|
||
|
||
$.ajax({
|
||
type: "POST", url: conf.apiUrl, data: JSON.stringify(data),
|
||
contentType:'application/json', dataType: 'json'
|
||
}).done(function(data) {
|
||
console.log("Got answer: ", data);
|
||
if (data.code) {
|
||
reject(data); return;
|
||
}
|
||
|
||
resolve(data);
|
||
}).fail(function(reason){
|
||
reject(reason);
|
||
});
|
||
});
|
||
await self.pc.setRemoteDescription(
|
||
new RTCSessionDescription({type: 'answer', sdp: session.sdp})
|
||
);
|
||
return session;
|
||
};
|
||
|
||
// Close the publisher.
|
||
self.close = function() {
|
||
self.pc.close();
|
||
};
|
||
|
||
// The callback when got remote stream.
|
||
self.onaddstream = function (event) {};
|
||
|
||
// Internal APIs.
|
||
self.__internal = {
|
||
defaultPath: '/rtc/v1/play/',
|
||
prepareUrl: function (webrtcUrl) {
|
||
var urlObject = self.__internal.parse(webrtcUrl);
|
||
|
||
// If user specifies the schema, use it as API schema.
|
||
var schema = urlObject.user_query.schema;
|
||
schema = schema ? schema + ':' : window.location.protocol;
|
||
|
||
var port = urlObject.port || 1985;
|
||
if (schema === 'https:') {
|
||
port = urlObject.port || 443;
|
||
}
|
||
|
||
// @see https://github.com/rtcdn/rtcdn-draft
|
||
var api = urlObject.user_query.play || self.__internal.defaultPath;
|
||
if (api.lastIndexOf('/') !== api.length - 1) {
|
||
api += '/';
|
||
}
|
||
|
||
apiUrl = schema + '//' + urlObject.server + ':' + port + api;
|
||
for (var key in urlObject.user_query) {
|
||
if (key !== 'api' && key !== 'play') {
|
||
apiUrl += '&' + key + '=' + urlObject.user_query[key];
|
||
}
|
||
}
|
||
// Replace /rtc/v1/play/&k=v to /rtc/v1/play/?k=v
|
||
var apiUrl = apiUrl.replace(api + '&', api + '?');
|
||
|
||
var streamUrl = urlObject.url;
|
||
|
||
return {apiUrl: apiUrl, streamUrl: streamUrl, schema: schema, urlObject: urlObject, port: port};
|
||
},
|
||
parse: function (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 = url.replace("rtmp://", "http://")
|
||
.replace("webrtc://", "http://")
|
||
.replace("rtc://", "http://");
|
||
|
||
var vhost = a.hostname;
|
||
var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
|
||
var stream = a.pathname.slice(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.slice(app.indexOf("?"));
|
||
app = app.slice(0, app.indexOf("?"));
|
||
|
||
if (params.indexOf("vhost=") > 0) {
|
||
vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
|
||
if (vhost.indexOf("&") > 0) {
|
||
vhost = vhost.slice(0, vhost.indexOf("&"));
|
||
}
|
||
}
|
||
}
|
||
|
||
// when vhost equals to server, and server is ip,
|
||
// the vhost is __defaultVhost__
|
||
if (a.hostname === vhost) {
|
||
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
|
||
if (re.test(a.hostname)) {
|
||
vhost = "__defaultVhost__";
|
||
}
|
||
}
|
||
|
||
// parse the schema
|
||
var schema = "rtmp";
|
||
if (url.indexOf("://") > 0) {
|
||
schema = url.slice(0, url.indexOf("://"));
|
||
}
|
||
|
||
var port = a.port;
|
||
if (!port) {
|
||
if (schema === 'http') {
|
||
port = 80;
|
||
} else if (schema === 'https') {
|
||
port = 443;
|
||
} else if (schema === 'rtmp') {
|
||
port = 1935;
|
||
}
|
||
}
|
||
|
||
var ret = {
|
||
url: url,
|
||
schema: schema,
|
||
server: a.hostname, port: port,
|
||
vhost: vhost, app: app, stream: stream
|
||
};
|
||
self.__internal.fill_query(a.search, ret);
|
||
|
||
// For webrtc API, we use 443 if page is https, or schema specified it.
|
||
if (!ret.port) {
|
||
if (schema === 'webrtc' || schema === 'rtc') {
|
||
if (ret.user_query.schema === 'https') {
|
||
ret.port = 443;
|
||
} else if (window.location.href.indexOf('https://') === 0) {
|
||
ret.port = 443;
|
||
} else {
|
||
// For WebRTC, SRS use 1985 as default API port.
|
||
ret.port = 1985;
|
||
}
|
||
}
|
||
}
|
||
|
||
return ret;
|
||
},
|
||
fill_query: function (query_string, obj) {
|
||
// pure user query object.
|
||
obj.user_query = {};
|
||
|
||
if (query_string.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// split again for angularjs.
|
||
if (query_string.indexOf("?") >= 0) {
|
||
query_string = query_string.split("?")[1];
|
||
}
|
||
|
||
var queries = query_string.split("&");
|
||
for (var i = 0; i < queries.length; i++) {
|
||
var elem = queries[i];
|
||
|
||
var query = elem.split("=");
|
||
obj[query[0]] = query[1];
|
||
obj.user_query[query[0]] = query[1];
|
||
}
|
||
|
||
// alias domain for vhost.
|
||
if (obj.domain) {
|
||
obj.vhost = obj.domain;
|
||
}
|
||
}
|
||
};
|
||
|
||
self.pc = new RTCPeerConnection(null);
|
||
self.pc.onaddstream = function (event) {
|
||
if (self.onaddstream) {
|
||
self.onaddstream(event);
|
||
}
|
||
};
|
||
|
||
return self;
|
||
}
|
||
|
||
var flvPlayer = null;
|
||
var hlsPlayer = null;
|
||
var devices = {};
|
||
|
||
var stopPlayers = function () {
|
||
if (flvPlayer) {
|
||
flvPlayer.destroy();
|
||
flvPlayer = null;
|
||
}
|
||
if (hlsPlayer) {
|
||
hlsPlayer.destroy();
|
||
hlsPlayer = null;
|
||
}
|
||
};
|
||
|
||
var hide_for_error = function () {
|
||
$('#main_flash_alert').show();
|
||
$('#main_info').hide();
|
||
$('#main_tips').hide();
|
||
$('#video_player').hide();
|
||
//$('#btn_play').hide();
|
||
|
||
stopPlayers();
|
||
};
|
||
|
||
var show_for_ok = function () {
|
||
$('#main_flash_alert').hide();
|
||
$('#main_info').show();
|
||
$('#main_tips').show();
|
||
$('#video_player').show();
|
||
//$('#btn_play').show();
|
||
};
|
||
|
||
|
||
/****
|
||
* The parameters for this page:
|
||
* schema, the protocol schema, rtmp or http.
|
||
* server, the ip of the url.
|
||
* port, the rtmp port of url.
|
||
* vhost, the vhost of url, can equals to server.
|
||
* app, the app of url.
|
||
* stream, the stream of url, can endwith .flv or .mp4 or nothing for RTMP.
|
||
* autostart, whether auto play the stream.
|
||
* buffer, the buffer time in seconds.
|
||
* extra params:
|
||
* shp_identify, hls+ param.
|
||
* for example:
|
||
* http://localhost:8088/players/srs_player.html?vhost=ossrs.net&app=live&stream=livestream&server=ossrs.net&port=1935&autostart=true&schema=rtmp
|
||
* http://localhost:8088/players/srs_player.html?vhost=ossrs.net&app=live&stream=livestream.flv&server=ossrs.net&port=8080&autostart=true&schema=http
|
||
*/
|
||
var autoLoadPage = function() {
|
||
var query = parse_query_string();
|
||
|
||
// get the vhost and port to set the default url.
|
||
// url set to: http://localhost:8080/live/livestream.flv
|
||
srs_init_flv("#txt_url", "#main_modal");
|
||
srs_init_flv("#txt_url", "#rtc_player_modal");
|
||
|
||
// consts for buffer and max buffer.
|
||
var bts = [0.1, 0.2, 0.3, 0.5, 0.8, 1, 2, 3, 4, 5, 6, 8, 10, 15, 20, 30];
|
||
var mbts = [0.6, 0.9, 1.2, 1.5, 2.4, 3, 6, 9, 12, 15, 18, 24, 30, 45, 60, 90];
|
||
|
||
// the play startup time.
|
||
var pst = new Date();
|
||
|
||
$("#main_modal").on("show", function(){
|
||
});
|
||
|
||
$("#main_modal").on("hide", function(){
|
||
|
||
});
|
||
|
||
if (true) {
|
||
for (var bt of bts) {
|
||
var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
|
||
|
||
var bt_fun = function(id, v){
|
||
$(bt_id).click(function(){
|
||
select_buffer_time(id, v);
|
||
|
||
// remember the chagned buffer.
|
||
if (Number(query.buffer) != srs_player.buffer_time) {
|
||
query.buffer = srs_player.buffer_time;
|
||
apply_url_change();
|
||
}
|
||
|
||
});
|
||
};
|
||
bt_fun(bt_id, bt);
|
||
}
|
||
}
|
||
if (true) {
|
||
for (var mbt of mbts) {
|
||
var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
|
||
|
||
var mbt_fun = function(id, v){
|
||
$(mbt_id).click(function(){
|
||
select_max_buffer_time(id, v);
|
||
});
|
||
};
|
||
mbt_fun(mbt_id, mbt);
|
||
}
|
||
}
|
||
|
||
if (true){
|
||
var time_query = function(){
|
||
$("#btn_query_channel").click();
|
||
setTimeout(function () {$("#btn_query_channel").click()}, 1000);
|
||
};
|
||
|
||
$("#btn_sip_bye").click(function(){
|
||
var text = $("#sipSessionId").text();
|
||
if (text.indexOf("-->") != -1) {
|
||
var str = text.split("-->");
|
||
id = str[0];
|
||
var str2 = str[1].split(":")
|
||
chid = str2[1];
|
||
|
||
url = $("#txt_api_url").val();
|
||
var apiurl = url + "/srs-sip/v1/gb28181?action=sip_bye&id=" + id + "&chid="+chid;
|
||
var ret = http_get(apiurl);
|
||
$('#sipSessionMessage').html(syntaxHighlight(ret));
|
||
|
||
if (ret != undefined && ret.code == 0){
|
||
time_query();
|
||
}
|
||
}
|
||
});
|
||
|
||
$("#btn_sip_querycatalog").click(function(){
|
||
var text = $("#sipSessionId").text();
|
||
if (text.indexOf("-->") != -1) {
|
||
var str = text.split("-->");
|
||
id = str[0];
|
||
var str2 = str[1].split(":")
|
||
chid = str2[0];
|
||
|
||
url = $("#txt_api_url").val();
|
||
var apiurl = url + "/srs-sip/v1/gb28181?action=sip_query_catalog&id=" + id;
|
||
var ret = http_get(apiurl);
|
||
$('#sipSessionMessage').html(syntaxHighlight(ret));
|
||
if (ret != undefined && ret.code == 0){
|
||
time_query();
|
||
}
|
||
}
|
||
});
|
||
|
||
$("#btn_query_channel").click(function(){
|
||
url = $("#txt_api_url").val();
|
||
var apiurl = url + "/srs-sip/v1/channels/"
|
||
var ret = http_get(apiurl);
|
||
$('#apiMessage').html(syntaxHighlight(ret));
|
||
|
||
if (ret != undefined && ret.code == 0){
|
||
refreshGb28181ChList(ret.data);
|
||
}
|
||
});
|
||
|
||
var call_ptz_cmd = function(cmd) {
|
||
var str = $("#gb28181ChannelId").text();
|
||
var str_array = str.split("@")
|
||
var chid = "";
|
||
var id = "";
|
||
if (str_array.length < 1){
|
||
return;
|
||
}
|
||
|
||
var speed = "136";
|
||
|
||
id = str_array[0];
|
||
chid = str_array[1];
|
||
|
||
url = $("#txt_api_url").val();
|
||
var apiurl = url + "/srs-sip/v1/gb28181?action=sip_ptz&id=" + id + "&chid="+chid+ "&ptzcmd="+cmd + "&speed=" + speed;
|
||
var ret = http_get(apiurl);
|
||
$('#apiMessage').html(syntaxHighlight(ret));
|
||
};
|
||
|
||
var ptz_cmd = ["up", "down", "right", "left", "zoomin", "zoomout"]
|
||
for (var i=0; i<ptz_cmd.length; i++){
|
||
var bt_fun = function(id, cmd){
|
||
$(bt_id).mousedown(function(){
|
||
call_ptz_cmd(cmd);
|
||
});
|
||
$(bt_id).mouseup(function(){
|
||
call_ptz_cmd("stop");
|
||
});
|
||
};
|
||
|
||
var bt_id = "#btn_ptz_"+ptz_cmd[i]+ "_rtc";
|
||
bt_fun(bt_id, ptz_cmd[i]);
|
||
|
||
bt_id = "#btn_ptz_"+ptz_cmd[i];
|
||
bt_fun(bt_id, ptz_cmd[i]);
|
||
}
|
||
|
||
var sdk = null; // Global handler to do cleanup when replaying.
|
||
var startPlay = function() {
|
||
$('#rtc_media_player').show();
|
||
|
||
// Close PC when user replay.
|
||
if (sdk) {
|
||
sdk.close();
|
||
}
|
||
|
||
sdk = new SrsRtcPlayerAsync();
|
||
sdk.onaddstream = function (event) {
|
||
console.log('Start play, event: ', event);
|
||
$('#rtc_media_player').prop('srcObject', event.stream);
|
||
};
|
||
|
||
// For example:
|
||
// webrtc://r.ossrs.net/live/livestream
|
||
var url = $("#txt_rtc_url").val();
|
||
sdk.play(url).then(function(session){
|
||
$('#sessionid').html(session.sessionid);
|
||
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
|
||
}).catch(function (reason) {
|
||
sdk.close();
|
||
$('#rtc_media_player').hide();
|
||
console.error(reason);
|
||
});
|
||
};
|
||
|
||
$("#btn_rtc_play").click(function(){
|
||
$('#rtc_media_player').width(srs_get_player_width);
|
||
$('#rtc_media_player').height(srs_get_player_height);
|
||
$("#rtc_player_modal").modal({show: true, keyboard: false});
|
||
|
||
startPlay();
|
||
});
|
||
|
||
|
||
$("#rtc_player_modal").on("hide", function(){
|
||
if (sdk) {
|
||
sdk.close();
|
||
}
|
||
});
|
||
|
||
}
|
||
};
|
||
</script>
|
||
</html>
|