How to automatically refresh a web-page using ASP.NET?

Question

hello there,

I have an asp.net application that would 'simulate' real-time video. I did that acquiring multiple picture from an mysql database.

The problem is how would it be displayed on the web-page.? I refresh the page 1 second per picture, the result is the pictures are choppy and flickery.

    Response.AppendHeader("Refresh", "1")

How can I make the refresh rate of the page 4times per second? or is there any implementation for it to be displayed in a continent way.

I would really appreciate if you will reply. good day (^_^)...

here is the script that i am using to read the images from the database,.

If dr.Read Then dr.Read() Response.ContentType = "image/jpeg" 'gets or sets the type of output stream Response.BinaryWrite(dr.Item("file")) 'writes a stream of binary characters to the http output stream Else Response.Write("There is no current active webccast.") End If dr.Close()

Answer 1

I would either use some Javascript/Ajax to change the content or the meta-refresh (probally not the best for fast refresh).

Answer 2

Maybe you need to think about loading more than one picture onto the page and using javascript to cycle between them. Rather than refreshing the page you could get the pictures using AJAX.

Answer 3

create a javascript method to change the image using xmlhttpobject and recursively set a timer


         function Timer() {

             setTimeout("getImage(['imageContainer1'])", 200);
             t = setTimeout("Timer()", 100);
                       }

        function getImage(params) {
            var request=getXMLhttpObject();
            makeRequest("ajax/ObtainImage.aspx?name='myimage'+param[1]+'.jpg",request,  imageResponseHandler(request, params));

                   }

    function getXMLhttpObject() {

            return  (navigator.appName == "Microsoft Internet Explorer")? new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
                              }

 function makeRequest(url,request, Handler) {

             request.open("GET", url, true);
             request.onreadystatechange = Handler;
             request.send(null);

         }


    function imageResponseHandler(request,params) {
             return function() {
                 if (request.readyState == 4)
                     document.getElementById(params[0]).src = request.responseText;
             }

         }

Answer 4

If you really want to simulate video, you need to be able to display at least 15 pictures each second (15fps). Making that many requests per second isn't a great idea.

If you absolutely must do this, I'd suggest "buffering" the pictures first, before displaying them, and if possible, fetching them in batches:

buffer = []       // cache loaded images
bufferSize = 30   // load 30 images before playing

function loadImage(src) {
   var img = new Image()
   img.src = src
   buffer.push(img)
}

function animate(target) {
   if (buffer.length > 0) {
      var img = buffer.shift()
      document.getElementById(target).src = img.src
   }
}

function bufferImages() {
   for (var i=0; i<bufferSize; i++) {
      loadImage('/ajax/ObtainImage.aspx?name=img')
   }
}

setInterval("animate('imgTarget')", 65)  // should give us about 15fps 
setInterval("bufferImages()", 1000)  // every second

Answer 5

Add this to the head of your html document. Not the most efficient way, but it will work.

<meta http-equiv="refresh" content=".25" />