hsai/im-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导入数据库表和音视频demo

Browse Source
This commit is contained in:
rowger
2023-09-14 14:59:57 +08:00
parent c0ca154d31
commit 736c5376e0
157 changed files with 11044 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
media-server-demo-node/www/broadcast/index.html Normal file
View File

@@ -0,0 +1,200 @@
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<style>
html {
zoom: 90%;
}
body {
background: #e2e1e0;
text-align: center;
margin: 0px;
padding: 0px;
font-size: 9px;
color: #555;
font-family: Roboto;
text-align: -webkit-center;
}
table {
margin: 10px;
position: relative;
left: -40px;
}
video {
object-fit: cover;
float: left;
background: #fff;
border-radius: 2px;
display: inline-block;
margin: 1rem;
position: relative;
width: 420px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.5s cubic-bezier(.25,.8,.25,1);
padding:1px;
bottom: 0px;
height: 315px;
}
#container {
top: 10px;
left: 10px;
margin: 0px;
padding: 0px;
width: 900px;
}
.container-video {
width: 50%;
float: left;
display: inline-block;
position: relative;
font-size: 24px;
top: 5px;
margin-bottom: 10px;
}
.gaugeChartContainer {
position: relative;
width: 190px;
height: 120px;
float: left;
padding: 10px;
}
.gaugeChart {
position: relative;
text-align: center;
}
.gaugeChart canvas {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.gaugeChartLabel {
display: inline-block;
position: absolute;
float: left;
left: 0;
top: 55px;
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
z-index: 1;
text-shadow: #333 0px 0px 2px;
}
.gaugeChartContainer {
position: relative;
font-size: 9px;
}
.gaugeChartTitle {
display: inline-block;
position: absolute;
float: left;
top: 0px;
left: 0;
width: 100%;
text-align: center;
color: #888;
font-weight: bold;
font-size: 12px;
}
.gaugeChartMin {
display: inline-block;
position: absolute;
float: left;
left: 0;
bottom: 10%;
width: 92%;
margin-left: 8%;
text-align: left;
color: #888;
font-weight: bold;
}
.gaugeChartMax {
display: inline-block;
position: absolute;
float: left;
left: 0;
bottom: 10%;
width: 95%;
margin-right: 5%;
text-align: right;
color: #888;
font-weight: bold;
}
td {
margin: 5px;
padding: 5px;
text-align: center;
}
.ready-dialog
{
width: 780px;
text-align: left;
}
.ready-dialog p
{
color: black;
font-size: 12pt;
}
.ready-dialog code
{
font-size: 12pt;
}
</style>
<script src="../js/gauge.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div class="container-video">REMOTE
<video id="remote"></video>
</div>
<dialog class="ready-dialog mdl-dialog">
<h4 class="mdl-dialog__title">Ready to test H264 broadcasting?</h4>
<div class="mdl-dialog__content">
<p>
This demo allows you to test the streaming capabilities of the Medooze Media Server.
</p>
<p>
You will need to open an mp4 file with VLC and start streaming it with:
<pre>
<code>
:sout=#duplicate{dst=rtp{dst=your_ip_address,port=5004,sap,name=sergio},dst=display}
:no-sout-audio
:sout-vide
:sout-keep
</code>
</pre>
</p>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="ready mdl-button mdl-button mdl-button--raised mdl-button--accent">Ready!</button>
</div>
</dialog>
</body>
</html>
<script src="js/broadcast.js" type="text/javascript"></script>