Search code examples
javascripthtmldhtml

Seeking code to display two public IP webcams

I'm mainly a c/c++ guy. I have done quite a lot of PHP stuff, and now have to code some JS.

For a mock-up, I want to make a web page showing the video stream from two live video sources. We have IP based web-cams on order and I presume it will just be a case of using

<img src="IP address">

for each web cam, with maybe some image size tags. Is that correct?

In the meantime, can someone post some sample code, preferably with some video feed which will be streaming during daylight hours in Australia? You can be cute creative, but please be SFW. Thanks.

Solution

  • This code uses the "pull" method to update JPEG images within the browser. It works by changing the query string part of the src URL to force an image reload, ten seconds after the last picture has finished loading (a live demo using beach webcam imagery is at http://jsfiddle.net/kLUkA/2/):

    function refreshCamera() {
    var img = this;
    setTimeout(function() {
        var parts = img.src.split('?');
        parts[1] = new Date().getTime();
        img.src = parts.join('?');
    }, 10000);
}

function startCameraPull(img) {
    img.onload = refreshCamera;
    img.onload();
}

window.onload = function() {
    startCameraPull(document.getElementById('webcam1'));
    startCameraPull(document.getElementById('webcam2'));
};

    Note: You can take away the setTimeout part in refreshCamera to eliminate the reloading delay.