Mycal's Experimental Homepage Software


Jump To
  • Projects
  • Clearlake
  • Archive
  • Articles
  • Links
  • Sandbox
  • You are at /projects/webcam/

    Javascript WEB/IPcam Viewer

    I tried about 10 different javascript viewers that are downloadable on the net. Some very popular and widely used ones. They all leaked memory and were unstable after running for a while, especially at high framerates. They were also pure timer based which caused multiple requests to happen at high refresh rates that could cause other instabilities. So I created my own that doesn't leak and won't over access the webcam. It will only create one loader at a time and not create a new loader until the first one is done and it has pause and speed control. Could be extended to have much more capability but as it sits it is the most reliable IP webcam viewer I've found.

    The first thing I wanted is to not leak memory, if you ever have watched a java refresh of a webcam image for a while at any kind of frame rate (read 1fps or faster) you may notice your machine slow down to a crawl until you close this window. Most likely the javascript webcam viewer is leaking memory and if you hit control-alt-delete and look at the memory usage from your favorite browser you'll find it using a 1/2 a gig of memory or more and you can watch it ratchet up with every frame refresh.

    The first thing I realized is that most of the javascript viewers were doing a "NEW" image and or timer on every image load, this seemed to eat up a chunk of memory for each image load. I moved the "var newimg = new Image();" to the beginning of the javascript code and only called it once, reusing the same newimg object each image load.

    This solved my memory leak but I ran into another problem. At higher framerates my webcam viewers would "overclock" the webcam. This was even more apparent in a low bandwidth enviornment. What this means is that before the first image was loaded, another image requrest was issued. Of course with my since image object this created other problems, but with the NEW image object you had image requests stacking up faster than the ipcam could process them. This was very bad and both the browser and IP cam had problems.

    The solution was to use the "onload" method and only start a new image or the framerate timer after the current image that is being processed has finished. One of the things I learned is that there is a correct way and an incorrect way to use the "onload" method, and most of the examples on the net showed the wrong way. The wrong way may work but it won't work right and could still leaving you with the same problems you had before.

    Lets say you had a function loadDoneImage() that you wanted called when the image was finished loaded. The correct way to do this is the following:


    If you put the () on the end of the done image function it will be called immediatly, not at the end of the load. Unfortunatly may of the examples show the () appended to the function name, which doesn't work.


    Connect to anyting, anywhere anytime with yoics.

    Last Update at 10-29-2018 2:47 pm
    Copyright 1994-2006 mycal, All Rights Reserved