利用 iPush^® Server 實作一個簡單的 Internet 影像監控系統

本期內容大綱

• <編輯手札> ─ 千里眼、順風耳

• <訊息論壇> ─ 實作篇：利用 iPush Server 實作一個簡單的 Internet 影像監控系統

• <艾揚快訊> ─ 艾揚獲邀參與「臺灣 50 指數股票型基金暨指數期貨」上市典禮活動 (附照片 2 張)

• <艾揚快訊> ─ 由艾揚提供即時金融訊息傳遞技術，統一期貨開發的「System 2010」操盤軟體正式上市

千里眼、順風耳

「千里眼、順風耳」，當代科技已經創造出無限的想像空間，各種新穎的應用不斷出現，消費市場也不斷胃納多樣化的聲音與影像訊息傳遞工具，現在我們可以發現有許多「摩登行動族」，手拿二支以上行動通訊裝備，背包裝著新款 Centrino 行動筆記型電腦，連西裝口袋的 PDA 也能夠具備網路連線能力，隨時隨地想上網就上網，想遺漏資訊也難。

回頭想想，這樣真的就能夠獲得「重要」資訊嗎？有了這麼好的配備，電子郵件大概是不會遺漏了，再不行換一支大螢幕的 Sony Ericsson P800 大概就夠了，遇上 ICQ 或 MSN 的伙伴急著找人，全天候連網的 GPRS 系統大概也能符合「隨 Call 隨到」的需求，不過，這麼多樣化的訊息，要用上這麼多訊息載體，您真的享受到現代「千里眼、順風耳」的好處與樂趣了嗎？放心，即使沒享受到這些即時通訊裝備的好處，至少身體練得不錯，光是背著這些硬體就可以消耗不少卡路里了。

在 iPush^® Server 通訊平台上，我們思考的應用是想要透過通用與跨平台特性，建立起新世代的訊息傳遞應用架構。以 iPush^® Server 作為各資訊系統之間溝通的橋樑，快速執行訊息的交換。換句話說，只要您的數位資訊可以使用 IP 通訊封包進行封裝， iPush^® Server 就能夠替您處理訊息傳遞的工作，這就是 iPush^® Server「以簡御繁」的道理所在。也是我們一連串執行近三個月電子報專題的精神所在：您儘管創造 Rich Content，iPush^® Server 都會為您執行 Simple Messaging 的傳遞。

在本期電子報的實作當中，我們規劃了使用 iPush^® Server 建立現代「千里眼」的方法。市場上有沒有其他軟體作得到？絕對有！那艾揚拿什麼跟別人比？回到我們想要提醒大家的重點， iPush^® Server 最大的優點，在於快速建構跨平台的訊息傳遞應用，以系統低耦合度的方式，讓異質系統間的溝通成為一件簡單的工作，並且具備高度的應用彈性與穩定特性。想讓您的遠端視訊監控系統架構更為簡單、更為迅速、更為穩定嗎？跟著艾揚 ICERs 的腳步，一起實作屬於您的「千里眼」 吧

<實作篇> 利用 iPush^® Server 實作一個簡單的 Internet 影像監控系統

在本實作中，我們使用 iPush^® Java API 在 IE 瀏覽器上實作一個 Internet 影像監控系統，接收來自 Data Generator (via iPush^® Server) 的即時影像，將即時影像顯示於 Java Applet 上。並利用 iPush^® ActiveX API 傳送影像控制指令給 Data Generator，命令其啟動/暫停/停止傳送即時影像訊息，達成雙向溝通的目的。

這個實作的架構如圖1. 所示，訊息流除了有來自 WebCam 和來自其他 Video Server 的即時影像之外，還有由顯示端 (IE 瀏覽器) 所下達的指令：

圖1. 實作架構圖

iPush^® Server 的 Channel 規劃如下：

本實作的所有相關程式碼，可於此處下載壓縮檔，解壓縮後放在c:\lab\lab4位置裡即可。

STEP 01：安裝 iPush^® Server

如果已經安裝，或有現成的 iPush^® Server 主機，則可跳過此步驟。

STEP 02：新增 Service 與 User 帳號，並測試是否運作正常

使用 iPush^® Server 的 BackOffice 管理介面，新增以下 Service 與 User 帳號：

Service：

• Group：lab
• Product：lab4

User1 - 訊息接收者：

• Group：lab
• Product：lab4
• User ID：image_monitor
• Password：image_monitor
• Read Permission：ch06-ch09
• Write Permission：ch96-ch99

User2 - 訊息傳送者：

• Group：lab
• Product：lab4
• User ID：datagen
• Password：datagen
• Read Permission：ch96-ch99
• Write Permission：ch06-ch09

你可以開啟兩個由艾揚提供的 TestMsgAgent 測試程式，一個作為訊息傳送者，另一個作為訊息接收者，測試兩者是否可以正常送收訊息。

STEP 03：安裝 Java Development Kit (JDK)

在接下來的步驟中，我們會以 Data Generator 程式作為即時訊息的產生者。由於 Data Generator 是以 Java 撰寫，執行時必須要有 JRE 執行環境才行。若已經安裝則可以跳過；若尚未安裝，可至 http://java.sun.com/j2se/1.4.1/download.html下載 Windows ( all languages, including English) 版的 J2SE SDK v1.4.1_03，執行 j2sdk-1_4_1_03-windows-i586.exe 進行安裝 ，安裝後不需要重新開機。

STEP 04：設定與測試 Data Generator

打開 c:\lab\lab4\datagen\datagen.properties 檔案 (可以使用記事本開啟編輯之)，對應在 STEP 02 新增的 Data Generator Service 與 User 帳號，更改與 iPush^® Server 連線所需的資訊：

ipush,ServerAddress= 即您 iPush Server 的 IP 位址
ipush.ServerPort= 即 iPush Server 的 IP 服務埠號 ( for Windows 2000 版本預設為 8000)
ipush.Company (即 Group)= lab
ipush.Product= lab4
ipush.Username= datagen
ipush.Password= datagen

其餘選項不變 (使用者可以自行依需要進行變更)

接著，開啟一個 DOS 作業視窗 (命令提示字元)，於其中執行 c:\lab\lab4\datagen\ datagen.bat，讓 Data Generator 可以根據設定，開始供給 (Publish) 資料到 iPush^® Server。執行前請先確認先前安裝的 iPush^® Server 正常運作中。 　

圖2. 執行 datagen.bat 的結果

STEP 05：實作 Image Monitoring – 使用 Java Applet

步驟一： 按照接收訊息步驟加入程式碼：

1. 與 iPush^® Server 連線/斷線

• 使用 Method netConnect() 進行連線

2. 判斷是否連線成功

• 使用 call back function onException() 接收 iPush^® Server 的回應
• 判斷 Exception 的 return code，若為 1 則表示連線成功

3. 向 iPush^® Server 訂閱/解除訂閱訊息頻道

• 使用 Method chSubscribe() 進行頻道訂閱

4. 接收並處理來自 iPush^® Server 的訊息

• 因為影像 (JPEG) 以 Block Message 的 Method 傳送，因此接收端程式必須以 call function doBlockMessage() 來接收

• 使用 Java AWT API 將接收到的 Block Message 產生訊息並顯示於 Applet

完整的程式碼如下：

/*
* lab4demo.java
*
* Created on 2003年6月30日, 下午 4:54
*/

/**
*
* @author samkang
*/

/* 宣告使用 iPush Java API */
import com.icetech.ipush.*;
import java.awt.*;

public class lab4demo extends java.applet.Applet implements ipushmsg {
iPushLink iPush = new iPushLink();
Image frameImage;
String channel,ip,port,company,product,account,password;
boolean connectFlag=false;

/* 取得 Applet 的參數，包含 iPush Server 的 ip,port, 登入帳號, 欲定閱的頻道 */
public void init() {
ip = this.getParameter("ip");
port = this.getParameter("port");
channel = this.getParameter("channel");
company = this.getParameter("company");
product = this.getParameter("product");
account = this.getParameter("account");
password = this.getParameter("password");

/* 與 iPush Server 進行連線 */
try {
connectFlag = iPush.netConnect(this, ip, Integer.parseInt(port), company,product,account,password);
}
catch (Exception e) {
System.out.println(new StringBuffer("Error:").append(e).toString());
System.exit(1);
}
}

public void destroy() {
/* 結束與 iPush Server 的連線 */
iPush.netClose();
}

/* 接收來自 iPush Server 的即時影像訊息(Block Message)，產生並顯示於 Java Applet 上*/
public void doBlockMessage(byte[] id, int idlen, String name, byte[] msg, int len) {
String idstr = new String(id, 0, idlen);

System.out.println("receiving image ....") ;

frameImage = getToolkit().createImage(msg);

System.out.println(Integer.toString(len)+" Bytes Received") ;

repaint();
}

/* 接收來自 iPush Server 的錯誤訊息並處理 */
public void doError(String buf) {
}

/* 接收來自 iPush Server 的即時訊息(Non-Block Message)並處理 */
public void doMessage(byte[] id, int idlen, byte[] msg, int msglen) {
}

/* 處理 iPush Server 的命令回應訊息 */
public void onException(ICEException e) {
System.err.println("onException");
if(e.code < 10)
System.err.println(e.getMessage());
else if(e.code < 20)
System.err.println(e.getMessage() + " " + e.param);
else
System.err.println(e.getMessage());

/* 當與 iPush Server 連線成功時，向 iPush Server 訂閱頻道 */
if(e.code==1) {
iPush.chSubscribe(channel);
}
}

/* Java 繪圖函式 */
public void update(Graphics g) {
paint(g);
};

/* Java 繪圖函式 */
public void paint(Graphics g) {
g.drawImage(frameImage, 0 , 0, 320, 240, this);
}
}

步驟二： 編譯 Java Applet 程式

1. 將完成後的程式存放於 c:\lab\lab4\source_code\lab4demo.java

2. 使用 JDK 進行編譯，編譯前請確認 iPush^® 的 Java API (iceipush.jar) 存放在與程式碼同一個目錄下 (c:\lab\lab4\source_code)

3. 將目錄切換至 c:\lab\lab4\source_code，使用以下指令進行編譯

•  c:\j2sdk1.4.1\bin\javac -classpath iceipush.jar lab4demo.java

4. 編譯成功後，檢查是否產生 Java Class 檔案 (lab4demo.class)

圖3. 檢查是否產生 Java Class 檔案 (lab4demo.class)

步驟三：編輯 HTML 網頁

1. 打開記事本程式，開新檔案，鍵入下列 HTML 原始碼 (您可以 Copy-Paste 複製之)：

<HTML>
<HEAD>
<TITLE>iPush Image Monitor/Control</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=big5"></HEAD>
<BODY>
<p>
<applet code="lab4demo.class" width=320 height=240 align="middle" archive="iceipush.jar">
<param name="ip" value ="192.168.0.15">
<param name="port" value ="8000">
<param name="channel" value="ch06">
<param name="company" value="lab">
<param name="product" value="lab4">
<param name="account" value="image_monitor">
<param name="password" value="image_monitor">
</applet>
</p>
</BODY>
</HTML>

2.然後將此檔案存為 c:\lab\lab4\source_code\lab4demo.html，此網頁包含一個我們剛剛完成的 Java Applet Class，以及傳入此 Java Applet 的一些 iPush^® Server 連線參數。

STEP 06：加入 Image Control 的功能 – 使用 IE + ActiveX

步驟一： 加入 iPush^® ActiveX API component 與 VBScript

1.打開我們剛剛完成的 HTML file ，在檔案最後加入以下 VBScript：

<object classid="clsid:455A78EC-7EB0-4483-ABD9-2AAB10A1644B"
           codebase="http://192.168.0.15/lab/iPushX.ocx" id=ipushx>
   <param name="ipuship" value="192.168.0.15">
   <param name="ipushport" value=8000>
   <param name="company" value="lab">
   <param name="product" value="lab4">
   <param name="username" value="image_monitor">
   <param name="password" value="image_monitor">
</object>

<SCRIPT LANGUAGE=VBScript>ipushx.ipushConnect</script>

上述 Script 做兩件事情：首先看 <object> </object> 之間的程式碼，此原始碼載入並註冊 Web 虛擬目錄 /lab 內之 iPushX.ocx 元件，將其命名為 ipushx，並將連接 iPush^® Server (範例位於 IP: 192.168.0.15，請依您實際的主機位址改變之) 所需的 Server 與 User 帳號參數傳遞給此 iPush^® ActiveX API component。

其次是 ipushx.ipushConnect 的指令，指示 iPush^® API (在此命名為 ipushx) 與 iPush^® Server 連線。

2. 將檔案存檔。

步驟二：加入啟動影像與停止影像的 HTML 原始碼

1. 打開我們剛剛完成的 HTML file，在 Applet 之後加入下列 HTML 原始碼 (您可以 Copy-Paste 複製之)：

<a href="#" onClick= "eval('ipushx.ipushSend(\&quot;ch96\&quot;,\&quot;start\ &quot;)')" >啟動</a> /
<a href="#" onClick="eval('ipushx.ipushSend(\&quot;ch96\&quot;,\&quot;stop\ &quot;)')">停止</a>

當使用者 Click 「啟動」 link 時，會呼叫 Script「ipushx. ipushSend("ch96","start")」，也就是使用 iPush^® API 透過頻道 「ch96」 傳送訊息「start」到 iPush^® Server，由於 Data Generator 訂閱了控制頻道「ch96」，收到「start」的命令訊息後，會開始送相關的影像到頻道 「ch06」。同理，當使用者 Click「停止」link 時，會呼叫 Script 「ipushx.ipushSend( "ch96" ,"stop")」，也就是使用 iPush^® API 透過頻道 「ch96」傳送訊息「stop」到 iPush^® Server，由於 Data Generator 訂閱了控制頻道「ch96」，收到「stop」 的命令訊息後，會停止傳送相關的影像到頻道 「ch06」。

2. 將此檔案存為 c:\lab\lab4\source_code\lab4demo.html

完整的 HTML 原始碼如下：

<HTML>
<HEAD>
<TITLE>iPush Image Monitor/Control</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
</HEAD>
<BODY>

<p>
<applet code="lab4demo.class" width=320 height=240 align="middle" archive="iceipush.jar">
<param name="ip" value ="192.168.0.15">
<param name="port" value ="8000">
<param name="channel" value="ch06">
<param name="company" value="lab">
<param name="product" value="lab4">
<param name="account" value="image_monitor">
<param name="password" value="image_monitor">
</applet>
</p>
<p> <a href="#" onClick="eval('ipushx.ipushSend(\&quot;ch96\&quot;,\&quot;start\&quot;)')">啟動</a> /
<a href="#" onClick="eval('ipushx.ipushSend(\&quot;ch96\&quot;,\&quot;stop\&quot;)')">停止</a></p>
</BODY>
</HTML>

<object classid="clsid:455A78EC-7EB0-4483-ABD9-2AAB10A1644B"
codebase="http://192.168.0.15/ipushdemo/iPushX.ocx"
id=ipushx>
<param name="ipuship" value="192.168.0.15">
<param name="ipushport" value=8000>
<param name="company" value="lab">
<param name="product" value="lab4">
<param name="username" value="image_monitor">
<param name="password" value="image_monitor">
</object>

<SCRIPT LANGUAGE=VBScript>
ipushx.ipushConnect
</script>

STEP 07：執行與觀測結果

到目前為止，所有的步驟均已完成，我們來執行看看是否可以正常運作。在執行之前，請記得下列動作是否完成：

• iPush^® Server 已經啟動
• Data Generator 執行中
• IE 瀏覽器中的 Internet 安全層級設定必須能夠提示或啟動下載 ActiveX 控制項。為確認設定正常，請依序點選 IE 瀏覽器中的 [工具] 功能表 -> [Internet 選項] -> <安全性> 標籤 -> 設定 "Internet" 區域 (預設即是) -> [自訂層級] 按鈕 -> 逐項檢查 "ActiveX 控制項與 plug-ins" 中的設定，應該為啟動或提示。

由於 Applet 的安全性限制，我們必須利用 Web Server 來存放/執行我們剛完成的網頁。因此接下來將 c:\lab 作 Web 分享如下：

圖4. Web 分享設定

接下來開始執行與觀測結果。

先執行影像訊息來源程式 Data Generator，位於 c:\lab\lab4\datagen\datagen.bat。然後使用 IE 瀏覽器，開啟以下網頁：http://xxx.xxx.xxx.xxx/lab/lab4/source_code/ lab4demo.html (其中 xxx.xxx.xxx.xxx 為 Web Server 的 IP 位址，也不要忘了要建立Web 虛擬目錄 /lab)，結果如下：

圖5. 實驗結果

使用者可以點選啟動或停止的 link 來觀察影像是否受到控制，同時可以觀察 Data Generator 是否收到來自此網頁的控制指令「start」和「stop」。

圖6. 指令下達

此 Lab 混合使用了 iPush^® Java API 以及 iPush^® ActiveX API。除了展示 iPush^® API 的使用方式外，也展示了 iPush^® API 的多樣性與彈性。實務上的應用可以選擇熟悉的單一 API (ActiveX 或 Java) 開發即可，重點應該為 iPush^® Server 頻道 (channel) 的規劃，以及訊息供應者 (Message Producer) 與消費者 (Message Consumer) 的對應關係。相同的架構可以應用在其他的監控領域，如工廠監控，防災監控，環境監控等等。

本 Lab 後續還可以擴充為同時多個影像來源監控，只要將完成的 HTML 原始碼複製並更改頻道參數即可。您可以參考艾揚的網站看看最後的成果：http://www.icetech.com.tw/icedc/workshop/automation/demo/applet3/index.html。

圖7. 艾揚科技 iPush 虛擬工廠 － 影像監控

<快訊 1> 

艾揚獲邀參與「臺灣 50 指數股票型基金暨指數期貨」上市典禮活動

台灣期貨交易所與台灣證券交易所共同主辦的「臺灣 50 指數股票型基金暨指數期貨」上市典禮活動，於 6 月 30 日上午，假晶華酒店盛大舉行。

當天艾揚科技獲邀參與其中，為台灣期貨交易所提供艾揚科技的核心產品 ── iPush^® Server，做為其系列金融商品行情與交易系統的即時資訊傳遞平台。

台灣期貨選擇權市場分別自 90 年 12月與 92 年 1 月推出「臺指選擇權」與「股票選擇權」後，持續發行更多新金融商品。在許多的發表會上，艾揚科技均獲邀成為現場參與資訊系統展示的廠商，已經成為台灣期貨交易所長期合作的資訊夥伴。

目前這套以 iPush^® Server 為即時訊息傳遞核心的服務系統，已經在台灣期貨交易所的行情資訊網站上線，進行包含期貨 (含臺灣 50 指數期貨 )、指數選擇權、個股選擇權的即時行情資訊服務。

目前該服務網站免費開放給所有國人，只要上網註冊登錄即可使用，網址是：http://info.taifex.com.tw。

<快訊 2> 

由艾揚提供即時金融訊息傳遞技術，統一期貨開發的「System 2010」操盤軟體正式上市

我們在電子週報第 13 期專訪統一期貨自營部翁英傑副理，曾經披露其正使用 iPush^® API 自行開發 Sys2003 金融加值軟體。現在，這套操盤軟體已經完成，並正式定名為「System 2010」。即日起，透過統一證券，以及其他財金資訊通路對外銷售。

在期貨與選擇權等新金融商品不斷出陳下，預料業界的專家還會陸續規劃推出各種的投資策略工具。而艾揚所提供的即時金融訊息傳遞技術，將是這些投資專家在建置策略工具時，最佳的夥伴。「System 2010」此一產品的推出，就是最好的證明。

相關連結：

• 「System 2010」操盤軟體產品介紹

• 艾揚即時訊息技術電子週報第 13 期：專訪統一期貨自營部翁英傑副理

上一期精采內容：Gap Analysis ─ 打通 Rich Content 與 Simple Messaging 之間的渠道 (上)

若您覺得本期內容值得參考，請轉寄給認識的朋友或同事，為國內的訊息技術社群發展盡一份力。感謝您。　

回艾揚即時訊息技術電子週報主頁 | 上一期  | 下一期

Copyright 2002-2004, 艾揚科技股份有限公司版權所有；歡迎轉寄。 關於電子報發送有任何問題，或是欲轉載內容，請連絡 icedc@icetech.com.tw 台北市 100 羅斯福路二段 9 號 12 樓之 1 ，TEL: +886-2-2396-1880，FAX: +886-2-2396-1881

Unsubscribe >>
欲取消訂閱艾揚即時訊息技術電子週報 (ICE Messaging Weekly)，請 Mail 至 icedc@icetech.com.tw，
主旨註明：取消訂閱艾揚即時訊息技術電子週報 即可。