JSFiddle - React, Tailwind, and code Playground

HTML

<div id="output">  stff</div>

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2"  HEIGHT= "800">
<TR>
<TD WIDTH="400"><div id="updateme"><IMG SRC="http://192.168.1.124:8080/shot.jpg"></TD>
<TD WIDTH="400"><div id="oldpic"> </div></TD>
</TR>
</TABLE>
</div>

JavaScript

(function() { // Use a closure so we don't pollute the global namespace
    
    var output_element = document.getElementById('updateme'); // This is where the numbers will be displayed
    
    var target_fps = 2; // How many loops per second
    var counter = 0;
    var target_seconds = 45; //how many seconds ago is the pic?
    
    var node = document.getElementById('oldpic');
     var countSeconds = 0; //start with zero second
     var img = new Image();

    // Our function loop
    var main = function main() {
        
        // Increase the counter by one,
        //   if it's equal to target_fps,
        //   reset it to 0
        if (++counter == target_fps) {
            counter = 0;
        }
        
        if(++countSeconds == target_seconds){
        
            img.src = "http://192.168.1.124:8080/shot.jpg";   
            
        }
              
        output_element.innerHTML = output_element.innerHTML;
        
        
        node.innerHTML = "<img src='"+img.src+"' alt='my image'>";

            // Update the UI
        
        
        setTimeout(main, 1000/target_fps); // Schedule the loop to run again
    }
    
        
    main(); // Start things up!
})();