Update image in ASP.NET page from memory without refreshing the page.

Question

I have a command line C# server and an ASP.NET client, they both communicate via .NET Remoting. The server is sending the client still images grabbed from a webcam at say 2 frames a second. I can pass the images down to the client via a remote method call and the image ends up in this client method:

    public void Update(System.Drawing.Image currentFrame)
    {
        // I need to display the currentFrame on my page.
    }

1. How do i display the image on the a page without saving the image to the hard disc? If it was a winForms app i could pass currentFrame to a picturebox ie. picturebox.Image = currentFrame.

2. The above Update method gets fired at least 2 times a second. If the client was a winForms app i could simply put picturebox.Image = currentFrame and the current frame on the screen would automatically get updated. How do i achieve the same effect with ASP.NET? Will the whole page need to be reloaded etc? I want to basically make it look like a live video feed!

Answer 1

You have left one player out of your game: the browser. Your question really is: how do I make the browser, on some random computer in the Internet, update an image it is displaying based on what's happening in a server.

The answer, of course, is: you don't.

You can place the image inside of an UpdatePanel, and update the panel based on a timer. The URL for the src property of the image would have to lead to a HttpHandler (.ashx file) of your own, that would call the server to get the latest image.

Always remember how the Web works: the browser is in control, not the server side.

P.S. .NET Remoting has been deprecated in favor of WCF.

Answer 2

You will need to have a page or handler on the server to render the image. That's its job. Then you can have javascript in place on the page that displays the image that acts on a timer (window.setTimeout) and is constantly polling the server for an updated image. You probably want to make the request somewhat dynamic in the querystring so you don't get stuck redisplaying a cached image instead of a new image delivered by the server. Something like

<script type="text/javascript" language="javascript">
    i = 0;
    window.setTimeout(updateImage, 500);
    var img = document.getElementById('img_to_update');

    function updateImage() {
        img.src = 'imageRenderer.aspx?req=' + i;
        i += 1;
        window.setTimeout(updateImage, 500);
    }
</script>

Where i only serves to keep the request unique to prevent caching issues.

Anyway, is that the exact script? Perhaps not, I wrote it off the top of my head and it has been a while since I've done anything similar. But it should give you an idea of how you can achieve part of this client-side indepenent of the server side technology. (This script could be on any page, static or dynamically rendered.)