Webcam streaming - Stream Images to Image Control at variable intervals?

Question

I'm having a problem where users with a slow connection aren't getting my image feed properly.

i'm sending them new images every second to a picturebox inside an Ajax Update panel, using an Ajax Timer.

so if their connection is really slow, one image doesnt load fully before the next one comes in, so they never get the whole picture...

Any ideas?

Answer 1

Use image OnLoad event in JavaScript. In other words, do not load a new image until the last one is not completely loaded.

Probably you shouldn't use Update panel. The image tag (including its size, look and position) remains the same; it's the source which changes. Rather than updating everything, I suggest to do the following on client side:

1. At the beginning, load the first image (without Update panel).
2. Add a listener to the OnLoad event to <img /> on client side.
3. When the picture is fully loaded, reload it by querying the server for a more recent picture. For example, you may consider having an ASP.NET page Camera.aspx which serves the most recent pictures grabbed from the camera. To be sure the page is really queried, change the src property of <img /> element to Camera.aspx?t=1, Camera.aspx?t=2, etc.

On server side (so no JavaScript here), the grabbed images are stored in database, so Camera.aspx will query for the last stored record, retrieve it and send directly to the client (specifying appropriate Response.ContentType and using Response.OutputStream).

To achieve better visual response, you may also want to consider using two image elements in parallel: when the first one is loading, the second is displayed, and vice versa. It might be better, but I'm not sure, so test before choosing the appropriate method.