1 / 44

NFIC VPON Network SDK Training VPON CGI & Webpage SDK

Learn how to use CGI (URL Request) to retrieve video/audio stream, access system parameters and information, control camera and GPIO, and design your own webpage. Includes examples on how to invoke CGI requests and embed video/audio streams in your page.

gleasonr
Download Presentation

NFIC VPON Network SDK Training VPON CGI & Webpage SDK

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. NFIC VPON Network SDK TrainingVPON CGI & Webpage SDK Vincent Hao vincent@nfic.com.tw M2CA, NFIC

  2. CGI SDK: Introduction • Use CGI (URL Request) to: • Rretrieve Video/Audio Stream • Get/Set System Parameters & Information • Access GPIO • Camera Control • Read/Write COM2 Port • Design Your Own Page (+Webpage SDK) • CGI SDK Reference • Document: “VPON URL Request Syntax” VPON Network SDK Training - CGI & Webpage

  3. CGI SDK: Invoke CGI(1) • How to invoke CGI Request to VPON? • Manually invoked in URL address field of browser • Open a browser and view camera 1 of VPON • Open another browser and enter: http://10.11.1.221/camera.htm?Video_Source=0&Brightness=15 VPON Network SDK Training - CGI & Webpage

  4. CGI SDK: Invoke CGI(2) • How to invoke CGI Request to VPON(Cont.)? • Invoked in a webpage (by HTML Form): • Ex1: this example will display a page for setting brightness of video ========= EX1.HTM ========= <HTML><HEAD></HEAD><BODY> <FORM METHOD="GET" ACTION="http://10.11.1.221/camera.htm"> <INPUT TYPE="HIDDEN" NAME="Video_Source" VALUE="0"> <SELECT NAME="Brightness"> <OPTION VALUE="20">20 <OPTION VALUE="60">60 <OPTION VALUE="80">80 </SELECT> <INPUT TYPE="submit" VALUE="Done"> </FORM></BODY></HTML> VPON Network SDK Training - CGI & Webpage

  5. Invoked in a webpage (by JavaScript): ======= EX2.HTM ======= <HTML><HEAD><TITLE>Example</TITLE></HEAD> <FRAMESET ROWS="100%,*"> <FRAME NAME="ex2a" SRC="ex2a.htm"> <FRAME NAME="dummy" SRC="dummy"> </FRAMESET> </HTML> ======= EX2A.HTM ======= <HTML><HEAD><TITLE></TITLE> <script LANGUAGE="JavaScript"> <!-- function do_request(url) { parent.dummy.location = "http://10.11.1.221/"+url; } function do_brightness(str) { var k = theForm.Brightness.value; do_request("camera.htm?Video_Source=0&Brightness="+k); setTimeout("do_request('dummy')",1000); } //--> </script> </HEAD> <BODY> <FORM NAME="theForm"> <EMBED type="video/x-nficwmh263" src="http://10.11.1.221/pushall.htm;0?noinput=1&exclusive_camctrl=1&zzw=12" width=320 height=240 align="center"></EMBED><BR> <IMG SRC="BRIGHT.GIF" WIDTH="16" HEIGHT="16"> <SELECT NAME="Brightness" OnChange="do_brightness()"> <OPTION VALUE="20">20 <OPTION VALUE="60">60 <OPTION VALUE="80">80 </SELECT> </FORM> </BODY></HTML> CGI SDK: Invoke CGI(3) VPON Network SDK Training - CGI & Webpage

  6. CGI SDK: Video Stream(1) • Embed Video Stream in Your Page ======= EX3 ======= <HTML> <HEAD><TITLE>EXAMPLE</TITLE></HEAD> <BODY> <EMBED type="video/x-nficwmh263" SRC="http://10.11.1.221/pushall.htm;0?noinput=1" align="left" width=320 height=240> <EMBED type="video/x-nficwmh263" SRC="http://10.11.1.221/pushall.htm;1" align="left" width=320 height=240> </BODY></HTML> • EMBED • type • H.263: “video/x-nficwmh263” • MJPEG/JPEG: “video/x-nficwmjpeg” • src • noinput • width/height VPON Network SDK Training - CGI & Webpage

  7. Embed Video Stream (JavaApplet) Use JavaApplet to Decode, No More Plugins. liveview.class (.cla) Snapshot JPEG Image VIDEOSOURCE WIDTH HEIGHT QUERYSTRING ======== EX4 ======== <HTML> <HEAD><TITLE>EXAMPLE</TITLE></HEAD> <BODY> <APPLET align=baseline code="liveview.class" codebase="http://10.11.1.221/" width=320 height=240> <PARAM NAME="VIDEOSOURCE" VALUE="0"> <PARAM NAME="WIDTH" VALUE="320"> <PARAM NAME="HEIGHT" VALUE="240"> <PARAM NAME="QUERYSTRING" VALUE=""> </APPLET> </BODY></HTML> CGI SDK: Video Stream(2) VPON Network SDK Training - CGI & Webpage

  8. CGI SDK: Audio Stream • Embed Audio Stream in Your Page ======= EX5 ======= <HTML> <HEAD><TITLE>EXAMPLE</TITLE></HEAD> <BODY> <EMBED type="audio/x-nficwmado0" SRC="http://10.11.1.221/pushado.htm;?Audio_Source=0" WIDTH=237 HEIGHT=34 align="left"> </BODY></HTML> • type • audio/x-nficwmado0 • src • width/height • Fixed size: width=237 height=34 VPON Network SDK Training - CGI & Webpage

  9. CGI SDK: GPI & GPO • Read GPI • ex: http://10.11.1.221/gpi • Read Latched GPI Status • ex: http://10.11.1.221/gpi_latch • ex: http://10.11.1.221/gpi_latch?reset=1, this will read and clear the latched state • Control GPO • ex: http://10.11.1.221/gp0?write=A, this will turn GPO4 & GPO2 close circuit, and make GPO1 & GPO3 open circuit. • Read GPO Status • ex: http://10.11.1.221/gpo_state VPON Network SDK Training - CGI & Webpage

  10. CGI SDK: Read/Write COM2 • Read & Write COM2 of VPON http://10.11.1.221/com2?command_line • “write=hex_string”--- ex: “write=80000102FF” means writing 5 hex values to COM2, they are: 0x80, 0x00, 0x01, 0x02 and 0xFF • “flush=1”---flush the com2 read buffer • “wait=delay”---wait for delay milli-seconds • “read=size”---read size values from com2 read buffer • ex: http://10.11.1.221/com2?flush=1&write=80000102FF&wait=1000&read=1024 • Flush COM2 read buffer • Write 0x80, 0x00, 0x01, 0x02, 0xFF to COM2 • Wait for 1000 milli-seconds • Read COM2 buffer with maximum size of 1024. VPON Network SDK Training - CGI & Webpage

  11. CGI SDK: Camera Control • Camera Control • cam_ctrl.htm • ex: http://10.11.1.221/cam_ctrl.htm?Video_Source=1&Speed=1&camctrl_right=1 • This will make PTZ camera # 1 to turn right with a normal speed • Video_Source starts from 1, not the commonly used 0 VPON Network SDK Training - CGI & Webpage

  12. Redetect Camera http://10.11.1.221/detect_cam.htm Snapshot Image http://10.11.1.221/snapshot0.jpg Reboot http://10.11.1.221/reboot Query Firmware Version http://10.11.1.221/fw_version.htm Camera Settings http://10.11.1.221/camera.htm?Video_Source=0&Brightness=50&Contrast=…. Motion Detection http://10.11.1.221/detect_cam.htm Date & Time http://10.11.1.221/settime.htm System Configuration http://10.11.1.221/setcfig.htm?MASTERCODE=1&IpAddr=192.168.10.10&name=webmonitor&passwd=…... Alarm Status & Remote Control http://10.11.1.221/alarm.htm CGI SDK: Other Requests(1) VPON Network SDK Training - CGI & Webpage

  13. Set Names & On-Screen-Display http://10.11.1.221/camera_name.htm Set User’s Authority http://10.11.1.221/limitusr.htm CGI SDK: Other Requests(2) VPON Network SDK Training - CGI & Webpage

  14. Webpage SDK: Introduction • Use Webpage SDK to: • Upload/Download Webpages to/from VPON. • Design your own webpages • Use a set of “Tokens” to retrieve system parameters and embed them in the pages you designed. • Design pages that required different access rights • Use a Text Editor, Do not use MS Word or HTML Editor • Webpage SDK Reference • Document: “VPON Webpage Syntax” VPON Network SDK Training - CGI & Webpage

  15. C:\ WWW ADMIN USER Webpage SDK: Introduction • Directory Architecture of FTP Server • Login as administrator, root will be C:\WWW • Login as user, root will be C:\WWW\USER • C:\WWW\ • Used to store webpages require no password VPON Network SDK Training - CGI & Webpage

  16. Webpage SDK: Introduction • C:\WWW\USER\ • Used to store webpages require user password • C:\WWW\ADMIN\ • Used to store webpages require admin password • Webpage Search Policy: • Find in C:\WWW\ • Find in C:\WWW\USER • Find in C:\WWW\ADMIN • Find in FW Embedded Webpages VPON Network SDK Training - CGI & Webpage

  17. Webpage SDK: Introduction • Support DOS 8.3 Filename Format • .class -> .cla • .jpeg -> .jpe • .html -> .htm • Use FTP Application or FTP Command under DOSBOX to Upload/Download Webpages • Before Modification, Backup First! VPON Network SDK Training - CGI & Webpage

  18. Webpage SDK:Token • Token • Special tag enclosed by ‘<$’ and ‘$>’ • Number of these special tag is finite • Token will be parsed by FW and will be replaced by a string • Only HTML file will be parsed • Ex: Assume the current time of VPON is 10:36:54, token <$Date$> will be replaced by “10:36:54” VPON Network SDK Training - CGI & Webpage

  19. Webpage SDK:Token • Token • Token can have parameter, separate by colon, ex: <$CameraName:0$> will be replaced by the name of camera # 1 • Token may have more than 1 parameters, ex: <IfSel_GPI:0:1>, 0 is the first parameter, point to GPI1. 1 is the second parameter, means NC (Normal Close). This token will be replaced by “selected” if GPI1 is now set as NC, otherwise it will be replaced as an empty string. VPON Network SDK Training - CGI & Webpage

  20. Webpage SDK:Token • IfSel_xxxx • Used with selection of a form • If the statement is TRUE, this token will be evaluate as “selected”, otherwise an empty string is used. • IfChk_xxxx • Used with checkbox and radio button of a form • If the statement is TRUE, this token will be evaluate as “checked”, otherwise an empty string is used. VPON Network SDK Training - CGI & Webpage

  21. Webpage SDK:Token • All the tokens can be found in the webpages shipped with VPON. • When you designing your own page, find the use of tokens in the VPON pages as a good reference. VPON Network SDK Training - CGI & Webpage

  22. Date Time ServerName CameraName IpAddr CurrIpAddr VideoMimeType AudioMimeType Example: ex10.htm EtherAddr FirmwareVersion FirmwareDate UserName UserPass AdminName AdminPass GPI_State Example: ex11.htm Webpage SDK:Useful Tokens VPON Network SDK Training - CGI & Webpage

  23. Webpage SDK:Useful Tokens • Edit ex10.htm & ex11.htm • Login VPON FTP server • Upload ex10.htm & ex11.htm to C:\WWW\USER • Use browser to view these two pages • Use browser to view the source of the page • You will find all the tokens have been replaced by system parameters. VPON Network SDK Training - CGI & Webpage

  24. ========= EX10.HTM ========= <HTML><HEAD><TITLE>Example</TITLE> </HEAD><BODY> Date:<$Date$><br> Time:<$Time$><br> ServerName:<$ServerName$><br> Camera 1 Name:<$CameraName:0$><br> Camera 2 Name:<$CameraName:1$><br> Camera 3 Name:<$CameraName:2$><br> Camera 4 Name:<$CameraName:3$><br> IP Address in System Configuration:<$IpAddr$><br> Current System IP Address:<$CurrIpAddr$><br> Video MIME Type:<$VideoMimeType$><br> Audio MIME Type:<$AudioMimeType$><br> </BODY></HTML> ====== EX10.HTM Result ======= Date:2001/02/01 Time:18:24:09 ServerName:VPON Camera Server Camera 1 Name:Camera 1 Camera 2 Name:Camera 2 Camera 3 Name:Camera 3 Camera 4 Name:Camera 4 IP Address in System Configuration:10.11.1.221 Current System IP Address:10.11.1.221 Video MIME Type:video/x-nficwmh263 Audio MIME Type:audio/x-nficwmado0 Webpage SDK:Useful Tokens VPON Network SDK Training - CGI & Webpage

  25. ======== EX11.HTM ======== <HTML><HEAD><TITLE>Example</TITLE></HEAD> <BODY> Ethernet Address:<$EtherAddr$><br> Firmware Version:<$FirmwareVersion$><br> Firmware Date:<$FirmwareDate$><br> User's Name:<$UserName$><br> User's Password:<$UserPass$><br> Administrator's Name:<$AdminName$><br> Administrator's Password:<$AdminPass$><br> GPI1 State:<$GPI_State:0$><br> GPI2 State:<$GPI_State:1$><br> GPI3 State:<$GPI_State:2$><br> GPI4 State:<$GPI_State:3$><br> </BODY> </HTML> ====== EX11.HTM Result ======== Ethernet Address:00:40:CA:81:1E:BA Firmware Version:3.02 Firmware Date: Jan 19 2001 11:43:09 User's Name:1 User's Password:1 Administrator's Name:2 Administrator's Password:2 GPI1 State: GPI2 State: GPI3 State: GPI4 State: Webpage SDK:Useful Tokens VPON Network SDK Training - CGI & Webpage

  26. Webpage SDK:Tokens for Selected Camera • Some tokens depends on which camera now is selected: • VidSrcSel • CameraNameSel • IfSel_VidSrc • IfSel_CamCtrlSpeed • Pass Video_Source=xx in the query string • Example:ex12.htm VPON Network SDK Training - CGI & Webpage

  27. Webpage SDK:Tokens for Selected Camera <html><head></head> <body><form><br> Name of Camera <$VidSrcSel$> is <$CameraNameSel$>.<SELECT NAME="Video_Source"> <OPTION VALUE="0" <$IfSel_VidSrc:0$> ><$CameraName:0$> <OPTION VALUE="1" <$IfSel_VidSrc:1$> ><$CameraName:1$> <OPTION VALUE="2" <$IfSel_VidSrc:2$> ><$CameraName:2$> <OPTION VALUE="3" <$IfSel_VidSrc:3$> ><$CameraName:3$> </SELECT><br> The Current PTZ speed of <$CameraNameSel$> is:<SELECT> <OPTION VALUE="0" <$IfSel_CamCtrlSpeed:0$> >Slow <OPTION VALUE="1" <$IfSel_CamCtrlSpeed:1$> >Normal <OPTION VALUE="2" <$IfSel_CamCtrlSpeed:2$> >Fast </SELECT><br> </form></body></html> VPON Network SDK Training - CGI & Webpage

  28. Webpage SDK:Other Tokens • AdoSrcSel, IfSel_AdoSrc, IfSel_MicGain, IfSel_SpkVol, also, should pass Audio_Source=xxx in query string • Other Tokens are relatively not so frequently used, for the detailed reference, please see “VPON Webpage Syntax” VPON Network SDK Training - CGI & Webpage

  29. CGI Example-test1.htm • This example, test1.htm & testf1.htm will demostrate how to use CGI to do camera control and camera settings • This example does not use tokens, thus it’s not a dynamic page. VPON Network SDK Training - CGI & Webpage

  30. CGI Example-test1.htm VPON Network SDK Training - CGI & Webpage

  31. function do_focus_near(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_fnear=1"); } function do_focus_far(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_ffar=1"); } function do_brightness(str) { var k = theForm.Brightness.value; do_request("camera.htm?Video_Source=0&Brightness="+k); setTimeout("do_request('dummy')",1000); } function do_contrast(str) { var k = theForm.Contrast.value; do_request("camera.htm?Video_Source=0&Contrast="+k); setTimeout("do_request('dummy')",1000); } function do_saturation(str) { var k = theForm.Saturation.value; do_request("camera.htm?Video_Source=0&Saturation="+k); setTimeout("do_request('dummy')",1000); } function do_hue(str) { var k = theForm.Hue.value; do_request("camera.htm?Video_Source=0&Hue="+k); setTimeout("do_request('dummy')",1000); } //--> </script> </HEAD> ========= TESTF1.HTM ========= <html><head><title>Example</title></head> <FRAMESET ROWS="100%,*"> <FRAME NAME="ptz" SRC="test1.htm"> <FRAME NAME="dummy" SRC="dummy"> </FRAMESET> </HTML> ========= TEST1.HTM ========= <HTML><HEAD><TITLE></TITLE> <script LANGUAGE="JavaScript"> <!-- function do_request(url) { //alert("url="+url); parent.dummy.location = "http://10.11.1.221/"+url; } function do_pan_left(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_left=1"); } function do_pan_right(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_right=1"); } function do_tilt_up(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_up=1"); } function do_tilt_down(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_down=1"); } function do_zoom_in(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_zoomin=1"); } function do_zoom_out(str) { do_request("cam_ctrl.htm?Video_Source=0&camctrl_zoomout=1"); }

  32. <OPTION VALUE="35">35 <OPTION VALUE="40">40 <OPTION VALUE="45">45 <OPTION VALUE="50">50 <OPTION VALUE="55">55 <OPTION VALUE="60">60 <OPTION VALUE="65">65 <OPTION VALUE="70">70 <OPTION VALUE="75">75 <OPTION VALUE="80">80 <OPTION VALUE="85">85 <OPTION VALUE="90">90 <OPTION VALUE="95">95 </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT"><IMG SRC="SATU.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Saturation" OnChange="do_saturation()"> <OPTION VALUE="15">15 <OPTION VALUE="20">20 <OPTION VALUE="25">25 <OPTION VALUE="30">30 <OPTION VALUE="35">35 <OPTION VALUE="40">40 <OPTION VALUE="45">45 <OPTION VALUE="50">50 <OPTION VALUE="55">55 <OPTION VALUE="60">60 <OPTION VALUE="65">65 <OPTION VALUE="70">70 <OPTION VALUE="75">75 <OPTION VALUE="80">80 <OPTION VALUE="85">85 <OPTION VALUE="90">90 <OPTION VALUE="95">95 </SELECT></TD> </TR> <BODY BGCOLOR="#C0C0C0"> <FORM NAME="theForm"> Server:VP300<BR> Camera:Camera 1<BR><HR> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=3> <TR> <TD VALIGN="TOP" ALIGN="CENTER" ROWSPAN="4"> <EMBED type="video/x-nficwmh263" src="http://10.11.1.221/push.htm;0?noinput=1" width=320 height=240 align="center"></EMBED> </TD> <TD ALIGN="RIGHT"><IMG SRC="BRIGHT.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Brightness" OnChange="do_brightness()"> <OPTION VALUE="15">15 <OPTION VALUE="20">20 <OPTION VALUE="25">25 <OPTION VALUE="30">30 <OPTION VALUE="35">35 <OPTION VALUE="40">40 <OPTION VALUE="45">45 <OPTION VALUE="50">50 <OPTION VALUE="55">55 <OPTION VALUE="60">60 <OPTION VALUE="65">65 <OPTION VALUE="70">70 <OPTION VALUE="75">75 <OPTION VALUE="80">80 <OPTION VALUE="85">85 <OPTION VALUE="90">90 <OPTION VALUE="95">95 </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT"><IMG SRC="CONT.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Contrast" OnChange="do_contrast()"> <OPTION VALUE="15">15 <OPTION VALUE="20">20 <OPTION VALUE="25">25 <OPTION VALUE="30">30

  33. <TR> <TD ALIGN="RIGHT">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="HUE.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Hue" OnChange="do_hue()"> <OPTION VALUE="15">15 <OPTION VALUE="20">20 <OPTION VALUE="25">25 <OPTION VALUE="30">30 <OPTION VALUE="35">35 <OPTION VALUE="40">40 <OPTION VALUE="45">45 <OPTION VALUE="50">50 <OPTION VALUE="55">55 <OPTION VALUE="60">60 <OPTION VALUE="65">65 <OPTION VALUE="70">70 <OPTION VALUE="75">75 <OPTION VALUE="80">80 <OPTION VALUE="85">85 <OPTION VALUE="90">90 <OPTION VALUE="95">95 </SELECT></TD> </TR> </TABLE> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=3> <TR> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 > <TR><TD></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_up" VALUE=" UP " OnClick="do_tilt_up()"></CENTER></TD> <TD></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_left" VALUE="LEFT " OnClick="do_pan_left()"></CENTER></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stoppt" VALUE="STOP "></CENTER></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_right" VALUE="RIGHT" OnClick="do_pan_right()"></CENTER></TD></TR> <TR><TD></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_down" VALUE="DOWN " OnClick="do_tilt_down()"></CENTER></TD> <TD></TD></TR> </TABLE></TD> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_zoomin" VALUE="Zoom+" OnClick="do_zoom_in()"></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stopz" VALUE="STOP "</CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_zoomout" VALUE="Zoom-" OnClick="do_zoom_out()"></CENTER></TD></TR> </TABLE></TD> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_fnear" VALUE="Focus+" OnClick="do_focus_near()"></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stopf" VALUE="STOP "></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_ffar" VALUE="Focus-" OnClick="do_focus_far()"></CENTER></TD></TR> </TABLE></TD> </TR> </TABLE> </FORM> </body> </html>

  34. CGI Example-test1.htm • testf1.htm create two frames, test1.htm will be displayed in the visible one, ptz frame. And the invisible one, dummy frame, will be used to send request and receive response. • test1.htm • do_request() will invoke the request thru dummy frame • do_pan_xxx, do_tilt_xxx, do_zoom_xxx, do_focus_xxx invoke cam_ctrl.htm CGI request via do_request. • do_brightness, do_contrast, do_hue, do_saturation invoke camera.htm CGI request. VPON Network SDK Training - CGI & Webpage

  35. CGI Example-test1.htm • test1.htm • This page can only control camera 1, to control other cameras, more pages are required. • Camera settings cannot be initialized • The name of server and camera are hard-coded. • The MIME type is hardcoded • The IP address is hardcoded, can be solved by put this page onto VPON. • To solve these problems, use Webpage SDK. VPON Network SDK Training - CGI & Webpage

  36. Token & CGI Example-test2.htm • This example, test2.htm & testf2.htm will demostrate how to use CGI and Tokens to do camera control and camera settings • This example shows how to write a dynamic page using tokens. • This example is directly modify from the previous example - test1.htm. • We change some parameters of test1.htm with tokens that when we put test2.htm onto VPON, we can make this page more flexible. VPON Network SDK Training - CGI & Webpage

  37. Token & CGI Example-test2.htm VPON Network SDK Training - CGI & Webpage

  38. function do_tilt_down(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_down=1&zzw=<$CamCtrlToken$>"); } function do_zoom_in(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_zoomin=1&zzw=<$CamCtrlToken$>"); } function do_zoom_out(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_zoomout=1&zzw=<$CamCtrlToken$>"); } function do_focus_near(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_fnear=1&zzw=<$CamCtrlToken$>"); } function do_focus_far(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_ffar=1&zzw=<$CamCtrlToken$>"); } function do_brightness(str) { var k = theForm.Brightness.value; do_request("camera.htm?Video_Source=<$VidSrcSel$>&Brightness="+k); setTimeout("do_request('dummy')",1000); } ========= TESTF2.HTM ========= <html><head><title>Example</title></head> <FRAMESET ROWS="100%,*"> <FRAME NAME="ptz" SRC="test2.htm?Video_Source=<$VidSrcSel$>&zzw=<$CamCtrlToken$>"> <FRAME NAME="dummy" SRC="dummy"> </FRAMESET> </HTML> ========= TEST2.HTM ========= <HTML><HEAD><TITLE></TITLE> <script LANGUAGE="JavaScript"> <!-- function do_request(url) { //alert("url="+url); parent.dummy.location = url; } function do_pan_left(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_left=1&zzw=<$CamCtrlToken$>"); } function do_pan_right(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_right=1&zzw=<$CamCtrlToken$>"); } function do_tilt_up(str) { var k =<$VidSrcSel$>+1; do_request("cam_ctrl.htm?Video_Source="+k+"&camctrl_up=1&zzw=<$CamCtrlToken$>"); }

  39. <TD ALIGN="RIGHT">Camera:</TD> <TD><SELECT NAME="Video_Source" OnChange="change_source()"> <OPTION VALUE="0" <$IfSel_VidSrc:0$> ><$CameraName:0$> <OPTION VALUE="1" <$IfSel_VidSrc:1$> ><$CameraName:1$> <OPTION VALUE="2" <$IfSel_VidSrc:2$> ><$CameraName:2$> <OPTION VALUE="3" <$IfSel_VidSrc:3$> ><$CameraName:3$> </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT"><IMG SRC="BRIGHT.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Brightness" OnChange="do_brightness()"> <OPTION VALUE="15" <$IfSel_Brightness:15$> >15 <OPTION VALUE="20" <$IfSel_Brightness:20$> >20 <OPTION VALUE="25" <$IfSel_Brightness:25$> >25 <OPTION VALUE="30" <$IfSel_Brightness:30$> >30 <OPTION VALUE="35" <$IfSel_Brightness:35$> >35 <OPTION VALUE="40" <$IfSel_Brightness:40$> >40 <OPTION VALUE="45" <$IfSel_Brightness:45$> >45 <OPTION VALUE="50" <$IfSel_Brightness:50$> >50 <OPTION VALUE="55" <$IfSel_Brightness:55$> >55 <OPTION VALUE="60" <$IfSel_Brightness:60$> >60 <OPTION VALUE="65" <$IfSel_Brightness:65$> >65 <OPTION VALUE="70" <$IfSel_Brightness:70$> >70 <OPTION VALUE="75" <$IfSel_Brightness:75$> >75 <OPTION VALUE="80" <$IfSel_Brightness:80$> >80 <OPTION VALUE="85" <$IfSel_Brightness:85$> >85 <OPTION VALUE="90" <$IfSel_Brightness:90$> >90 <OPTION VALUE="95" <$IfSel_Brightness:95$> >95 </SELECT></TD> </TD> <TR> function do_contrast(str) { var k = theForm.Contrast.value; do_request("camera.htm?Video_Source=<$VidSrcSel$>&Contrast="+k); setTimeout("do_request('dummy')",1000); } function do_saturation(str) { var k = theForm.Saturation.value; do_request("camera.htm?Video_Source=<$VidSrcSel$>&Saturation="+k); setTimeout("do_request('dummy')",1000); } function do_hue(str) { var k = theForm.Hue.value; do_request("camera.htm?Video_Source=<$VidSrcSel$>&Hue="+k); setTimeout("do_request('dummy')",1000); } function change_source() { var k = theForm.Video_Source.value; parent.location = "testf2.htm?Video_Source="+k; } //--> </script> </HEAD> <BODY BGCOLOR="#C0C0C0"> <FORM NAME="theForm"> Server:<$ServerName$><BR> Camera:<$CameraNameSel$><BR><HR> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=3> <TR> <TD VALIGN="TOP" ALIGN="CENTER" ROWSPAN="5"> <EMBED type="<$VideoMimeType$>" src="push.htm;<$VidSrcSel$>?noinput=1" width=320 height=240 align="center"></EMBED> </TD>

  40. <TD ALIGN="RIGHT"><IMG SRC="CONT.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Contrast" OnChange="do_contrast()"> <OPTION VALUE="15" <$IfSel_Contrast:15$> >15 <OPTION VALUE="20" <$IfSel_Contrast:20$> >20 <OPTION VALUE="25" <$IfSel_Contrast:25$> >25 <OPTION VALUE="30" <$IfSel_Contrast:30$> >30 <OPTION VALUE="35" <$IfSel_Contrast:35$> >35 <OPTION VALUE="40" <$IfSel_Contrast:40$> >40 <OPTION VALUE="45" <$IfSel_Contrast:45$> >45 <OPTION VALUE="50" <$IfSel_Contrast:50$> >50 <OPTION VALUE="55" <$IfSel_Contrast:55$> >55 <OPTION VALUE="60" <$IfSel_Contrast:60$> >60 <OPTION VALUE="65" <$IfSel_Contrast:65$> >65 <OPTION VALUE="70" <$IfSel_Contrast:70$> >70 <OPTION VALUE="75" <$IfSel_Contrast:75$> >75 <OPTION VALUE="80" <$IfSel_Contrast:80$> >80 <OPTION VALUE="85" <$IfSel_Contrast:85$> >85 <OPTION VALUE="90" <$IfSel_Contrast:90$> >90 <OPTION VALUE="95" <$IfSel_Contrast:95$> >95 </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT"><IMG SRC="SATU.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Saturation" OnChange="do_saturation()"> <OPTION VALUE="15" <$IfSel_Saturation:15$> >15 <OPTION VALUE="20" <$IfSel_Saturation:20$> >20 <OPTION VALUE="25" <$IfSel_Saturation:25$> >25 <OPTION VALUE="30" <$IfSel_Saturation:30$> >30 <OPTION VALUE="35" <$IfSel_Saturation:35$> >35 <OPTION VALUE="40" <$IfSel_Saturation:40$> >40 <OPTION VALUE="45" <$IfSel_Saturation:45$> >45 <OPTION VALUE="50" <$IfSel_Saturation:50$> >50 <OPTION VALUE="55" <$IfSel_Saturation:55$> >55 <OPTION VALUE="60" <$IfSel_Saturation:60$> >60 <OPTION VALUE="65" <$IfSel_Saturation:65$> >65 <OPTION VALUE="70" <$IfSel_Saturation:70$> >70 <OPTION VALUE="75" <$IfSel_Saturation:75$> >75 <OPTION VALUE="80" <$IfSel_Saturation:80$> >80 <OPTION VALUE="85" <$IfSel_Saturation:85$> >85 <OPTION VALUE="90" <$IfSel_Saturation:90$> >90 <OPTION VALUE="95" <$IfSel_Saturation:95$> >95 </SELECT></TD> </TR> <TR> <TD ALIGN="RIGHT">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG SRC="HUE.GIF" WIDTH="16" HEIGHT="16"></TD> <TD><SELECT NAME="Hue" OnChange="do_hue()"> <OPTION VALUE="15" <$IfSel_Hue:15$> >15 <OPTION VALUE="20" <$IfSel_Hue:20$> >20 <OPTION VALUE="25" <$IfSel_Hue:25$> >25 <OPTION VALUE="30" <$IfSel_Hue:30$> >30 <OPTION VALUE="35" <$IfSel_Hue:35$> >35 <OPTION VALUE="40" <$IfSel_Hue:40$> >40 <OPTION VALUE="45" <$IfSel_Hue:45$> >45 <OPTION VALUE="50" <$IfSel_Hue:50$> >50 <OPTION VALUE="55" <$IfSel_Hue:55$> >55 <OPTION VALUE="60" <$IfSel_Hue:60$> >60 <OPTION VALUE="65" <$IfSel_Hue:65$> >65 <OPTION VALUE="70" <$IfSel_Hue:70$> >70 <OPTION VALUE="75" <$IfSel_Hue:75$> >75 <OPTION VALUE="80" <$IfSel_Hue:80$> >80 <OPTION VALUE="85" <$IfSel_Hue:85$> >85 <OPTION VALUE="90" <$IfSel_Hue:90$> >90 <OPTION VALUE="95" <$IfSel_Hue:95$> >95 </SELECT></TD> </TR> </TABLE> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=3> <TR> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 > <TR><TD></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_up" VALUE=" UP " OnClick="do_tilt_up()"></CENTER></TD> <TD></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_left" VALUE="LEFT " OnClick="do_pan_left()"></CENTER></TD>

  41. <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stoppt" VALUE="STOP "></CENTER></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_right" VALUE="RIGHT" OnClick="do_pan_right()"></CENTER></TD></TR> <TR><TD></TD> <TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_down" VALUE="DOWN " OnClick="do_tilt_down()"></CENTER></TD> <TD></TD></TR> </TABLE></TD> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_zoomin" VALUE="Zoom+" OnClick="do_zoom_in()"></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stopz" VALUE="STOP "</CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_zoomout" VALUE="Zoom-" OnClick="do_zoom_out()"></CENTER></TD></TR> </TABLE></TD> <TD><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_fnear" VALUE="Focus+" OnClick="do_focus_near()"></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_stopf" VALUE="STOP "></CENTER></TD></TR> <TR><TD><CENTER><INPUT TYPE="BUTTON" NAME="camctrl_ffar" VALUE="Focus-" OnClick="do_focus_far()"></CENTER></TD></TR> </TABLE></TD> </TR> </TABLE> </FORM> </body> </html>

  42. Token & CGI Example-test2.htm • testf2.htm • Put <$VidSrcSel$> token in query string to pass the current selected camera into test2.htm • Put <$CamCtrlToken$> token to pass an allocated camera control token (handle) for ptz control. • test2.htm • do_pan_xxx, do_tilt_xxx, do_zoom_xxx, do_focus_xxx use <$VidSrcSel$> and increase by 1 as the video source parameters to cam_ctrl.htm, thus can control any one camera. VPON Network SDK Training - CGI & Webpage

  43. Token & CGI Example-test2.htm • test2.htm • do_brightness, do_contrast, do_hue, do_saturation will read the current selected value from the form then invoke camera.htm CGI request. • setTimeout("do_request('dummy')",1000); is used to break the video stream on the returned page in dummy frame, because this will decrease the performance. • We add a new video source selection in the form which will call change_source(). This function will read the selected video source and pass to testf2.htm. VPON Network SDK Training - CGI & Webpage

  44. Token & CGI Example-test2.htm • test2.htm • Video MIME type and video source now are dynamic, one page can serve all the camera and various codec type. • Server name and camera name and IP are also dynamic. • Camera settings can be initialized by <$IfSel_xxx:nn$> tokens VPON Network SDK Training - CGI & Webpage

More Related