CODEWITHSUNDEEP
javascripthtml
koogee
koogee

Reputation: 963

display a clock above a live feed from camera

This is what I'm trying:

<!DOCTYPE html>
<!-- cam.html -->
<html>
<head>
    <meta charset="UTF-8" />
    <title> IP Camera </title>
</head>

<body>
    <h1> 
        Live Feed
    </h1>

    <script type="text/javascript">

        function GetClock(){
            d = new Date();
            nday   = d.getDay();
            nmonth = d.getMonth();
            ndate  = d.getDate();
            nyear = d.getYear();
            nhour  = d.getHours();
            nmin   = d.getMinutes();
            nsec   = d.getSeconds();

            if(nyear<1000) nyear=nyear+1900;

            if(nhour ==  0) {ap = " AM";nhour = 12;} 
            else if(nhour <= 11) {ap = " AM";} 
            else if(nhour == 12) {ap = " PM";} 
            else if(nhour >= 13) {ap = " PM";nhour -= 12;}

            if(nmin <= 9) {nmin = "0" +nmin;}
            if(nsec <= 9) {nsec = "0" +nsec;}

            document.getElementById('clockbox').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
            setTimeout("GetClock()", 1000);
        }
        window.onload = GetClock;
    </script>

    <div id="clockbox"></div>

    <img src='http://192.168.0.4/video/mjpg.cgi' />

</body>
</html>

I couldn't figure out why it wasn't working until I realized window.onload meant the page had to load first and of course, considering its a stream of jpegs, the page would never finish loading.

How do I get get the script to run without waiting for <img> tag to complete loading?

Upvotes: 0

Views: 80

Answers (1)

SajithNair
SajithNair

Reputation: 3867

Move the script block to the bottom of the page and call GetClock();

<!DOCTYPE html>
<!-- cam.html -->

<html>
<head>
    <meta charset="UTF-8" />
    <title> IP Camera </title>
</head>

<body>
<h1> 
Live Feed
</h1>


<div id="clockbox"></div>

<img src='http://192.168.0.4/video/mjpg.cgi' />
<script type="text/javascript">

function GetClock(){
d = new Date();
nday   = d.getDay();
nmonth = d.getMonth();
ndate  = d.getDate();
nyear = d.getYear();
nhour  = d.getHours();
nmin   = d.getMinutes();
nsec   = d.getSeconds();

if(nyear<1000) nyear=nyear+1900;

     if(nhour ==  0) {ap = " AM";nhour = 12;} 
else if(nhour <= 11) {ap = " AM";} 
else if(nhour == 12) {ap = " PM";} 
else if(nhour >= 13) {ap = " PM";nhour -= 12;}

if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}

document.getElementById('clockbox').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("GetClock()", 1000);
}
GetClock();
</script>

</body>
</html>

Upvotes: 1

Related Questions