link to mjpeg canvas

b873db0b · Oleg Dzhimiev · 3bfc37a8 · b873db0b · b873db0b
Commit b873db0b authored May 19, 2020 by Oleg Dzhimiev
Show whitespace changes
Inline Side-by-side

Showing with 102 additions and 65 deletions

index.php src/index/index.php +100 -64

mjpeg.html src/index/mjpeg.html +2 -1

No files found.
--- a/src/index/index.php
+++ b/src/index/index.php
@@ -92,6 +92,12 @@
            text-align:right;
            margin-top: 1px;
        }
+
+        #ll_status{
+            color: rgba(0,150,0,1);
+            opacity: 0;
+        }
+
    </style>
 </head>
 <body>
@@ -118,7 +124,7 @@
        $table_contents .= "<div class='port_window img_window'>";
        //$table_contents .= "<div><a href=\"$href1\"><img class='img_window' src='$href1' style='width:300px'/></a></div>";
        $table_contents .= "<div><a href=\"$href1\"><div index='$i' class='port_preview'></div></a></div>";
-        $table_contents .= "<div style='text-align:center;'>port $i: <a title='single image' href='$href1'>bimg</a>, <a title='multi-part image stream (M-JPEG)' href='$href2'>mimg</a></div>";
+        $table_contents .= "<div style='text-align:center;'>port $i: <a title='single image' href='$href1'>bimg</a>, <a title='multi-part image stream (M-JPEG). Played in browser as is.' href='$href2'>mimg</a>, <a href=\"mjpeg.html?port=$i\" title='MJPEG stream played in html canvas' class='canvas_mjpeg'>canvas</a></div>";
        $table_contents .= "</div>";
        $table_contents .= "</td>";

@@ -202,6 +208,7 @@
    <a href="camogmgui.php"   title="Store video/images to the camera's storage">Recorder</a><br />
    <a href="snapshot/"       title="Take a snapshot and download from the camera">Snapshot</a><br />
    <a href="raw.php"         title="Take a snapshot and download raw pixel data from the camera">Snapshot (raw image data)</a><br />
+    <a id="low_latency_link" href="#" title="For 5 MPix sensors">Quick low latency setup (1920x1088, 30fps)</a> <span id='ll_status'>settings applied</span><br />
    <a href="photofinish/"    title="Scanline mode demo">Photo finish demo</a><br />
    <br />
    <a href="hwmon.html"           title="hwmon.html">Temperature monitor</a><br />
@@ -225,6 +232,8 @@
        init_aexp_toggle();
        init_jp4_previews();
        init_inputs();
+        init_lowlatency();
+        update_canvas_mjpeg();
    });

    async function check_time(){
@@ -282,7 +291,7 @@
        });
    }

-function init_aexp_toggle(){
+    function init_aexp_toggle(){
        $('#toggle_aexp').click(function() {

            if ($(this).find('.btn.active').html()=="ON"){
@@ -314,9 +323,9 @@ function init_aexp_toggle(){
            });

        });
-}
+    }

-async function init_inputs(){
+    async function init_inputs(){
        $("input").change(function(){
            let pname  = $(this).attr('pname');
            let pvalue = $(this).val();
@@ -342,19 +351,46 @@ async function init_inputs(){
                pvalue = parseInt(1/pvalue*10e7);
                set_param(pname,pvalue,()=>{
                    console.log("ok");
+                    update_canvas_mjpeg();
                });
                break;
            default:
            }
        });
-}
+    }
+
+    async function init_lowlatency(){
+        $("#low_latency_link").click(async ()=>{
+            await set_param("WOI_WIDTH",1920,()=>{console.log("ok");});
+            await set_param("WOI_HEIGHT",1088,()=>{console.log("ok");});
+            await set_param("TRIG_PERIOD",3333333,()=>{console.log("ok");});
+            $("#ll_status").css({opacity:1}).animate({opacity:0},1000);
+            update_canvas_mjpeg();
+        });
+
+    }

-async function set_param(pname,pvalue,callback){
+    async function update_canvas_mjpeg(){
+
+        let refresh = parseInt(1/$("#fps").val()*1000);
+
+        $(".canvas_mjpeg").each(function(){
+            let href = $(this).attr("href");
+            href = href.split("?");
+            let p = new URLSearchParams(href[1]);
+            let port = p.get("port");
+            $(this).attr("href",href[0]+"?port="+port+"&refresh="+refresh);
+        });
+
+
+    }
+
+    async function set_param(pname,pvalue,callback){
        $.ajax({
            url: "parsedit.php?immediate&sensor_port=<?php echo $master_port;?>&"+pname+"="+pvalue+"&*"+pname+"=0xf",
            success: callback
        });
-}
+    }

 </script>
 <body>

--- a/src/index/mjpeg.html
+++ b/src/index/mjpeg.html
@@ -20,6 +20,7 @@

            const params = new URLSearchParams(location.search);
            const port = params.get('port') || 0;
+            const refresh = params.get('refresh') || 5;

            if (params.get('port')===null){
                let s = "";
@@ -53,7 +54,7 @@
                ctx.canvas.height = img.height;
            }

-            window.setInterval("refreshCanvas()", 5);
+            window.setInterval("refreshCanvas()", refresh);

            function refreshCanvas(){
                try{