mirror of
https://github.com/aler9/rtsp-simple-server
synced 2025-09-26 19:51:26 +08:00
102 lines
2.0 KiB
HTML
102 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: 'Arial', sans-serif;
|
|
}
|
|
#video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgb(30, 30, 30);
|
|
}
|
|
#message {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: white;
|
|
pointer-events: none;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
text-shadow: 0 0 5px black;
|
|
}
|
|
</style>
|
|
<script defer src="./reader.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<video id="video"></video>
|
|
<div id="message"></div>
|
|
|
|
<script>
|
|
|
|
const video = document.getElementById('video');
|
|
const message = document.getElementById('message');
|
|
let defaultControls = false;
|
|
|
|
const setMessage = (str) => {
|
|
if (str !== '') {
|
|
video.controls = false;
|
|
} else {
|
|
video.controls = defaultControls;
|
|
}
|
|
message.innerText = str;
|
|
};
|
|
|
|
const parseBoolString = (str, defaultVal) => {
|
|
str = (str || '');
|
|
|
|
if (['1', 'yes', 'true'].includes(str.toLowerCase())) {
|
|
return true;
|
|
}
|
|
if (['0', 'no', 'false'].includes(str.toLowerCase())) {
|
|
return false;
|
|
}
|
|
return defaultVal;
|
|
};
|
|
|
|
const loadAttributesFromQuery = () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
video.controls = parseBoolString(params.get('controls'), true);
|
|
video.muted = parseBoolString(params.get('muted'), true);
|
|
video.autoplay = parseBoolString(params.get('autoplay'), true);
|
|
video.playsInline = parseBoolString(params.get('playsinline'), true);
|
|
defaultControls = video.controls;
|
|
};
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
loadAttributesFromQuery();
|
|
|
|
new MediaMTXWebRTCReader({
|
|
url: new URL('whep', window.location.href) + window.location.search,
|
|
onError: (err) => {
|
|
setMessage(err);
|
|
},
|
|
onTrack: (evt) => {
|
|
setMessage('');
|
|
video.srcObject = evt.streams[0];
|
|
},
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|