kurento/kurento-backend
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Dashboard for 4 streams

Browse Source
This commit is contained in:
Artyom Abubakirov 2018-07-13 18:29:22 +05:00
parent 46b87fa702
commit 9bcdf905dd
7 changed files with 226 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
package-lock.json generated Normal file → Executable file
View File

@ -9,7 +9,7 @@
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.2.13.tgz",
"integrity": "sha1-5fHzkoxtlf2WVYw27D2dDeSm7Oo=",
"requires": {
"mime-types": "2.1.18",
"mime-types": "~2.1.6",
"negotiator": "0.5.3"
}
},
@ -33,7 +33,7 @@
"resolved": "https://registry.npmjs.org/async/-/async-2.0.1.tgz",
"integrity": "sha1-twnMAoCpw28J9FNr6CPIOKkEniU=",
"requires": {
"lodash": "4.17.10"
"lodash": "^4.8.0"
}
},
"backo2": {
@ -85,8 +85,8 @@
"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-1.2.1.tgz",
"integrity": "sha1-N75dNuHgZJIiHmjUdLGsWOUQy9c=",
"requires": {
"bindings": "1.2.1",
"nan": "2.10.0"
"bindings": "1.2.x",
"nan": "^2.0.5"
}
},
"callsite": {
@ -172,7 +172,7 @@
"cookie": "0.3.1",
"debug": "2.3.3",
"engine.io-parser": "1.3.2",
"ws": "1.1.5"
"ws": "~1.1.5"
},
"dependencies": {
"accepts": {
@ -180,7 +180,7 @@
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
"integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
"requires": {
"mime-types": "2.1.18",
"mime-types": "~2.1.11",
"negotiator": "0.6.1"
}
},
@ -223,7 +223,7 @@
"parsejson": "0.0.3",
"parseqs": "0.0.5",
"parseuri": "0.0.5",
"ws": "1.1.5",
"ws": "~1.1.5",
"xmlhttprequest-ssl": "1.5.3",
"yeast": "0.1.2"
},
@ -289,30 +289,30 @@
"resolved": "https://registry.npmjs.org/express/-/express-4.12.4.tgz",
"integrity": "sha1-j+wlECVbxrLlgQfEgjnA+jB8GqI=",
"requires": {
"accepts": "1.2.13",
"accepts": "~1.2.7",
"content-disposition": "0.5.0",
"content-type": "1.0.4",
"content-type": "~1.0.1",
"cookie": "0.1.2",
"cookie-signature": "1.0.6",
"debug": "2.2.0",
"depd": "1.0.1",
"debug": "~2.2.0",
"depd": "~1.0.1",
"escape-html": "1.0.1",
"etag": "1.6.0",
"etag": "~1.6.0",
"finalhandler": "0.3.6",
"fresh": "0.2.4",
"merge-descriptors": "1.0.0",
"methods": "1.1.2",
"on-finished": "2.2.1",
"parseurl": "1.3.2",
"methods": "~1.1.1",
"on-finished": "~2.2.1",
"parseurl": "~1.3.0",
"path-to-regexp": "0.1.3",
"proxy-addr": "1.0.10",
"proxy-addr": "~1.0.8",
"qs": "2.4.2",
"range-parser": "1.0.3",
"range-parser": "~1.0.2",
"send": "0.12.3",
"serve-static": "1.9.3",
"type-is": "1.6.16",
"serve-static": "~1.9.3",
"type-is": "~1.6.2",
"utils-merge": "1.0.0",
"vary": "1.0.1"
"vary": "~1.0.0"
}
},
"extend": {
@ -325,9 +325,9 @@
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.3.6.tgz",
"integrity": "sha1-2vnEFhsbBuABRmsUEd/baXO+E4s=",
"requires": {
"debug": "2.2.0",
"debug": "~2.2.0",
"escape-html": "1.0.1",
"on-finished": "2.2.1"
"on-finished": "~2.2.1"
}
},
"forwarded": {
@ -385,38 +385,43 @@
},
"kurento-client": {
"version": "github:Kurento/kurento-client-js#efb160e85a4b1f376307fe1979c9fbcb5f978393",
"from": "kurento-client@github:Kurento/kurento-client-js#efb160e85a4b1f376307fe1979c9fbcb5f978393",
"requires": {
"async": "2.0.1",
"async": "~2.0.1",
"error-tojson": "0.0.1",
"es6-promise": "4.2.4",
"extend": "3.0.1",
"inherits": "2.0.3",
"es6-promise": "^4.0.5",
"extend": "^3.0.0",
"inherits": "~2.0.3",
"kurento-client-core": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0",
"kurento-client-elements": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81",
"kurento-client-filters": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0",
"kurento-jsonrpc": "github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
"minimist": "1.2.0",
"minimist": "^1.2.0",
"promise": "7.1.1",
"promisecallback": "0.0.4",
"reconnect-ws": "github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a"
}
},
"kurento-client-core": {
"version": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0"
"version": "github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0",
"from": "kurento-client-core@github:Kurento/kurento-client-core-js#2160f8e6938f138b52b72a5c5c354d1e5fce1ca0"
},
"kurento-client-elements": {
"version": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81"
"version": "github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81",
"from": "kurento-client-elements@github:Kurento/kurento-client-elements-js#cbd1ff67fbf0faddc9f6f266bb33e449bc9e1f81"
},
"kurento-client-filters": {
"version": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0"
"version": "github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0",
"from": "kurento-client-filters@github:Kurento/kurento-client-filters-js#51308da53e432a2db9559dcdb308d87951417bf0"
},
"kurento-jsonrpc": {
"version": "github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
"from": "kurento-jsonrpc@github:Kurento/kurento-jsonrpc-js#7d07108feb18dae90b4d08567afd28db0b2138a6",
"requires": {
"bufferutil": "1.2.1",
"inherits": "2.0.3",
"utf-8-validate": "1.2.2",
"ws": "1.1.5"
"bufferutil": "1.2.x",
"inherits": "^2.0.1",
"utf-8-validate": "1.2.x",
"ws": "^1.1.1"
}
},
"lodash": {
@ -454,7 +459,7 @@
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
"integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
"requires": {
"mime-db": "1.33.0"
"mime-db": "~1.33.0"
}
},
"minimist": {
@ -505,7 +510,7 @@
"resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.3.tgz",
"integrity": "sha1-q343WfIJ7OmUN5c/fQ8fZK4OZKs=",
"requires": {
"better-assert": "1.0.2"
"better-assert": "~1.0.0"
}
},
"parseqs": {
@ -513,7 +518,7 @@
"resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
"integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
"requires": {
"better-assert": "1.0.2"
"better-assert": "~1.0.0"
}
},
"parseuri": {
@ -521,7 +526,7 @@
"resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
"integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
"requires": {
"better-assert": "1.0.2"
"better-assert": "~1.0.0"
}
},
"parseurl": {
@ -539,7 +544,7 @@
"resolved": "https://registry.npmjs.org/promise/-/promise-7.1.1.tgz",
"integrity": "sha1-SJZUxpJha4qlWwck+oCbt9tJxb8=",
"requires": {
"asap": "2.0.6"
"asap": "~2.0.3"
}
},
"promisecallback": {
@ -552,7 +557,7 @@
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.0.10.tgz",
"integrity": "sha1-DUCoL4Afw1VWfS7LZe/j8HfxIcU=",
"requires": {
"forwarded": "0.1.2",
"forwarded": "~0.1.0",
"ipaddr.js": "1.0.5"
}
},
@ -568,15 +573,17 @@
},
"reconnect-core": {
"version": "github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
"from": "reconnect-core@github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
"requires": {
"backoff": "2.3.0"
"backoff": "~2.3.0"
}
},
"reconnect-ws": {
"version": "github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a",
"from": "reconnect-ws@github:KurentoForks/reconnect-ws#f287385d75861654528c352e60221f95c9209f8a",
"requires": {
"reconnect-core": "github:KurentoForks/reconnect-core#921d43e91578abb2fb2613f585c010c1939cf734",
"websocket-stream": "0.5.1"
"websocket-stream": "~0.5.1"
}
},
"send": {
@ -584,16 +591,16 @@
"resolved": "https://registry.npmjs.org/send/-/send-0.12.3.tgz",
"integrity": "sha1-zRLcWP3iHk+RkCs5sv2gWnptm9w=",
"requires": {
"debug": "2.2.0",
"depd": "1.0.1",
"debug": "~2.2.0",
"depd": "~1.0.1",
"destroy": "1.0.3",
"escape-html": "1.0.1",
"etag": "1.6.0",
"etag": "~1.6.0",
"fresh": "0.2.4",
"mime": "1.3.4",
"ms": "0.7.1",
"on-finished": "2.2.1",
"range-parser": "1.0.3"
"on-finished": "~2.2.1",
"range-parser": "~1.0.2"
}
},
"serve-static": {
@ -602,7 +609,7 @@
"integrity": "sha1-X42gcyOtOF/z3FQfGnkXsuQ261c=",
"requires": {
"escape-html": "1.0.1",
"parseurl": "1.3.2",
"parseurl": "~1.3.0",
"send": "0.12.3",
"utils-merge": "1.0.0"
}
@ -613,7 +620,7 @@
"integrity": "sha1-L37O3DORvy1cc+KR/iM+bjTU3QA=",
"requires": {
"debug": "2.3.3",
"engine.io": "1.8.5",
"engine.io": "~1.8.4",
"has-binary": "0.1.7",
"object-assign": "4.1.0",
"socket.io-adapter": "0.5.0",
@ -669,7 +676,7 @@
"component-bind": "1.0.0",
"component-emitter": "1.2.1",
"debug": "2.3.3",
"engine.io-client": "1.8.5",
"engine.io-client": "~1.8.4",
"has-binary": "0.1.7",
"indexof": "0.0.1",
"object-component": "0.0.3",
@ -730,7 +737,7 @@
"integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
"requires": {
"media-typer": "0.3.0",
"mime-types": "2.1.18"
"mime-types": "~2.1.18"
}
},
"ultron": {
@ -743,8 +750,8 @@
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-1.2.2.tgz",
"integrity": "sha1-i7hxpHQeCFxwSHynrNvX1tNgKes=",
"requires": {
"bindings": "1.2.1",
"nan": "2.4.0"
"bindings": "~1.2.1",
"nan": "~2.4.0"
},
"dependencies": {
"nan": {
@ -770,8 +777,8 @@
"integrity": "sha1-YizR8FZvuEzgpNb4VFJvPcTXDkg=",
"requires": {
"isbuffer": "0.0.0",
"through": "2.3.8",
"ws": "0.4.32"
"through": "~2.3.4",
"ws": "~0.4.30"
},
"dependencies": {
"nan": {
@ -784,10 +791,10 @@
"resolved": "https://registry.npmjs.org/ws/-/ws-0.4.32.tgz",
"integrity": "sha1-eHphVEFPPJntg8V3IVOyD+sM7DI=",
"requires": {
"commander": "2.1.0",
"nan": "1.0.0",
"options": "0.0.6",
"tinycolor": "0.0.1"
"commander": "~2.1.0",
"nan": "~1.0.0",
"options": ">=0.0.5",
"tinycolor": "0.x"
}
}
}
@ -797,8 +804,8 @@
"resolved": "https://registry.npmjs.org/ws/-/ws-1.1.5.tgz",
"integrity": "sha512-o3KqipXNUdS7wpQzBHSe180lBGO60SoK0yVo3CYJgb2MkobuWuBX6dhkYP5ORCLd55y+SaflMOV5fqAB53ux4w==",
"requires": {
"options": "0.0.6",
"ultron": "1.0.2"
"options": ">=0.0.5",
"ultron": "1.0.x"
}
},
"wtf-8": {

2
static/css/dashboard.css Executable file
View File

@ -0,0 +1,2 @@
.dashboard{min-height:100vh;min-width:100%}.dashboard--elem{position:relative;border:1px dashed gainsboro;width:50%;float:left;height:50vh;background-image:url('../img/dragdrop.png');background-repeat:no-repeat;background-position:center center;background-size:100px 100px}.dashboard--elem.small{display:none}.dashboard--elem.small--panel{display:none}.dashboard--elem.fullscreen{display:block !important;height:100vh !important;width:100% !important}.dashboard--elem--panel{z-index:999;position:absolute;left:15px;top:15px;background-color:black;border-radius:15px;color:white;text-align:center;padding:10px}.dashboard--elem--panel span{cursor:pointer;margin-left:10px}.dashboard--elem--panel span:first-child{margin-left:0}
/*# sourceMappingURL=dashboard.css.map */

1
static/css/dashboard.css.map Executable file
View File

@ -0,0 +1 @@
{"version":3,"sources":["dashboard.less"],"names":[],"mappings":"AAEA,WACI,iBACA,cAAA,CACA,iBACI,kBACA,4BACA,UACA,WACA,YACA,4CACA,4BACA,kCACA,2BAAA,CAEA,uBACI,YAAA,CACA,8BACI,YAAA,CAIR,4BACI,yBACA,wBACA,qBAAA,CAGJ,wBACI,YACA,kBACA,UACA,SACA,uBACA,mBACA,YACA,kBACA,YAAA,CATJ,6BAcQ,eACA,gBAAA,CAJA,yCACI,aAAA,CAAA","file":"to.css"}

49
static/css/dashboard.less Executable file
View File

@ -0,0 +1,49 @@
//autoprefixer: true, sourceMap: true, compress: true
.dashboard {
min-height: 100vh;
min-width: 100%;
&--elem{
position: relative;
border: 1px dashed gainsboro;
width: 50%;
float: left;
height: 50vh;
background-image: url('../img/dragdrop.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100px 100px;
&.small {
display: none;
&--panel{
display: none;
}
}
&.fullscreen {
display: block!important;
height: 100vh!important;
width: 100%!important;
}
&--panel{
z-index: 999;
position: absolute;
left: 15px;
top: 15px;
background-color: black;
border-radius: 15px;
color:white;
text-align: center;
padding: 10px;
span{
&:first-child{
margin-left: 0px;
}
cursor: pointer;
margin-left: 10px;
}
}
}
}

25
static/dashboard.html Executable file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/dashboard.css">
<script src="js/dashboard.js"></script>
</head>
<body>
<div class="dashboard">
<div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
<div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
<div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
<div ondragover="return false" ondragenter="return false" class="dashboard--elem"></div>
</div>
</body>
</html>

BIN
static/img/dragdrop.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

81
static/js/dashboard.js Executable file
View File

@ -0,0 +1,81 @@
$( document ).ready(() => {
var counter = 0;
function generatePanel(i) {
return '<div class="dashboard--elem--panel">' +
'<span id="full' + i + '"><i class="glyphicon glyphicon-fullscreen"></i></span> ' +
'<span id="reload' + i +'"><i class="glyphicon glyphicon-repeat"></i></span>' +
'<span id="close' + i + '"><i class="glyphicon glyphicon-remove"></i></span> ' +
'</div>';
}
// add event listeners
function bindEvents(id) {
$( '#close' + id)[0].addEventListener('click', streamClose);
$( '#reload' + id)[0].addEventListener('click', streamReload);
$( '#full' + id)[0].addEventListener('click', streamFull);
}
// close frame with stream
function streamClose(e) {
e.preventDefault();
e.stopPropagation();
$(this)[0].removeEventListener('click', streamClose);
let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
parent.empty();
if(parent.hasClass('fullscreen')){
parent.removeClass('fullscreen');
$('.dashboard--elem').removeClass('hide');
}
}
// reload stream
function streamReload(e) {
e.preventDefault();
e.stopPropagation();
let elem = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
let idStr = $(this).attr('id');
let id = parseInt(idStr.match(/(\d+)$/)[0]);
let html = elem.html();
elem.empty();
elem.html(html);
bindEvents(id);
}
function streamFull(e) {
e.preventDefault();
e.stopPropagation();
let parent = $(this).parent('.dashboard--elem--panel').parent('.dashboard--elem');
if(parent.hasClass('fullscreen')){
parent.removeClass('fullscreen');
$('.dashboard--elem').removeClass('hide');
} else {
$('.dashboard--elem').addClass('hide');
parent.addClass('fullscreen');
}
}
$('.dashboard--elem').on('drop', function (e) {
console.log('drop');
e.preventDefault();
let target = e.target;
let url = e.originalEvent.dataTransfer.getData('URL');
if(!url || url.indexOf('https://gto.to/?r=') === -1){
return false;
}
$(target).empty();
let panel = generatePanel(counter);
$( this ).append( panel + '<iframe src="' + url + '" width="100%" height="100%" align="center">\n' +
' Iframe is not supported\n' +
' </iframe>' );
bindEvents(counter);
counter++;
return false;
});
});