Improve index.html to provide better description of all options

cmd/camera-streamer/http.c

@@ -9,8 +9,8 @@
 
 extern unsigned char html_index_html[];
 extern unsigned int html_index_html_len;
-extern unsigned char html_video_html[];
+extern unsigned char html_webrtc_html[];
-extern unsigned int html_video_html_len;
+extern unsigned int html_webrtc_html_len;
 extern camera_t *camera;
 
 void *camera_http_set_option(http_worker_t *worker, FILE *stream, const char *key, const char *value, void *headersp)
@@ -77,12 +77,12 @@ http_method_t http_methods[] = {
   { "GET",  "/?action=snapshot", http_snapshot },
   { "GET",  "/?action=stream", http_stream },
   { "GET",  "/video", http_detect_video },
-  { "GET",  "/video.html", http_content, "text/html", html_video_html, 0, &html_video_html_len },
   { "GET",  "/video.m3u8", http_m3u8_video },
   { "GET",  "/video.h264", http_h264_video },
   { "GET",  "/video.mkv", http_mkv_video },
   { "GET",  "/video.mp4", http_mp4_video },
-  { "POST", "/video", http_webrtc_offer },
+  { "GET",  "/webrtc", http_content, "text/html", html_webrtc_html, 0, &html_webrtc_html_len },
+  { "POST", "/webrtc", http_webrtc_offer },
   { "GET",  "/option", camera_http_option },
   { "GET",  "/", http_content, "text/html", html_index_html, 0, &html_index_html_len },
   { }

html/index.html

@@ -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>
+			<a href="stream"><b>/stream</b></a> (MJPEG stream)</b><br>
-			Get a live stream.<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>

html/webrtc.html

@@ -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,