0

I have a project that saves images from an IPcamera to a filestream. I have another project that takes the image from the filestream and saves it as a jpg, then displays the image in a webform. I added a javascript script to refresh the image every x seconds, but the problem is that the new image only gets saved when the page loads. It does that because I put the c# code in the "Page_Load()" function. I want to know if there is a way to make a function in C# that has the section of code that saves the image, then call that function every x seconds when I refresh the image? Because right now since there is no new image being saved it just refreshes to the same image. I have made a code that refreshes the entire page every x seconds, but I feel like this way would be better. I am using visual studio 2010.

Here is the C# code for the second project mentioned:

namespace PlayVideo 
public partial class Video : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

     string saveTo = @"place to save";
        FileStream writeStream = new FileStream(saveTo, FileMode.Create, FileAccess.ReadWrite);

        using (FileStream fs = File.Open(@"Place where file is saved", FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite))
        {
            ReadWriteStream(fs, writeStream);
        }

     Response.Clear();
     Response.TransmitFile("~/images/test.jpg");


     }

 // readStream is the stream you need to read
// writeStream is the stream you want to write to
private void ReadWriteStream(Stream readStream, Stream writeStream) 
{
     int Length = 256;
     Byte [] buffer = new Byte[Length];
     int bytesRead = readStream.Read(buffer,0,Length);
     // write the required bytes
     while( bytesRead > 0 ) 
     {
        writeStream.Write(buffer,0,bytesRead);
        bytesRead = readStream.Read(buffer,0,Length);
     }
     readStream.Close();
     writeStream.Close();
 }
 }

The code for the viewer.aspx page is:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="viewer.aspx.cs"        Inherits="PlayVideo.viewer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head id="Head1" runat="server"> 

    <title></title>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    </head>
    <body>
    <form id="form1" runat="server">
       <div style="height: 60px" id="div1"> 

       <img src="/video.aspx" id="the_image" alt="" /><br />

       <script type="text/javascript" language="javascript">

       function refreshImage() {
          $("#the_image").attr('src', 'video.aspx');
            setTimeout(refreshImage, x ms);
          }

       $(document).ready(function () {
         setInterval(refreshImage, x ms);
        })
   </script>

   </div>
   </form>
   </body>
</html>

Is there a way to do this? I have read stuff about client side vs. server side, but since I am already refreshing the image every x seconds does that matter?

user3634308
  • 119
  • 1
  • 3
  • 14

1 Answers1

1

Create a public static method tagged with the attribute [WebMethod], and use an AJAX call to that method. Sample: How to send and retrieve data from web method using JQuery Ajax Call?

Community
  • 1
  • 1
Daniel Sanchez
  • 263
  • 1
  • 7