jordan/camera-streamer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve index.html to provide better description of all options

Browse Source
This commit is contained in:
Kamil Trzcinski
2022-10-03 01:09:13 +02:00
parent 771f61449b
commit 57fb09fbf1
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
html/index.html
View File

@ -12,22 +12,46 @@
<br>
<li>
<a href="snapshot"><b>/snapshot</b></a><br>
Get a current actual image from the server.
Get a current actual image from the server.<br>
<br>
<ul>
<li><a href="snapshot?res=low">/snapshot?res=low</a> get a low low resolution stream (if -camera-low_res_factor=X is configured).</li>
<li><a href="snapshot?res=low">/snapshot?res=low</a> get a low resolution stream (if -camera-low_res_factor=X is configured).</li>
</ul>
</li>
<br>
<li>
<a href="stream"><b>/stream</b></a><br>
Get a live stream.<br>
<a href="stream"><b>/stream</b></a> (MJPEG stream)</b><br>
Get a live stream. Works everywhere, but consumes a ton of bandwidth.<br>
<br>
<ul>
<li><a href="stream?res=low">/stream?res=low</a> get a low low resolution stream (if -camera-low_res_factor=X is configured).</li>
</ul>
</li>
<br>
<li>
<a href="webrtc"><b>/webrtc</b></a> (HTTP page / iframe)<br>
Get a live video using WebRTC (low-latency streaming with latency of around 100ms).<br>
<br>
<ul>
<li><a href="webrtc?res=low">/webrtc?res=low</a> get a low low resolution WebRTC stream (if -camera-low_res_factor=X is configured).</li>
</ul>
</li>
<br>
<li>
<a href="video"><b>/video</b></a> (IP Camera)<br>
Get a live (H264) video stream best suited to current browser in a maximum compatibility mode choosing automatically between one of the below formats.<br>
<br>
<ul>
<li><a href="video.mp4"><b>/video.mp4</b></a><br> get a live video stream in MP4 format (Firefox, with latency of around 1s if FFMPEG enabled).</li>
<br>
<li><a href="video.mkv"><b>/video.mkv</b></a><br> get a live video stream in MKV format (Chrome, with latency of around 2s if FFMPEG enabled).</li>
<br>
<li><a href="video.m3u8"><b>/video.m3u8</b></a><br> get a live video stream in HLS format (Safari, with latency of around 1s).</li>
<br>
<li><a href="video?res=low">/video?res=low</a> get a low resolution stream (if -camera-low_res_factor=X is configured).</li>
</ul>
</li>
<br>
<li>
The mjpg-streamer compatibility layer:<br>
<br>
@ -38,23 +62,6 @@
</ul>
</li>
<br>
<li>
<a href="video"><b>/video</b></a><br>
Get a live (H264) video stream best suited to current browser in a maximum compatibility mode choosing automatically between one of the below formats.<br>
<br>
<ul>
<li><a href="video.html"><b>/video.html</b></a><br> get a live video using WebRTC (low-latency streaming with latency of around 100ms).</li>
<br>
<li><a href="video.mp4"><b>/video.mp4</b></a><br> get a live video stream in MP4 format (Firefox, with latency of around 1s if FFMPEG enabled).</li>
<br>
<li><a href="video.mkv"><b>/video.mkv</b></a><br> get a live video stream in MKV format (Chrome, with latency of around 2s if FFMPEG enabled).</li>
<br>
<li><a href="video.m3u8"><b>/video.m3u8</b></a><br> get a live video stream in HLS format (Safari, with latency of around 1s).</li>
<br>
<li><a href="video.html?res=low">/video.html?res=low</a> get a low resolution stream (if -camera-low_res_factor=X is configured).</li>
</ul>
</li>
<br>
<li>
The commands available on some cameras:<br>
<br>

9
html/video.html → html/webrtc.html
View File

@ -42,7 +42,7 @@
</head>
<body>
<div id="streamtage">
<video controls autoplay muted id="stream"></video>
<video controls autoplay muted playsinline id="stream"></video>
</div>
<script>
@ -61,8 +61,9 @@
pc.addEventListener('track', function(evt) {
console.log("track event " + evt.track.kind);
if (evt.track.kind == 'video') {
if (document.getElementById('stream'))
if (document.getElementById('stream')) {
document.getElementById('stream').srcObject = evt.streams[0];
}
} else {
if (document.getElementById('audio'))
document.getElementById('audio').srcObject = evt.streams[0];
@ -72,7 +73,7 @@
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
fetch('/video', {
fetch('/webrtc', {
body: JSON.stringify({
type: 'request',
res: params.res
@ -108,7 +109,7 @@
}).then(function(answer) {
var offer = pc.localDescription;
return fetch('/video', {
return fetch('/webrtc', {
body: JSON.stringify({
type: offer.type,
id: pc.remote_pc_id,