Этюды на ASP NET2. Наблюдаем за своим домом с работы.
Сейчас большинство новых вэб-камер выпускется с IP-интерфейсом, например камеры от Genius. Они имеют прошитый web-серверок и предоставляют пользователю изображение по iP-адресу, например при входе на адрес http://192.168.0.233 мы и увидим собственно изображение.
Но как же показать это изображение на своем сайте?
- Во-первых, сайт как правило виден по внешнему адресу домашней локалки или офиса (и этот единственный адрес уже занят собственно сайтом - или фаерволом, публикующим сайт) - ну не покупать же второй внешний айпишник специально для веб-камеры?
- Во-вторых, надо же как-то обновлять изображение на сайте с web-камеры - ну не будет же юзер нажимать каждые полчекунды рефреш в браузере!
- В-третьих, при каждом рефреше браузера камера переспрашивает логин/пароль - ну не вводить же их каждый раз
- И в-четвертых - как же мултиплексировать на внешнем айпишнике множество камер? Айпишник-то один, а камер например двадцать.
Собственно, это и есть та самая практическая задачка, которую я однажды получил. Я решил ее буквально за пять минут - но правда, как говорят - кроме этих этих пяти минут потребовалась еще вся предыдущая жизнь. Решение этой задачки необычайно просто и, поскольку это явно практическая задачка - и возникает она у миллионов - я решил выложить публично ее решение в виде отдельного этюда.
Итак, создадим проект нового сайта в Visual Studio 2008. Для начала добавим в него (в App_Code) вот такой новый класс - который будет выдергивать рисунки с нашей камеры:
00001: Imports Microsoft.VisualBasic 00002: 00003: Public Class Class1 00004: Public Shared Property MaxImageLength() As Integer 00005: Get 00006: Return _MaxImageLength 00007: End Get 00008: Set(ByVal value As Integer) 00009: _MaxImageLength = value 00010: End Set 00011: End Property 00012: Shared _MaxImageLength As Integer = 150000 00013: 00014: 'считывает не более MaxImageLength байт без сообщений об ошибках - для пакетов (плюс добавлена аутентификация) 00015: Public Shared Function GetImage(ByVal URL As String, ByVal BasicAU_Name As String, ByVal BasicAU_Pass As String) As Byte() 00016: Try 00017: 'запрос по HTTP 00018: Dim PageRequest As System.Net.HttpWebRequest = CType(System.Net.WebRequest.Create(URL), System.Net.HttpWebRequest) 00019: Dim NetCredential As New Net.NetworkCredential(BasicAU_Name, BasicAU_Pass) 00020: PageRequest.Credentials = NetCredential 00021: 'Отправлен запрос 00022: Dim PageResponse As System.Net.HttpWebResponse = PageRequest.GetResponse 00023: 'Получен ответ 00024: Dim Reader As New System.IO.BinaryReader(PageResponse.GetResponseStream()) 00025: Dim GIF As Array = Reader.ReadBytes(_MaxImageLength) 00026: Reader.Close() 00027: 'Загружено в память 00028: Return GIF 00029: Catch ex As Exception 00030: Throw New Exception(ex.Message) 00031: End Try 00032: End Function 00033: 00034: 'Считывает с сообщениями об ошибках - для отддельных считываний 00035: Public Shared Function GetImage(ByVal URL As String) As Byte() 00036: Try 00037: 'запрос по HTTP 00038: Dim PageRequest As System.Net.HttpWebRequest = CType(System.Net.WebRequest.Create(URL), System.Net.HttpWebRequest) 00039: 'Отправлен запрос 00040: Dim PageResponse As System.Net.HttpWebResponse = PageRequest.GetResponse 00041: 'Получен ответ 00042: Dim Reader As New System.IO.BinaryReader(PageResponse.GetResponseStream()) 00043: Dim GIF As Array = Reader.ReadBytes(_MaxImageLength) 00044: Reader.Close() 00045: 'Загружено в память 00046: Return GIF 00047: Catch ex As Exception 00048: Throw New Exception(ex.Message) 00049: End Try 00050: End Function 00051: 00052: End Class
Как видите, это достаточно универсальный модуль с полиморфной функцией, которая позволит нам (при необходимости с аутенфикацией) дернуть с камеры рисункок. В режиме пакетной работы - как например для пауков - нам не нужны тут прерывания, но нужно ограничение по длине респонза - для борьбы с антипаучьими технологиями сайтов. Для нашего применения - эти усложнения нам не будут нужны.
Следующий компонент нашей мини-пирамидки - это хандлер, из которого собственно и будет вызываться наш класс. Итак, добавим в наш проект хандлер PROXY.ASHX:
00001: <%@ WebHandler Language="VB" Class="proxy" %> 00002: 00003: Imports System 00004: Imports System.Web 00005: 00006: Public Class proxy : Implements IHttpHandler 00007: 00008: Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest 00009: context.Response.ContentType = "image/bmp" 00010: Try 00011: If HttpContext.Current.Request("login") Is Nothing And HttpContext.Current.Request("pass") Is Nothing Then 00012: HttpContext.Current.Response.BinaryWrite(Class1.GetImage(HttpContext.Current.Request("Url"))) 00013: Else 00014: HttpContext.Current.Response.BinaryWrite(Class1.GetImage(HttpContext.Current.Request("Url"), HttpContext.Current.Request("login"), HttpContext.Current.Request("pass"))) 00015: End If 00016: Catch ex As Exception 00017: context.Response.ContentType = "text/plain" 00018: context.Response.Write(ex.Message) 00019: End Try 00020: End Sub 00021: 00022: Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable 00023: Get 00024: Return False 00025: End Get 00026: End Property 00027: 00028: End Class
И далее создадим две странички - одну для одноразового тестового обращения к веб-камере - Default.aspx и вторую - для периодических обращений - которую мы уже и будем дергать со своего сайта, который висит на внешнем интерфейсе.
00001: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 00002: 00003: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 00004: 00005: <html xmlns="http://www.w3.org/1999/xhtml"> 00006: <head runat="server"> 00007: <title>Web Proxy</title> 00008: </head> 00009: <body> 00010: <form id="form1" runat="server"> 00011: <div> 00012: <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> 00013: <asp:View ID="View1" runat="server"> 00014: <asp:Label ID="Label1" runat="server" Text="URL рисунка (http://сервер/каталог/рисунок)"></asp:Label> 00015: <br /> 00016: <asp:TextBox ID="TextBox1" runat="server" Width="700px"></asp:TextBox> 00017: <br /> 00018: <asp:Label ID="Label2" runat="server" Text="Логин"></asp:Label> 00019: <br /> 00020: <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 00021: <br /> 00022: <asp:Label ID="Label3" runat="server" Text="Пароль"></asp:Label> 00023: <br /> 00024: <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 00025: <br /> 00026: (если оба поля оставлены пустыми - будет сделана попытка считать рисунок без аутентификации) 00027: <br /> 00028: <br /> 00029: <asp:Button ID="Button1" runat="server" Text="Считать" /> 00030: </asp:View> 00031: <asp:View ID="View2" runat="server"> 00032: <asp:Image ID="Image1" runat="server" /> 00033: <br /> 00034: <asp:Button ID="Button2" runat="server" Text="Повторить" /> 00035: </asp:View> 00036: </asp:MultiView> 00037: 00038: </div> 00039: </form> 00040: </body> 00041: </html> 00001: 00002: Partial Class _Default 00003: Inherits System.Web.UI.Page 00004: 00005: Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click 00006: MultiView1.ActiveViewIndex = 1 00007: Response.Redirect("proxy.ashx?url=" & TextBox1.Text & "&login=" & TextBox2.Text & "&pass=" & TextBox3.Text) 00008: End Sub 00009: 00010: Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click 00011: MultiView1.ActiveViewIndex = 0 00012: End Sub 00013: End Class 00001: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Index" %> 00002: 00003: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 00004: 00005: <html xmlns="http://www.w3.org/1999/xhtml"> 00006: <head runat="server"> 00007: <title>Web-Camera</title> 00008: </head> 00009: <body> 00010: <form id="form1" runat="server"> 00011: <div> 00012: 00013: </div> 00014: </form> 00015: </body> 00016: </html> 00001: 00002: Partial Class Index 00003: Inherits System.Web.UI.Page 00004: 00005: Protected Sub Index_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 00006: Response.Redirect("proxy.ashx?url=http://192.168.0.233/jpg/image.jpg&login=webuser&pass=webpass") 00007: End Sub 00008: End Class
В итоге этих простеньких манипуляций у нас должен получится вот такой крохотный сайтик:
И он должен работать! Вводя правильную аутентификацию - мы сможем увидеть на нем изображение с Web-камеры.
Осталось вытащить это изображение из локалки на внешний айпишник - и сделать периодическое обновление этого изображения.
Для этого на нашем внешнем сайте (на котором могут переключаться и десятки и сотни вот таких веб-камер) - добавляем вот такой код:
00101: 00102: <img src="http://XXX.YYY.ZZZ.NNN:MMM/proxy.ashx?url=http://192.168.0.233/jpg/image.jpg&login=webuser&pass=webpass" id="Image1" width="800px" height="600px" /> 00103: <asp:Image ID="ImageButton1" runat="server" ImageUrl="~/video1.gif" /> 00104: 00105: 00106: <script language="javascript" type="text/javascript"> 00107: function timer_process() 00108: { 00109: var Image1 = document.getElementById('Image1'); 00110: Image1.src='http://XXX.YYY.ZZZ.NNN:MMM/proxy.ashx?url=http://192.168.0.233/jpg/image.jpg&login=webuser&pass=webpass&i=' + (new Date()).getTime(); 00111: window.setTimeout("timer_process()", 500); 00112: 00113: } 00114: 00115: </script>
Это собственно единократная загрузка рисунка и Язва-скрип процедурка устаревания странички по таймауту.
Обратите внимание тут на пару моментов - XXX.YYY.ZZZ.NNN:MMM - это наш внешний айпишник и порт - где мы запустили наш сайт, созданный на предыдущем шаге. Или порт откуда мапируюся реквесты фаерволом на наш прокси-сайт, созданный выше. Кроме того, обратите внимание как тут я решил вопрос с кешированием рисунков в браузере - просто докрутил еще один параметр.
И чего тут не хватает? А не хватает последнего ключика головоломки - кода, запускающего процесс устаревания странички timer_process().
Для разнообразия внесем запускающий код в программный текст странички:
00001: 00002: Partial Class video1 00003: Inherits System.Web.UI.Page 00004: 00005: Protected Sub video1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 00006: If Not IsPostBack Then 00007: ClientScript.RegisterClientScriptBlock(Me.GetType, "StartTimer", "<script language='javascript' type='text/javascript'>" & vbCrLf & _ 00008: "window.setTimeout('timer_process()', 500);" & vbCrLf & _ 00009: "</script>") 00010: End If 00011: End Sub 00012: End Class
Вот теперь все сложилось. Причем даже так, что формируя параметры вызова PROXY.ASHX, мы можем с этой внешней странички нашего адреса видеть даже десятки или сотни камер - висящих у нас на внутренних адресах - в моем случае это для первой камеры 192.168.0.233.
Пример практического применения? Пожалуйста.
Ставите дома 10 камер (каждая на своем внутреннем айпишнике). И с работы входите по своему внешнему айпишнику на свой сайт - и наблюдаете с 10-ти позиций, чем там занимается дома ваша жена в ваше отсутствие. Для этого надо лишь пару простейших IP-камер, хабчик, и какой-нибудь нешумный barebone - в который и надо загрузить описанные тут проги. В реальности описанная здесь система видеонаблюдения может быть скомбинирована с электронным замком.
)
| <SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |