How to refresh image in asp.net?

Question

I'm trying to make a website, which is based on ASP.Net. I don't know how to refresh a image. I'm trying to build a website link to IP camera. I know the source of the camera, and also I have the authorize of the IP camera. Is there anyone have any idea to do this?

Thank you Jimmy

are you saying you want your asp.net application to access an attached camera? — jason, Mar 08 '13 at 20:20
It depends on the camera. Most of them have a publicly accessible link to the video stream which you can use. — System Down, Mar 08 '13 at 20:21
I think he is asking how to display live video on a website from a camera he has access to. Is this correct? — Anthony Queen, Mar 08 '13 at 20:22
Like I said, it depends on the camera. Most of them have an address for their video stream that you can simply use within your web page (you will have to make that address public to the world though). See here: https://github.com/ingenuitas/SimpleCV/wiki/List-of-IP-Camera-Stream-URLs — System Down, Mar 08 '13 at 20:31

score 2 · Answer 1 · edited May 23 '17 at 11:57

You can use simple javascript to refresh it on page.

Let say that your camera update the same image names imagefromcamera.jpg. Then you show it on your page with simple html, or with asp image control, and you update it with javascript as:

<img id="LiveImg" width="320" height="320" alt="" src="imagefromcamera.jpg?" /> 
<script>
var myImg = document.getElementById("LiveImg");
if (myImg){
    window.setInterval(function(){
          myImg.src = myImg.src.replace(/\?.*$/, '?' + Math.random());
        }, 3000);
}        
</script>

Adding this random number at the end of the image we make sure that is not keep in cache of the browser. The timer here is needed to update it every some seconds, let say here 3 seconds.

Now if your camera make different names you can use the same idea and loaded them. If you have some other way to get the images from your camera you can use a handler to send the image. Here is a similar example. I made an handler names captureimage.ashx, use the same code in javascript side:

<img id="LiveImg" width="320" height="320" alt="" src="captureimage.ashx?" /> 
<script>
var myImg = document.getElementById("LiveImg");
if (myImg){
    window.setInterval(function(){
          myImg.src = myImg.src.replace(/\?.*$/, '?' + Math.random());
        }, 3000);
}
</script>

and on server side the handler can be something like:

public class ReadTheCameraImage : IHttpHandler 
{
     public void ProcessRequest (HttpContext context) 
    {
        context.Response.ContentType = "image/jpeg";
        context.Response.Buffer = false;
        // read the ImageData from what ever source you have
        context.Response.OutputStream.Write(ImageData, 0, ImageData.Length);        
    }

    public bool IsReusable 
    {
        get {
            return false;
        }
    }
}

Here I like to say, that this is not a solution for live video, but for just display the capture of a web camera to a page, like make live web cameras on the internet that show some places. For live video, and live communication you need a far more complicate code, and the use of Adobe flash player together with server streaming, direct connection with each client connected and other stuff.

Some other answers for the video, in case that your camera software support the direct video streaming : how to work with videos in ASP.NET?
How to play audio and video files in web browser?
how can i play vimeo player on image click?

score 0 · Answer 2 · answered Mar 08 '13 at 20:40

0

You will find this article helpful UpdatePanel Refresh. If you don't care about the flicker of a Postback you can also create a timer in java-script and for each tick call __doPostBack('',''); You can also create a WebMethod you can call using jQuery and update your image that way.

answered Mar 08 '13 at 20:40

Felipe Ramos

1
1

2

An `UpdatePanel` is the wrong solution for this. It will execute the entire page lifecycle just to update one image; that's extremely inefficient. – Tim M. Mar 08 '13 at 20:59

How to refresh image in asp.net?

2 Answers2