Recently in the development process need to use the sea-Conway camera on the Web side display in a variety of Baidu found online difficult to find a simple, reliable tutorial
After fumbling to finish the project, decided to write a strategy for the benefit of a small partner in need
Anyway
First need to download a Hai Kang Wei development package (Baidu search "Hai Kang Granville as the Web Development package") can also give me a message for 3.0 development Kits
Step One: Open the downloaded file and find the Demo folder codebase
Click on the WebComponents.exe installation note version number and 32-bit 64-bit (there are 64 bits of wood here)
If there is no suitable please go to the website to download
Step two: In the folder
Demo.js
Demo.css
Webvideoctrl.js
These 3 files are imported into your project and you need jquery without a small partner can guide the development package inside of the 1.7
This is when the HTML file that is imported into the development package can open such a page
OK Demo Opens the login to enter your camera configuration address and Account password port number Click Login
You can find the login device click on the Device selected window click Preview
This time the screen can come out (the introduction of JS Note address OH)
The first step is done, and we're connected to the camera.
The following is a Web development package that starts to do what we need to do, and we need to use the API to do what we want to do in the webvideoctrl.js.
For example, what I need is a monitor that opens an event match when the page is open and displays it on the page, opening a certain window based on the number of monitors.
1. Open Page Initialization plugin
Initializing Plug-ins
Global Save the currently selected window
var g_iwndindex = 0; You can not set this variable, there are window parameters of the interface, do not have to pass the value, the development package will default to use the current selection window
$ (function () {
Check if the plugin has been installed
if ( -1 = Webvideoctrl.i_checkplugininstall ()) {
Alert ("You have not installed the plugin yet, download the WebComponents.exe installation.") ");
Return
}
Initializing plug-in parameters and inserting plug-ins
Webvideoctrl.i_initplugin (951.5, 360, {
Iwndowtype:2,
Cbselwnd:function (xmldoc) {
G_iwndindex = $ (xmldoc). Find ("Selectwnd"). EQ (0). text ();
var szinfo = "Currently selected window number:" + g_iwndindex;
Showcbinfo (Szinfo);
}
});
Webvideoctrl.i_insertobjectplugin ("Divplugin");
Check to see if the plugin is up to date
if ( -1 = Webvideoctrl.i_checkpluginversion ()) {
Alert ("A new version of the plug-in has been detected, please upgrade the WebComponents.exe.") ");
Return
}
Window Event Bindings
$ (window). Bind ({
Resize:function () {
var $Restart = $ ("#restartDiv");
if ($Restart. length > 0) {
var osize = Getwindowsize ();
$Restart. CSS ({
Width:oSize.width + "px",
Height:oSize.height + "px"
});
}
}
});
Initialization Date Time
var szcurtime = DateFormat (New Date (), "yyyy-mm-dd");
$ ("#starttime"). Val (szcurtime + "00:00:00");
$ ("#endtime"). Val (szcurtime + "23:59:59");
Here to invoke the login and preview method with settimeout, if the direct call will not open the window, because it takes time to load the
Window.settimeout (Clicklogin (), 1000);
Window.settimeout (Clickstartrealplay (), 1000);
});
2 Write a login method
var ce02m=new Array ();
var ce03m=new Array ();
var ce04m=new Array ();
var ce05m=new Array ();
<c:foreach items= "${monitor}" var= "Monitor11" >
Ce02m.push ("${monitor11.ce02}");
Ce03m.push ("${monitor11.ce03}");
Ce04m.push ("${monitor11.ce04}");
Ce05m.push ("${monitor11.ce05}");
</c:forEach>
var szip = ce02m;
var szport = ce05m;
var szusername = ce03m;
var szpassword = ce04m;
Login
function Clicklogin () {
for (Var i=0;i<szip.length;i++) {
var iRet = Webvideoctrl.i_login (Szip[i], 1, szport[i], szusername[i], Szpassword[i], {
});
}
}
Webvideoctrl.i_login () need to pass 4 value account address password port port default is 80 can not pass
I received a list<model> from the background in JS with a foreach traversal into array ()
3. Open the page
function Clickstartrealplay () {
for (Var i=0;i<szip.length;i++) {
Iwndindex=i;
var iRet = Webvideoctrl.i_startrealplay (Szip[i], {
Iwndindex:iwndindex
});
}
Several accounts open several windows
if (ce02m.length>9) {
Changewndnum (4);
}else{
if (ce02m.length>4) {
Changewndnum (3);
}else{
Changewndnum (2);
}
}
Webvideoctrl.i_startrealplay need to send an address, it's a must.
Iwndindex is the selected window number, in the case of the default is 0, I said, you can press the loop to open the fixed window number Changewndnum This method is to open several Windows default 4 formats 1*1 2*2
3*3 4*4 according to the respective corresponding parameters 1 2 3 4
The remaining JSP only needs to call the window style and the JS CSS file reflected
<div id= "Divplugin" class= "plugin" ></div>
If you need to resize the window to find plugin in CSS
/* Plugin * *
. Plugin
{
width:951.5px;
height:360px;
}
Note that you have to make adjustments when loading, or the window is unchanged.
Initializing plug-in parameters and inserting plug-ins
Webvideoctrl.i_initplugin (951.5, 360, {}
OK function Perfect Implementation