Difference between revisions of "HTML Video Surveillance"

From ElphelWiki
Jump to: navigation, search
(Install)
m (Page Elements)
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{en|ru=Видеонаблюдение на HTML}}
 +
Temporary download URL
 +
http://sourceforge.net/project/showfiles.php?group_id=105686&package_id=138717&release_id=358392
 
== Requirements ==
 
== Requirements ==
 
<ul>
 
<ul>
Line 5: Line 8:
 
<li>X-Window system
 
<li>X-Window system
 
<li>Mozilla or FireFox
 
<li>Mozilla or FireFox
<li>GenReS plugin
+
<li>[[GenReS|GenReS plugin]]
 
<li>Perl with perl threads
 
<li>Perl with perl threads
 
<li>MPlayer with RTSP support with elphel patch
 
<li>MPlayer with RTSP support with elphel patch
 
</ul>
 
</ul>
 +
 
== Install ==
 
== Install ==
 
<ol>
 
<ol>
Line 17: Line 21:
 
See about:
 
See about:
 
http://www.mozilla.org/projects/security/components/signed-scripts.html
 
http://www.mozilla.org/projects/security/components/signed-scripts.html
<li> [[#Configure]] video surveillance page
+
<li> [[#Configure| Configure]] video surveillance page
 
<li> Start streamers in multicast mode
 
<li> Start streamers in multicast mode
<li> Open file index.html in Mozilla/FireFox
+
<li> Open file index.html in FireFox or Mozilla
 
<li> Answer "Yes" on question about priveleges for javascript
 
<li> Answer "Yes" on question about priveleges for javascript
 
</ol>
 
</ol>
Line 25: Line 29:
 
== Configure ==
 
== Configure ==
 
Edit file cameras.js
 
Edit file cameras.js
 +
 +
Each array top-, left-, right-, bottom_cam contains several or zero quoted IP addresses or DNS names of cameras to view.
 +
 +
Timeout is time in seconds for waiting frames from cameras.
 +
 +
Dragreverce changes the behavior when you drag video in main window.
 +
 
== Usage ==
 
== Usage ==
 
=== Page Elements ===
 
=== Page Elements ===
The page is divided on several frames wich is generated basing on cameras.js config file.
+
The page is divided on several frames. Each is generated based on cameras.js config file.
In common case is 4 periferal frames with small live video pictures.
+
In common case, it is 4 peripheral frames with small live video pictures.
 
<table border=1 style="border-style: solid; text-align:center" width=800 height=600><tr><td colspan=3 height=120>top frame</tr>
 
<table border=1 style="border-style: solid; text-align:center" width=800 height=600><tr><td colspan=3 height=120>top frame</tr>
 
<tr><td rowspan=2 width=20% height=330>left  frame<td height=300>central window<td rowspan=2 width=20%>right frame</tr>
 
<tr><td rowspan=2 width=20% height=330>left  frame<td height=300>central window<td rowspan=2 width=20%>right frame</tr>
Line 34: Line 45:
 
<tr><td colspan=3 height=120>bottom frame</tr>
 
<tr><td colspan=3 height=120>bottom frame</tr>
 
</table>
 
</table>
Each of periferal frames can be hidden if the config file not contains of corresponded javascript array.
+
Each peripheral frame can be hidden if the config file does not contain corresponding javascript array.
The periferal frames if presented has fixed sizes. Top and bottom frames has height of 199 pixels.
+
The peripheral frames, if presented, have fixed sizes. Top and bottom frames have height of 199 pixels.
Left and right frames has width of 256 pixels. Other space given to the central window.
+
Left and right frames have width of 256 pixels. Other space is given to the central window.
For example if you have 1280x1024 display, page can contain 5 small pictures in the top and in the bottom frames and
+
For example if you have 1280x1024 display, the page can contain 5 small pictures in the top and bottom frames.
also if both top and bottom frames presenred, left and right frames with 3 pictures in each and total maximum number of cameras is 16.
+
Also, if both top and bottom frames are presented, left and right frames with 3 pictures in each and total maximum number of cameras will be 16.
Or you can configure page to have 5 pictures in one side at the top, bottom, left or right.
+
Or you can configure the page to have 5 pictures in one side at the top, bottom, left or right.
 +
 
 
=== Mouse Control ===
 
=== Mouse Control ===
 
Click on small pictures to see it in the central window.
 
Click on small pictures to see it in the central window.
Line 47: Line 59:
 
=== Control Frame ===
 
=== Control Frame ===
 
<dt>1:1, 1:2, 1:4 <dd>select scale.
 
<dt>1:1, 1:2, 1:4 <dd>select scale.
<dt>fitw, fith<dd> fits width or heght to window size.
+
<dt>fitw, fith<dd> fits width or height to window size.
<dt>"/"     <dd>open main page of the selected camera.
+
<dt>/      <dd>open main page of the selected camera.
<dt>"stream" <dd>open streamers page.
+
<dt>stream <dd>open streamers page.
<dt>"monit<dd>open stream monitor page.
+
<dt>monit <dd>open stream monitor page.
<dt>"dragrev"<dd>reverse mouse scrolling by dragging.</dd>
+
<dt>dragrev<dd>reverse mouse scrolling by dragging.</dd>

Latest revision as of 17:01, 6 July 2006

in English | [[{{{de}}}|deutsch]] | [[{{{fr}}}|français]] | по-русски | автоперевод | [[{{{cn}}}|中文版]] | 机械翻译


Temporary download URL http://sourceforge.net/project/showfiles.php?group_id=105686&package_id=138717&release_id=358392

Requirements

  • Elphel cameras
  • GNU/Linux any distro
  • X-Window system
  • Mozilla or FireFox
  • GenReS plugin
  • Perl with perl threads
  • MPlayer with RTSP support with elphel patch

Install

  1. Install all required components
  2. Configure Mozilla to support codebase principal: add next string to prefs.js: user_pref("signed.applets.codebase_principal_support", true); See about: http://www.mozilla.org/projects/security/components/signed-scripts.html
  3. Configure video surveillance page
  4. Start streamers in multicast mode
  5. Open file index.html in FireFox or Mozilla
  6. Answer "Yes" on question about priveleges for javascript

Configure

Edit file cameras.js

Each array top-, left-, right-, bottom_cam contains several or zero quoted IP addresses or DNS names of cameras to view.

Timeout is time in seconds for waiting frames from cameras.

Dragreverce changes the behavior when you drag video in main window.

Usage

Page Elements

The page is divided on several frames. Each is generated based on cameras.js config file. In common case, it is 4 peripheral frames with small live video pictures.

top frame
left framecentral windowright frame
control frame
bottom frame

Each peripheral frame can be hidden if the config file does not contain corresponding javascript array. The peripheral frames, if presented, have fixed sizes. Top and bottom frames have height of 199 pixels. Left and right frames have width of 256 pixels. Other space is given to the central window. For example if you have 1280x1024 display, the page can contain 5 small pictures in the top and bottom frames. Also, if both top and bottom frames are presented, left and right frames with 3 pictures in each and total maximum number of cameras will be 16. Or you can configure the page to have 5 pictures in one side at the top, bottom, left or right.

Mouse Control

Click on small pictures to see it in the central window. Click on different part of small picture scrolls video in central window.

Scroll central window by mouse dragging on it self.

Control Frame

1:1, 1:2, 1:4
select scale.
fitw, fith
fits width or height to window size.
/
open main page of the selected camera.
stream
open streamers page.
monit
open stream monitor page.
dragrev
reverse mouse scrolling by dragging.