mjpeg.html 1.88 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<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;
Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
23
            const refresh = params.get('refresh') || 5;
24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

            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;
            }

Oleg Dzhimiev's avatar
Oleg Dzhimiev committed
57
            window.setInterval("refreshCanvas()", refresh);
58 59 60 61 62 63 64 65 66 67 68 69 70

            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>