2014-09-03 27 views
1

好吧,我有一個程序正在播放來自現場網絡攝像機的視頻,讓我們稱之爲「AppVideo」。我有另一個程序將在webForm中播放此視頻,可以將此程序稱爲「播放視頻」。有人可以幫助我更好地保存WebForms中的圖像嗎?

我想在播放視頻中播放此視頻的方式是每隔幾秒從AppVideo保存一個圖像並顯示新圖像。

所以在AppVideo中,我將每個新幀保存到文件流中。

現在我想要做的是從該文件流中取出新圖像並將其保存在圖像文件夾中。這是在播放視頻的頁面Video.aspx中完成的。然後在viewer.aspx中顯示圖像。

這裏是Video.aspx

代碼
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.Services; 
using System.Web.UI.HtmlControls; 
using System.IO; 
using System.Diagnostics; 
using System.Threading; 
using System.Threading.Tasks; 
using System.Drawing; 

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


     protected void Page_Load(object sender, EventArgs e) 
     { 


     string saveTo = @"C:where to save image"; 
     FileStream writeStream = new FileStream(saveTo, FileMode.Create, FileAccess.ReadWrite); 

     using (FileStream fs = File.Open(@"C:filestream 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(); 
    } 

    } 

} 

然後這裏是viewer.aspx代碼:

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

    <title></title> 

    <script type="text/javascript" src="refreshImagePage.js"></script> 

    </head> 

    <body> 
    <form id="form1" runat="server"> 
    <div style="height: 60px" id="div1"> 


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


<script type="text/javascript" language="javascript"> 
// alert(1) 
     function refreshImage() { 
//     alert(2); 
       window.location.reload(); 

//   objIMG = document.getElementById('the_image'); 
//   objIMG.src = objIMG.src.substr(0, objIMG.src.indexOf('&nocache=')); +'&nocache=' + Math.random(); 
    //  alert(3); 
      } 




$(document).ready(function() { 
    setInterval(updateImage, 5000); 
}) 


</script> 



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

如果你注意到,在JavaScript上viewer.aspx我刷新整個頁面,並評論出只刷新圖像。刷新圖像不起作用,我認爲這是因爲圖像被保存的方式;從文件流保存圖像的功能是在頁面加載中,因此它只在加載頁面時保存最新的圖像。我已經爲此工作了大約3周,想不到其他任何事情要去嘗試。有任何想法嗎?這種方式現在工作,但我不喜歡它刷新整個頁面。處理這種

回答

2

最好的辦法是委託兩個部分問題:

  1. 的圖像提供商,託管Web服務器上。目前它是Viewer.aspx(我們稍後會談到)
  2. 位於客戶端瀏覽器上的圖像使用者。 Viewer.aspx的呈現形式。

第1部分

我們可以將圖像從供應商ASPX更改爲HTTP處理程序

ImageHandler.ashx

<%@ WebHandler Language="C#" CodeBehind="ImageHandler.ashx.cs" Class="TestImageHandler.ImageHandler" %> 

ImageHandler.ashx.cs

using System; 
using System.Drawing; 
using System.Globalization; 
using System.IO; 
using System.Web; 

namespace TestImageHandler 
{ 
    /// <summary> 
    ///  Summary description for ImageHandler 
    /// </summary> 
    public class ImageHandler : IHttpHandler 
    { 
     public void ProcessRequest(HttpContext context) 
     { 
      var id = context.Request["id"]; 
      var iId = 0; 
      if (id != null && int.TryParse(id.ToString(CultureInfo.InvariantCulture), out iId)) 
      { 
       try 
       { 
        RespondForId(iId, context); 
       } 
       catch (Exception) 
       { 
        ErrorResponse(context); 
       } 
      } 
      else 
      { 
       DefaultResponse(context); 
      } 
     } 

     private static void DefaultResponse(HttpContext context) 
     { 
      var tt = File.ReadAllBytes(context.Server.MapPath("~/noId.jpg")); 
      context.Response.ContentType = "image/jpeg"; 
      context.Response.BinaryWrite(tt); 
     } 

     private static void ErrorResponse(HttpContext context) 
     { 
      var tt = File.ReadAllBytes(context.Server.MapPath("~/error.jpg")); 
      context.Response.ContentType = "image/jpeg"; 
      context.Response.BinaryWrite(tt); 
     } 

     private void RespondForId(int id, HttpContext context) 
     { 
      var tt = GetImageBytesForId(id); //File.ReadAllBytes(context.Server.MapPath("~/multcust.png")); 
      context.Response.ContentType = "image/jpeg"; 
      context.Response.BinaryWrite(tt); 
     } 

     private static byte[] GetImageBytesForId(int id) 
     { 
      var b = new Bitmap(200, 200); 
      byte[] retBytes; 
      using (var g = Graphics.FromImage(b)) 
      { 
       g.DrawRectangle(Pens.BurlyWood, 1, 1, 198, 198); 
       using (var arialFontLarge = new Font("Arial", 20)) 
       { 
        g.DrawString(id.ToString(CultureInfo.InvariantCulture), arialFontLarge, Brushes.Black, 5, 100); 
       } 

       using (var arialFontSmall = new Font("Arial", 10)) 
       { 
        g.DrawString(string.Format("{0:yyyyMMdd hhmmssffff}", DateTime.Now), arialFontSmall, Brushes.Black, 5, 5); 
       } 
       var converter = new ImageConverter(); 
       retBytes = (byte[])converter.ConvertTo(b, typeof(byte[])); 
      } 
      return retBytes; 
     } 

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

第2部分

客戶端應用程序的一側。

的index.htm

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>File Swap</title> 
    <script language="JavaScript"> 
     function refreshIt() { 
      if (!document.images) return; 
      for (var i = 1; i <= 6; i++) { 
       document.getElementById("imgcontainer" + i).src = "/imagehandler.ashx?id=" + i + "&rand=" + Math.random(); 
      } 
      setTimeout('refreshIt()', 1000); 
     } 
    </script> 
</head> 
    <body onload="setTimeout('refreshIt()',1000)"> 
     <table> 
      <tr> 
       <td><img id="imgcontainer1" src="/imagehandler.ashx?id=1" alt="cam image" /></td> 
       <td><img id="imgcontainer2" src="/imagehandler.ashx?id=2" alt="cam image" /></td> 
      </tr> 
      <tr> 
       <td><img id="imgcontainer3" src="/imagehandler.ashx?id=3" alt="cam image" /></td> 
       <td><img id="imgcontainer4" src="/imagehandler.ashx?id=4" alt="cam image" /></td> 
      </tr> 
      <tr> 
       <td><img id="imgcontainer5" src="/imagehandler.ashx?id=5" alt="cam image" /></td> 
       <td><img id="imgcontainer6" src="/imagehandler.ashx?id=6" alt="cam image" /></td> 
      </tr> 
     </table> 
    </body> 
</html> 

更新1:改變ImageHandler.ashx.cs和index.htm的處理多個圖像。

方法GetImageBytesForId可以更改爲根據Id返回正確的圖像,而不是返回虛擬圖像。

+0

我添加了.ashx文件和.htm文件,但我有幾個問題。我將什麼文件設置爲起始頁?我有沒有viewer.aspx和Video.aspx文件了?我創建了index.htm文件作爲開始頁面,當我運行它時,它只是在圖像所在的框中顯示「凸輪圖像」。對不起,我通常使用winforms,而不是webforms。 – user3634308 2014-09-03 21:30:31

+0

我將ImageHandler.ashx.cs更改爲「〜/ images/test.jpg」,並顯示最後保存的圖像。現在問題是保存最新的圖像,因爲我有這樣的功能保存最新的圖像是在頁面加載Video.aspx。 – user3634308 2014-09-03 22:59:20

+0

你不需要瀏覽器或視頻文件了。您可以進行所有轉換,從獲取框架,獲取ashx.cs文件本身中的新文件等。 – Abhinav 2014-09-03 23:42:34

相關問題