page that plays mjpeg in html canvas

cf152318 · Oleg Dzhimiev · 03fe3594 · cf152318
Commit cf152318 authored May 19, 2020 by Oleg Dzhimiev
Hide whitespace changes
Inline Side-by-side

Showing with 69 additions and 0 deletions

mjpeg.html src/php_top/mjpeg.html +69 -0

No files found.
--- a/src/php_top/mjpeg.html
+++ b/src/php_top/mjpeg.html
+<html>
+    <head>
+        <style>
+            body {
+                margin: 0px;
+            }
+            canvas {
+                height: 100%;
+                border: 0px solid red;
+            }
+        </style>
+    </head>
+    <body>
+
+        <canvas id='cnv'></canvas>
+
+        <script>
+
+            const IMGSRV_PORT0 = 2323;
+
+            const params = new URLSearchParams(location.search);
+            const port = params.get('port') || 0;
+
+            if (params.get('port')===null){
+                let s = "";
+                if (location.search===""){
+                    s = "?port="+port;
+                }else{
+                    s = location.search+"&port="+port;
+                }
+                window.history.pushState('', '', location.pathname+s);
+            }
+
+            let imgsrv_port = IMGSRV_PORT0 + parseInt(port);
+
+            let cnv = document.getElementById('cnv');
+            let ctx = cnv.getContext('2d');
+            let img = new Image();
+            img.onload = function() {
+                canvas_resize();
+                refreshCanvas();
+            };
+            img.src = location.origin+":"+imgsrv_port+"/mimg";
+
+            window.addEventListener("resize", ()=>{
+                canvas_resize();
+            });
+
+            ///////////////////////////////////////////////////////////////////////////////////
+
+            function canvas_resize(){
+                ctx.canvas.width = img.width;
+                ctx.canvas.height = img.height;
+            }
+
+            window.setInterval("refreshCanvas()", 5);
+
+            function refreshCanvas(){
+                try{
+                    ctx.drawImage(img,0,0,ctx.canvas.width,ctx.canvas.height);
+                }catch(err){
+                    img.src = location.origin+":2323/mimg";
+                }
+            };
+
+
+    </script>
+  </body>
+</html>
\ No newline at end of file