Commit 4141b310 authored by Jakub Adam's avatar Jakub Adam
Browse files

Initial revision of web-based player screen

parent 094d657e
......@@ -72,6 +72,12 @@ http_cb (SoupServer *server, SoupMessage *msg, const char *path,
if (g_str_has_suffix(path, ".js")) {
soup_message_headers_append(msg->response_headers,
"Content-Type", "text/javascript");
} else if (g_str_has_suffix(path, ".css")) {
soup_message_headers_append(msg->response_headers,
"Content-Type", "text/css");
} else if (g_str_has_suffix(path, ".svg")) {
soup_message_headers_append(msg->response_headers,
"Content-Type", "image/svg+xml");
}
soup_message_set_status (msg, SOUP_STATUS_OK);
......
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 192 192"
height="192"
width="192"
xml:space="preserve"
id="svg2"
version="1.1"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs6"><clipPath
id="clipPath26"
clipPathUnits="userSpaceOnUse"><path
id="path24"
d="M 0,144 H 144 V 0 H 0 Z" /></clipPath></defs><g
transform="matrix(1.3333333,0,0,-1.3333333,0,192)"
id="g10"><g
transform="translate(12.646,37.7319)"
id="g12"><path
id="path14"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 v 68.536 l 59.354,34.268 59.354,-34.268 V 0 L 59.354,-34.268 Z" /></g><g
transform="translate(72,144)"
id="g16"><path
id="path18"
style="fill:#5549a7;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 -62.354,-36 v -72 L 0,-144 l 62.354,36 v 72 z m -56.354,-104.536 v 65.072 L 0,-6.928 56.354,-39.464 v -65.072 L 0,-137.072 Z" /></g><g
id="g20"><g
clip-path="url(#clipPath26)"
id="g22"><g
transform="translate(84.4536,54.7056)"
id="g28"><path
id="path30"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 C -0.127,2.577 0.995,8.581 3.572,8.014 4.669,7.772 4.371,6.258 4.011,4.62 3.528,2.412 2.691,0.003 2.691,0.003 c 0,0 3.145,-0.126 3.08,0 C 6.086,3.961 6.919,8.274 9.231,7.95 11.147,7.684 8.688,0.003 8.688,0.003 h 2.862 c -0.104,1.302 0.599,4.336 0.994,6.528 0.392,2.196 -0.446,3.155 -2.212,3.171 C 8.565,9.72 6.818,8.179 6.818,8.179 6.888,9.497 5.147,9.706 5.147,9.706 3.288,9.824 1.506,8.572 1.506,8.572 l 0.163,0.969 h -2.797 c 0,0 -0.14,-1.541 -0.708,-4.355 C -2.399,2.372 -3.159,0.003 -3.159,0.003 Z" /></g><g
transform="translate(104.1904,60.1924)"
id="g32"><path
id="path34"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 h -2.928 c 0,2.023 1.618,3.549 2.722,3.008 C 0.796,2.542 0,0 0,0 m -0.561,4.292 c -3.835,0 -5.545,-2.709 -5.545,-5.475 0,-2.765 1.633,-4.588 4.967,-4.588 1.566,0 2.452,1.445 2.452,1.445 0,0 0.05,0.397 -0.245,0.231 -0.295,-0.164 -1.102,-0.51 -2.154,-0.51 -1.053,0 -2.19,1.001 -2.19,3.484 H 2.76 c 0.314,1.006 0.515,5.413 -3.321,5.413" /></g><g
transform="translate(68.165,60.1924)"
id="g36"><path
id="path38"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 h -2.927 c 0,2.023 1.366,3.333 2.468,2.79 C 0.543,2.325 0,0 0,0 m -0.56,4.292 c -3.835,0 -5.545,-2.709 -5.545,-5.475 0,-2.765 1.634,-4.588 4.966,-4.588 1.565,0 2.453,1.445 2.453,1.445 0,0 0.05,0.397 -0.245,0.231 -0.296,-0.164 -1.103,-0.51 -2.155,-0.51 -1.053,0 -2.19,1.001 -2.19,3.484 H 2.76 c 0.314,1.006 0.514,5.413 -3.32,5.413" /></g><g
transform="translate(110.5483,54.5527)"
id="g40"><path
id="path42"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 h -3.092 c 0,0 1.804,6.483 1.962,9.662 -0.027,-0.025 2.684,0 2.684,0 0,0 -0.234,-0.713 -0.337,-1.34 0.765,0.848 1.026,1.611 3.106,1.611 0.028,0 0,-2.682 0,-2.682 0,0 -1.942,0.482 -2.641,-0.217 C 0.985,6.338 0.236,5.777 0,0" /></g><g
transform="translate(57.1699,54.5527)"
id="g44"><path
id="path46"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 h -3.093 c 0,0 1.806,6.483 1.963,9.662 -0.028,-0.025 2.681,0 2.681,0 0,0 -0.233,-0.713 -0.332,-1.34 0.764,0.848 1.025,1.611 3.105,1.611 0.027,0 0,-2.682 0,-2.682 0,0 -1.943,0.482 -2.639,-0.217 C 0.984,6.338 0.238,5.777 0,0" /></g><g
transform="translate(53.3975,67.5493)"
id="g48"><path
id="path50"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 -2.528,-0.877 -0.583,-2.355 h -1.611 v -1.55 h 1.273 c 0,0 -1.357,-4.857 -1.103,-6.34 0.255,-1.614 1.825,-1.952 2.758,-1.909 0.933,0.042 1.188,0.719 1.144,0.976 -0.041,0.253 -1.315,-0.243 -1.441,0.9 -0.085,0.678 1.058,6.373 1.058,6.373 h 1.995 v 1.55 h -1.568 z" /></g><g
transform="translate(76.8496,56.8726)"
id="g52"><path
id="path54"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 C -0.47,-1.241 -2.222,-1.052 -2.325,-0.174 -2.703,2.766 0.33,2.548 0.33,2.548 0.33,2.548 0.472,1.243 0,0 m 2.91,-2.169 c 0.373,0.31 0.122,0.928 -0.201,1.002 -0.366,0.757 0.762,5.192 0.762,6.406 0,1.213 -2.036,3.648 -6.235,1.357 C -3.17,6.338 -3.021,5.915 -2.92,5.774 -2.82,5.63 -2.633,5.536 -2.544,5.63 -2.15,6.061 -0.433,6.511 0.374,5.662 0.925,5.153 0.902,4.168 0.519,3.788 0.051,3.746 -4.547,3.882 -5.097,0.954 c -0.951,-5.198 4.872,-2.459 5.173,-2.248 0.303,0.212 0.268,-0.614 0.757,-0.961 1.328,-0.117 1.812,-0.132 2.077,0.086" /></g><g
transform="translate(46.248,61.4556)"
id="g56"><path
id="path58"
style="fill:#878989;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 0.879,1.484 c 0,0 -0.717,1.526 -2.833,1.526 -2.117,0 -3.338,-1.527 -3.338,-3.337 0,-1.812 4.029,-3.175 3.054,-4.966 -1.629,-1.67 -3.347,1.053 -3.315,1.23 C -5.677,-4.239 -6.518,-5.4 -6.477,-5.4 -6.273,-5.807 -5.534,-7.098 -3.176,-7.127 -1.221,-7.15 -0.042,-5.7 0,-3.908 0.042,-1.508 -3.46,-0.286 -3.5,0.811 -3.541,1.91 -1.18,3.173 0,0" /></g><g
transform="translate(36.397,61.0591)"
id="g60"><path
id="path62"
style="fill:#110f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -0.257,-1.139 -1.049,-1.938 -1.767,-1.775 -0.718,0.162 -1.091,1.22 -0.835,2.362 0.259,1.144 1.05,1.939 1.769,1.777 C -0.115,2.201 0.259,1.143 0,0 m -4.313,-6.073 c 2.792,-0.505 3.915,0.135 4.108,-1.289 0.081,-1.389 -1.097,-1.787 -2.47,-1.871 -1.371,-0.084 -2.371,0.608 -2.427,1.5 -0.053,0.89 0.726,0.798 0.789,1.66 M 5.237,3.933 C 4.86,4.287 4.576,3.815 3.728,3.46 2.878,3.106 2.598,3.153 1.75,3.27 0.356,3.58 -2.09,3.484 -2.732,3.176 -7.026,1.453 -4.725,-1.739 -4.023,-2.376 c -0.006,0 -1.047,-0.548 -1.198,-1.408 -0.196,-1.106 0.313,-1.707 0.329,-1.72 -1.402,-0.073 -2.304,-1.485 -2.088,-2.64 0.235,-1.246 1.718,-2.237 3.843,-2.245 4.49,-0.099 4.722,2.773 4.722,2.773 0.614,3.492 -2.347,3.653 -4.457,3.49 -0.765,0.682 -0.168,1.317 -0.2,1.317 7.131,-0.168 5.336,4.589 5.336,4.589 1.202,0.295 3.563,1.586 2.973,2.153" /></g><g
transform="translate(74.0776,99.8608)"
id="g64"><path
id="path66"
style="fill:#ee2934;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -3.718,0 -9.166,3.035 -14.475,3.035 -5.305,0 -8.475,-3.035 -9.027,-3.446 -0.549,-0.415 -0.897,-2 0.758,-1.514 1.654,0.483 3.034,0.483 5.653,0.483 2.62,0 8.89,-3.587 15.236,-3.587 6.337,0 11.643,4.895 12.815,6.619 1.173,1.72 0.072,2.271 -0.829,1.859 C 9.236,3.035 3.449,0 0,0" /></g><g
transform="translate(90.2456,90.4214)"
id="g68"><path
id="path70"
style="fill:#389d3d;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -3.909,0 -9.631,3.034 -15.206,3.034 -5.573,0 -8.902,-3.034 -9.484,-3.45 -0.581,-0.411 -0.941,-1.995 0.794,-1.515 1.743,0.482 3.19,0.482 5.939,0.482 2.751,0 9.341,-3.584 16.002,-3.584 6.663,0 12.236,4.895 13.471,6.617 1.229,1.725 0.07,2.274 -0.871,1.86 C 9.706,3.034 3.622,0 0,0" /></g><g
transform="translate(67.7451,80.0029)"
id="g72"><path
id="path74"
style="fill:#4345a3;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -4.054,0 -9.985,3.275 -15.769,3.275 -5.78,0 -9.236,-3.275 -9.837,-3.721 -0.602,-0.449 -0.977,-2.158 0.824,-1.637 1.803,0.522 3.304,0.522 6.161,0.522 2.852,0 9.683,-3.873 16.593,-3.873 6.908,0 12.692,5.283 13.968,7.144 1.276,1.862 0.078,2.457 -0.902,2.014 C 10.063,3.275 3.755,0 0,0" /></g><g
transform="translate(77.5571,32.3555)"
id="g76"><path
id="path78"
style="fill:#5549a7;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -2.446,-0.004 -4.425,-1.99 -4.419,-4.435 0.002,-2.446 1.988,-4.424 4.435,-4.42 2.444,0.004 4.422,1.989 4.419,4.436 C 4.43,-1.975 2.444,0.004 0,0 m 0.013,-7.277 c -1.575,-0.002 -2.852,1.27 -2.855,2.844 -0.003,1.574 1.271,2.851 2.845,2.853 1.572,0.004 2.851,-1.27 2.853,-2.842 0.003,-1.575 -1.271,-2.853 -2.843,-2.855" /></g><g
transform="translate(70.5649,30.1851)"
id="g80"><path
id="path82"
style="fill:#5549a7;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 -1.117,-1.12 1.25,-1.174 -1.236,-1.168 1.12,-1.117 2.281,2.288 z" /></g><g
transform="translate(66.4624,23.4312)"
id="g84"><path
id="path86"
style="fill:#9a9a96;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -1.104,-0.002 -2.106,0.378 -2.977,1.135 -0.977,0.851 -1.475,1.975 -1.477,3.339 -0.002,1.211 0.444,2.264 1.327,3.13 0.872,0.861 1.938,1.299 3.166,1.301 C 1.258,8.907 2.318,8.468 3.189,7.6 L 2.036,6.442 C 1.475,7.001 0.823,7.273 0.042,7.271 -0.754,7.27 -1.416,6.998 -1.982,6.439 -2.547,5.884 -2.82,5.242 -2.819,4.478 -2.817,3.592 -2.519,2.903 -1.905,2.369 -1.333,1.873 -0.711,1.632 -0.002,1.633 0.806,1.634 1.477,1.906 2.047,2.464 L 3.189,1.294 C 2.312,0.438 1.24,0.001 0,0" /></g></g></g></g></svg>
\ No newline at end of file
......@@ -2,13 +2,26 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<center>
HLS: <video id="hls_video" autoplay></video>
WebRTC: <video id="webrtc_video" autoplay></video>
</center>
<div id="header">
<img src="COLLABORA_01_MONO.png">
</div>
<div id="videos">
<div class="display_container">
<video id="hls_video" autoplay></video>
<div>HLS</div>
</div>
<div class="display_container">
<video id="webrtc_video" autoplay></video>
<div>WebRTC</div>
</div>
</div>
<div id="footer">
<img src="gStreamer.svg">
</div>
<script type="module">
import * as mss from './mss.js'
......
......@@ -3,5 +3,8 @@
<gresource prefix="/">
<file>index.html</file>
<file>mss.js</file>
<file>style.css</file>
<file>COLLABORA_01_MONO.png</file>
<file>gStreamer.svg</file>
</gresource>
</gresources>
* {
box-sizing: border-box;
}
body {
background-color: #5c3dcc;
display: flex;
flex-flow: column;
font-family: Karla;
}
body, html {
height: 100%;
margin: 0;
padding: 8px;
}
#header > img {
max-width: 50%;
}
#videos {
display: flex;
flex-flow: row;
/*background-color: #ced0d2;*/
}
#videos > div {
position: relative;
width: 50%;
}
video + div {
position: absolute;
right: 0;
bottom: 0;
font-size: 60px;
margin: 10px;
color: #ced0d2;
text-shadow: 2px 2px #3c3c3e;
}
video {
width: 100%;
}
#header, #footer {
position: relative;
flex-grow: 1;
}
#footer > img {
position: absolute;
right: 0;
bottom: 0;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment