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:
newimg.onload=loadDoneImage;
Not
newimg.onload=loadDoneImage();
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.
|