mirror of
https://github.com/AlexxIT/go2rtc.git
synced 2025-09-27 04:36:12 +08:00
31398a7e6b
Implemented a dark mode feature for the website, including a toggle button in the navigation bar that allows users to switch between light and dark themes. To support this feature, centralized common CSS styles (such as body, table, and button stylings) into main.js to ensure consistent application across all HTML pages. This change improves user experience by providing a visually comfortable alternative for low-light environments and centralizes styling rules for easier maintenance. - Added dark mode styles for body, table, buttons, and navigation elements in main.js. - Introduced a toggle mechanism in the navigation bar to switch between light and dark modes. - Utilized JavaScript to detect system theme preference (`prefers-color-scheme`) and persist user's theme choice using localStorage. - Removed duplicate and scattered CSS rules from individual HTML files (add.html, index.html, links.html, log.html) and centralized them in main.js to reduce redundancy and facilitate easier updates in the future. This update enhances accessibility and user preference compliance by allowing users to select their desired theme while simplifying CSS management across the website.
198 lines
8.2 KiB
HTML
198 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>go2rtc - links</title>
|
|
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
div {
|
|
padding: 10px;
|
|
}
|
|
|
|
div > li {
|
|
list-style-type: none;
|
|
padding-left: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
div > li:before {
|
|
content: "-";
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="main.js"></script>
|
|
<div id="links"></div>
|
|
<script>
|
|
const src = new URLSearchParams(location.search).get('src').replace(/[<">]/g, ''); // sanitize
|
|
|
|
document.getElementById('links').innerHTML = `
|
|
<h2>Any codec in source</h2>
|
|
<li><a href="stream.html?src=${src}">stream.html</a> with auto-select mode / browsers: all / codecs: H264, H265*, MJPEG, JPEG, AAC, PCMU, PCMA, OPUS</li>
|
|
<li><a href="api/streams?src=${src}">info.json</a> page with active connections</li>
|
|
`;
|
|
|
|
const url = new URL('api', location.href);
|
|
fetch(url, {cache: 'no-cache'}).then(r => r.json()).then(data => {
|
|
let rtsp = location.host + ':8554';
|
|
try {
|
|
const host = data.host.match(/^[^:]+/)[0];
|
|
const port = data.rtsp.listen.match(/[0-9]+$/)[0];
|
|
rtsp = `${host}:${port}`;
|
|
} catch (e) {
|
|
}
|
|
|
|
document.getElementById('links').innerHTML += `
|
|
<li><a href="rtsp://${rtsp}/${src}">rtsp</a> with only one video and one audio / codecs: any</li>
|
|
<li><a href="rtsp://${rtsp}/${src}?mp4">rtsp</a> for MP4 recording (Hass or Frigate) / codecs: H264, H265, AAC</li>
|
|
<li><a href="rtsp://${rtsp}/${src}?video=all&audio=all">rtsp</a> with all tracks / codecs: any</li>
|
|
|
|
<pre>ffplay -fflags nobuffer -flags low_delay -rtsp_transport tcp "rtsp://${rtsp}/${src}"</pre>
|
|
|
|
<h2>H264/H265 source</h2>
|
|
<li><a href="stream.html?src=${src}&mode=webrtc">stream.html</a> WebRTC stream / browsers: all / codecs: H264, PCMU, PCMA, OPUS / +H265 in Safari</li>
|
|
<li><a href="stream.html?src=${src}&mode=mse">stream.html</a> MSE stream / browsers: Chrome, Firefox, Safari Mac/iPad / codecs: H264, H265*, AAC, PCMA*, PCMU*, PCM* / +OPUS in Chrome and Firefox</li>
|
|
<li><a href="api/stream.mp4?src=${src}">stream.mp4</a> legacy MP4 stream with AAC audio / browsers: Chrome, Firefox / codecs: H264, H265*, AAC</li>
|
|
<li><a href="api/stream.mp4?src=${src}&mp4=flac">stream.mp4</a> modern MP4 stream with common audio / browsers: Chrome, Firefox / codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</li>
|
|
<li><a href="api/stream.mp4?src=${src}&mp4=all">stream.mp4</a> MP4 stream with any audio / browsers: Chrome / codecs: H264, H265*, AAC, OPUS, MP3, FLAC (PCMA, PCMU, PCM)</li>
|
|
<li><a href="api/frame.mp4?src=${src}">frame.mp4</a> snapshot in MP4-format / browsers: all / codecs: H264, H265*</li>
|
|
<li><a href="api/stream.m3u8?src=${src}">stream.m3u8</a> legacy HLS/TS / browsers: Safari all, Chrome Android / codecs: H264</li>
|
|
<li><a href="api/stream.m3u8?src=${src}&mp4">stream.m3u8</a> legacy HLS/fMP4 / browsers: Safari all, Chrome Android / codecs: H264, H265*, AAC</li>
|
|
<li><a href="api/stream.m3u8?src=${src}&mp4=flac">stream.m3u8</a> modern HLS/fMP4 / browsers: Safari all, Chrome Android / codecs: H264, H265*, AAC, FLAC (PCMA, PCMU, PCM)</li>
|
|
|
|
<h2>MJPEG source</h2>
|
|
<li><a href="stream.html?src=${src}&mode=mjpeg">stream.html</a> with MJPEG mode / browsers: all / codecs: MJPEG, JPEG</li>
|
|
<li><a href="api/stream.mjpeg?src=${src}">stream.mjpeg</a> MJPEG stream / browsers: all / codecs: MJPEG, JPEG</li>
|
|
<li><a href="api/frame.jpeg?src=${src}">frame.jpeg</a> snapshot in JPEG-format / browsers: all / codecs: MJPEG, JPEG</li>
|
|
`;
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<h2>Play audio</h2>
|
|
<pre>example: ffmpeg:https://example.com/song.mp3#audio=pcma#input=file</pre>
|
|
<input id="play-url" type="text" placeholder="url">
|
|
<a id="play-send" href="#">send</a> / cameras with two way audio support
|
|
</div>
|
|
<script>
|
|
document.getElementById('play-send').addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
const url = new URL('api/streams', location.href);
|
|
url.searchParams.set('dst', src);
|
|
url.searchParams.set('src', document.getElementById('play-url').value);
|
|
fetch(url, {method: 'POST'});
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<h2>Publish stream</h2>
|
|
<pre>YouTube: rtmps://xxx.rtmp.youtube.com/live2/xxxx-xxxx-xxxx-xxxx-xxxx
|
|
Telegram: rtmps://xxx-x.rtmp.t.me/s/xxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxx</pre>
|
|
<input id="pub-url" type="text" placeholder="url">
|
|
<a id="pub-send" href="#">send</a> / Telegram RTMPS server
|
|
</div>
|
|
<script>
|
|
document.getElementById('pub-send').addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
const url = new URL('api/streams', location.href);
|
|
url.searchParams.set('src', src);
|
|
url.searchParams.set('dst', document.getElementById('pub-url').value);
|
|
fetch(url, {method: 'POST'});
|
|
});
|
|
</script>
|
|
|
|
<div id="webrtc">
|
|
<h2>WebRTC Magic</h2>
|
|
<label><input type="radio" name="webrtc" value="video+audio" checked>video+audio = simple viewer</label><br>
|
|
<label><input type="radio" name="webrtc" value="video+audio+microphone">video+audio+microphone = two way audio from camera</label><br>
|
|
<label><input type="radio" name="webrtc" value="camera+microphone">camera+microphone = stream from browser</label><br>
|
|
<label><input type="radio" name="webrtc" value="display+speaker">display+speaker = broadcast software</label><br>
|
|
|
|
<br>
|
|
<li><a id="local" href="webrtc.html?src=">webrtc.html</a> local WebRTC viewer</li>
|
|
|
|
<li>
|
|
<a id="shareadd" href="#">share link</a>
|
|
<a id="shareget" href="#">copy link</a>
|
|
<a id="sharedel" href="#">delete</a>
|
|
external WebRTC viewer
|
|
</li>
|
|
</div>
|
|
<script>
|
|
function webrtcLinksUpdate() {
|
|
const media = document.querySelector('input[name="webrtc"]:checked').value;
|
|
|
|
const direction = media.indexOf('video') >= 0 || media === 'audio' ? 'src' : 'dst';
|
|
document.getElementById('local').href = `webrtc.html?${direction}=${src}&media=${media}`;
|
|
|
|
const share = document.getElementById('shareget');
|
|
share.href = `https://alexxit.github.io/go2rtc/#${share.dataset.auth}&media=${media}`;
|
|
}
|
|
|
|
function share(method) {
|
|
const url = new URL('api/webtorrent', location.href);
|
|
url.searchParams.set('src', src);
|
|
return fetch(url, {method: method, cache: 'no-cache'});
|
|
}
|
|
|
|
function onshareadd(r) {
|
|
document.getElementById('shareget').dataset['auth'] = `share=${r.share}&pwd=${r.pwd}`;
|
|
|
|
document.getElementById('shareadd').style.display = 'none';
|
|
document.getElementById('shareget').style.display = '';
|
|
document.getElementById('sharedel').style.display = '';
|
|
|
|
webrtcLinksUpdate();
|
|
}
|
|
|
|
function onsharedel() {
|
|
document.getElementById('shareadd').style.display = '';
|
|
document.getElementById('shareget').style.display = 'none';
|
|
document.getElementById('sharedel').style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('shareadd').addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
share('POST').then(r => r.json()).then(r => onshareadd(r));
|
|
});
|
|
|
|
document.getElementById('shareget').addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
navigator.clipboard.writeText(ev.target.href);
|
|
});
|
|
|
|
document.getElementById('sharedel').addEventListener('click', ev => {
|
|
ev.preventDefault();
|
|
share('DELETE').then(() => onsharedel());
|
|
});
|
|
|
|
document.getElementById('webrtc').addEventListener('click', ev => {
|
|
if (ev.target.tagName === 'INPUT') webrtcLinksUpdate();
|
|
});
|
|
|
|
share('GET').then(r => {
|
|
if (r.ok) r.json().then(r => onshareadd(r));
|
|
else onsharedel();
|
|
});
|
|
|
|
webrtcLinksUpdate();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|