跨平臺多終端自動播出系統的研究與實現

【摘要】 本文探討了如何實現C/S、B/S架構的自動播出系統，比較兩種實現的優缺點，并詳細介紹了如何采用HTML5的全新特性WebSocket來實現B/S架構自動播出系統，實現對跨平臺、多終端的支持。

【關鍵詞】 自動播出系統 跨平臺 多終端 HTML5 WebSocket

一. 什么是自動播出系統

自動控制是指無需人經常直接參與，而是通過對某一對象施加合乎目的的作用，以使其產生所希望的行為或變化的控制[1]。

廣播行業的自動播出系統跟傳統的自動控制有所區別，它需要軟件和硬件密切配合，才能實現。因為在整個廣播播出過程之中，有不同功能的不同類型的設備參與，比如視頻服務器、矩陣、主控臺等等，而且，這樣的設備有可能來源于不同的廠商，如果是完全由人工控制，難度大、不易同步協調，而且安全性得不到保障，自動播出系統的出現使得操作員可以通過一個專門的系統對所有設備進行統一的控制與監視。

二. C/S自動播出系統的實現

怎樣實現一個廣播行業的自動播出系統呢？我們從系統部署、系統架構選擇、系統實現三方面來詳細分析。

1. 自動播出系統部署

一般來說，一個自動播出系統由四部分組成：需要被控制的設備、設備控制服務器、數據庫、各種應用客戶端，圖1說明了它們之間的關系。

（1）需要被控制的設備

該部分包括各種需要參與自動播出的設備，比如視頻服務器，矩陣，主控臺，VTR，字幕機，各種音頻卡、視頻板等等，它們能夠通過網絡、或RS422串口、或GPI接口進行控制。

（2）設備控制服務器

設備控制服務器是自動播出系統的核心，一般來說設備控制服務器屬于兩個網絡：一個是設備網，設備控制服務器在這個網絡上能找到需要控制的所有設備，通過網絡協議、RS422串口協議、或者GPI接口發送控制命令到具體設備，從而能夠控制設備的運行、監視設備的狀態；另一個是應用網，在這個網絡上，各種的應用程序能夠通過設備控制服務器協議與設備控制服務器進行通訊。為了安全起見、同時避免網絡阻塞，設備網與應用網最好保持物理上的獨立。

而且為了保證設備控制服務器的可靠運行，采用主、備的雙設備控制服務器是更好的選擇。

（3）數據庫

該數據庫包含應用中的各種數據，比如用戶信息、業務數據、媒體元數據等等。這些數據既可以給應用提供完善的信息，也可以避免應用頻繁操作設備，降低設備的性能，比如媒體元數據。

（4）各種應用客戶端

該部分包括各種各樣的應用，比如播放列表、媒體錄入、設備狀態監視等等，而且隨著需求的變更，應用程序會不停變化或增加。

2. 軟件架構的選擇

通常來說，一個軟件有C/S或B/S兩種架構可以選擇。B/S是Browser/Server，指瀏覽器和服務器端，在客戶機端不用安裝專門的軟件，只要一個瀏覽器即可，屬于瘦客戶端。C/S是Client/Server， 指客戶機和服務器，在客戶機需要安裝客戶端軟件及相應環境后，才能訪問服務器，屬于胖客戶端。

表1[2]對B/S和C/S優缺點進行了比較，由于C/S架構的實時性能高且穩定，C/S成了自動播出系統的不二之選。

3. C/S架構自動播出系統的實現

在選定了C/S的軟件架構后，接下來介紹如何實現自動播出系統的設備控制服務器與客戶端。

（1）設備控制服務器的實現

要實現設備控制服務器，一般來說包括三層：設備驅動層、事務層、服務層。

設備驅動層

這一層包括三部分：設備管理，設備協議，設備驅動。

設備管理主要用來分類管理各種設備，使得可以很方便得在業務層進行控制。

設備協議是指對不同類型的設備來說，有不同的控制協議，比如控制視屏服務器的VDCP協議，控制VTR的SONY VTR協議，控制矩陣的矩陣協議等等。

設備驅動是對某一型號設備的具體支持，它從某一設備協議繼承而來，可能受通用協議的控制，但也有自己的一些特性。

設備驅動層是設備控制服務器的基礎，只有在設備驅動層正確地工作的前提下，自動播出系統才有可靠運行的可能。

事務層

這一層包括設備控制服務器能夠提供的各種事務處理能力，比如播放列表、設備狀態監視、媒體服務等。

播放列表主要用于自動播出，通過維護一個串行的列表，使得節目可以一個接一個得連續自動播出，避免繁瑣的操作，減少錯誤的發生。

設備狀態監視是一個非常重要的部分，這一部分通過對設備狀態的監視，預防播出事故，即時通知管理員進行維護與更新，就像汽車的胎壓監控儀一樣給予安全行駛的保障。

媒體服務保證設備的媒體信息即時更新，比如視頻服務器的媒體信息，并提供方便的方式可以進行媒體錄入。更進一步的是，可以提供全局媒體服務，在不同的地方可以共享媒體，快捷方便得進行媒體傳輸等等。

服務層

這一層主要給各種應用客戶端提供服務，包括兩部分。第一部分是在標準的Socket端口上提供服務，接受來自應用客戶端的命令；第二部分是將命令按照自動播出系統的協議將其轉換成具體的請求，傳遞給事務層進行具體的處理。

圖2介紹了服務器端的結構。

（2）客戶端的實現

客戶端的結構相對來說比較簡單，但是實現相對繁瑣。一般來說客戶端包括界面層與控制層。

界面層

這一部分看起來比較簡單，但根據編程語言的不同，有不同的實現方式，難易程度也不同，比如VC、C#、以及Java就有不同的實現策略?？傮w來說，這一部分就是提供一個易于操作的界面，使得用戶可以方便地控制播放編列、查看設備狀態、錄入新的媒體等。

控制層

這一層分為兩部分，一部分是將界面事件轉換成自動播出系統命令，并將其發送到設備控制服務器；另一部分是數據庫部分，提供業務需要的數據，并在恰當的時候進行更新。

圖3介紹了客戶端的結構。

通過上面的介紹，一個C/S架構的自動播出系統構建完畢，它有高的實時性，功能強大，穩定高效，可以用來實現絕大部分的自動播出系統。

三. 新的挑戰以及新的技術

1. 新的挑戰

但是隨時時代的發展、技術的進步，C/S架構的產品受到越來越多的挑戰。其中最顯著的就是多終端的挑戰。從剛開始的PC，到筆記本，再到現在的手機與平板電腦，越來越多的終端要求參與到系統的操作監控過程中，特別是手機與平板，這兩個為方便而生的產品。

這樣就要求軟件產品在支持個人電腦的同時，也要求能夠在手機或平板上運行，這也意味著軟件產品需要運行在不同的操作系統上，比如Android， iOS， Windows， Windows Phone等等。對C/S架構的產品來說，這意味著為每一個操作系統的終端，必須開發相應的客戶端，從而大大提高了開發的成本以及維護更新的成本。

2. 新的技術HTML5與WebSocket

有新的挑戰，就有新的技術的出現。HTML5就是這樣的一種新技術。HTML5是谷歌、蘋果、諾基亞、中國移動等幾百家公司一起醞釀的W3C推薦的新一代的網絡標準，一個公開的標準。

HTML5是跨平臺的、支持多終端的，因為目前PC、手機、平板上的主流瀏覽器大都主持HTML5，比如不但蘋果的Safari支持HTML5， FireFox， Chrome， Opera等主流瀏覽器也都支持HTML5，微軟的IE9開始支持部分HTML5特性，從IE10開始對HTML5有完善的支持。

HTML5[3]提出了很多的新特性，比如SVG， Canvas， Gealocation， Web Worker等等，使得開發網絡應用簡單而且功能強大，很多以前只能通過桌面程序完成的功能也很容易通過HTML5在Web應用中完成。

在HTML5的眾多新特性中，有一個全新的特性WebSocket[4]。

（1）WebSocket出現的背景

現在，很多網站為了實現即時通訊，所用的技術都是輪詢。 輪詢是在特定的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP request 的header非常長，里面包含的數據可能只是很少的一部份，這樣會占用很多的帶寬和服務器資源。

而比較新的技術去做輪詢的效果是Comet，使用了AJAX。這種技術雖然可達到雙向通信，但依然需要發出請求，而且在Comet中，普遍采用了長鏈接，這也會大量消耗服務器帶寬和資源。

面對這種狀況，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬，并達到實時通訊[5]。

（2）WebSocket的目標與優點

WebSocket規范的目標是在瀏覽器中實現和服務器端雙向通信[6]。雙向通信可以拓展瀏覽器上的應用類型。這樣使得我們可以在利用Web應用的優勢的同時，可以使用到Socket高效的點對點通訊方式。

同時WebSocket服務器與客戶端之間交換的標頭信息很小，大概只有10字節。而且WebSocket不僅支持純文本的數據，而且支持二進制的數據通訊。

（3）WebSocket的原理

瀏覽器中的網頁與服務器的WebSocket的通訊有兩個過程，第一個是握手過程，瀏覽器發送一個類似于http頭的請求給服務器，服務器根據http頭中的信息，生成另外一個http頭發送個客戶端，這樣連接就建立了；第二個是通訊過程，每次通訊需要包括WebSocket協議頭，根據包長度的不同，從2到10字節不等。

（4）WebSocket客戶端

WebScoket客戶端主要需要瀏覽器對WebSocket的支持。目前大部分最新版的主流瀏覽器已經支持WebSocket，比如FireFox，Chrome，Safari等。微軟從IE 10也開始支持WebSocket。

在客戶端，很容易用JavaScript來實現，請參考下面的代碼：

當WebSocket初始化時，需要一個網絡地址，該地址以ws：//或wss：//開始，其后是服務器地址或主機名，然后服務端口號。在客戶端，可以處理onopen、onmessage、onclose、onerror等事件，從而實現對服務器的回應的處理。當客戶端想向服務器發送消息時，只要調用send就可以了。

（5）WebSocket服務器端

目前已經有一些Web服務器支持WebSocket，比如Tomcat，node.js等。同時由于WebSocket協議的簡單性，用戶可以很容易地實現自己的WebSocket服務，提供自己訂制的WebSocket通訊服務。

當用戶實現WebSocket服務器段時，主要處理三部分信息：

握手信息

在瀏覽器發送來的http握手請求中，包含key信息，服務器需要根據key信息，按照協議的算法，生成另外一個key，發送給客戶端，如果key信息不對，瀏覽器會拒絕連接。

WebSocket頭信息

WebSocket頭比較簡單，包括各種標志位，掩碼，以及數據長度等。用戶很容易根據WebSocket協議將頭信息解析出來。

定制的通訊協議

用戶根據自己的需求，可以定義自己的數據結構，定制自己的通訊協議。

四. 跨平臺多終端自動播出系統的實現

表1比較了C/S與B/S架構的優缺點，雖然B/S有著眾多的優點，由于C/S具有實時性高而且穩定的特點，對自動播出系統來說，只能選擇C/S架構。

但是HTML5的WebSocket的出現使得這個變成可能：自動播出系統既可以保持穩定的高實時性，又可以具有B/S系統的跨平臺、支持多終端的優點以及其他眾多優點。

下面就從系統部署、系統實現、系統優點、系統挑戰幾方面來詳細了解新的B/S框架的自動播出系統

1. 系統部署

從系統部署的總體架構來看，新的系統同樣包括四部分：需要被控制的設備、設備控制服務器、數據庫、Web服務器。唯一的變化就是所有應用都將發布于Web服務器上，用戶可以通過各種終端的瀏覽器對應用進行訪問。應用與設備控制服務器將通過WebSocket進行通訊，保持以前的點對點的高穩定性以及高實時性。

圖5介紹了B/S自動播出系統的部署圖。

2. 設備控制服務器的實現

對設備控制服務器來說，與C/S架構的設備控制服務器相比，唯一的變化是將標準的Socket服務替換成WebSocket服務。

從具體實現來說，就是在客戶應用的連接建立以后，服務器與客戶端多了一個握手的過程，用來保證通訊的安全，在其后的數據通訊中，數據包多了一個WebSocket協議數據頭。其他處理與標準Socket通訊完全相同。

圖6介紹了B/S設備控制服務器的結構。

3. 應用端的實現

應用端相比C/S架構的客戶端，有很大的不同。首先所有頁面發布于Web服務器上，所有的維護更新都是對Web服務器上的內容進行維護更新?？蛻舳瞬辉傩枰惭b任何程序，不再受平臺、終端的限制，只要有一個瀏覽器，就可以實現對系統的訪問，從而操作播放列表，查看設備狀態，進行媒體錄入等。

一般來說應用端包含三部分：HTML5頁面，CSS界面裝飾，JavaScript邏輯控制。

HTML5頁面是界面部分，包括應用需要的各種顯示信息、控件等等。

CSS界面裝飾決定了HTML5頁面怎么樣進行顯示，而且對不同的終端，由于分辨率的不同，可能需要不同的CSS來對HTML5頁面進行裝飾。同時可能用到公司的統一CSS庫，這樣保證公司產品風格的一致性。

JavaScript邏輯控制是應用端的核心，不但包含了與Web服務器的通訊、數據庫的通訊，而且包括與設備控制服務器的WebSocket通訊。當然，在這一部分，可以使用已經存在的通用庫，如果jQuery庫等使代碼變得簡單；也可以使用公司的通用函數庫，重用公司的已有代碼。

圖6介紹了B/S應用端的結構。

4. 系統的優點

基于HTML5的WebSocket的B/S自動播出系統具有以下優點：

（1）像C/S系統一樣高效穩定

從設備控制服務器的實現可以看出，跟C/S架構的自動播出系統一樣，它具有高實時性、穩定、功能強大的優點，滿足廣播播出的需求。

（2）跨平臺與多終端

新系統可以在不同的平臺下使用， 比如Windows， Linux， Andriod， iOS等，這意味著它可以在不同的終端中使用，比如PC， 平板， 手機等。

（3）易于維護升級

由于新的應用層發表在Web服務器上，維護升級方便，不需要每個終端進行一一維護升級。

（4）易于集成擴展

由于是Web應用，可以很方便得跟已有的業務系統進行集成，或者根據新的需求擴展出新的應用。比如跟已有的廣告系統、編單系統、審核系統等進行集成。

（5）易于重構與重用

對設備控制服務器來說，只要將標準的Socket服務換成WebSocket服務就可以重構原來的系統。對應用端來說，不管公司的JavaScript函數庫，還是CSS的頁面裝飾庫，都可以進行重用。

（6）分工的明確化

對于產品設計來說，主要關心頁面的功能，也就是HTML5頁面內容；對于UI來說，主要關心CSS的裝飾效果，而再也不要擔心自己設計出漂亮的頁面，但是程序員實現不出來；對于程序員來說，只要關心JavaScript的邏輯部分是否正確，從而從煩人的界面渲染中釋放出來。

同時分工的明確化可以提高開發的效率，縮短開發周期，更快地交付客戶定制需求等.

（7）易于公司產品風格的統一

一般來說，一個公司的產品需要能夠保持一樣的風格。在新系統中，只要用到公司的通用CSS風格庫，就可以保持一致的風格，不需要額外的工作，降低開發的成本。

5. 系統的挑戰

由于HTML5與WebSocket是新的技術，在開發這樣的系統時也面臨一些挑戰：

（1）瀏覽器支持的不確定性

不同的瀏覽器對HTML5的支持不盡相同。所以同一個頁面在不同的瀏覽器中可能有不同的表現。這就要求我們在頁面的開發過程中，需要考慮到這種差異性，使得產品具有良好的兼容性。

（2）HTML5的未知性

HTML5的標準并沒有完全的確定，它還在不停的完善中，所以它有著一些不確定因素。據估計，2012年HTML5才會推出建議候選版，并在2022年才會成為W3C推薦標準。這就要求我們要關注標準的變更，使得產品適應標準的變更。

（3）安全問題

首先，作為一個網絡系統，會遇到到傳統的網絡安全問題威脅，比如黑客攻擊。其次作為一個廣播系統，要保證設備的安全性，也就是設備被正確的人監視與控制。所以，當我們開始設計系統時，就要有完善的安全策略以保證系統的安全性。除了一般C/S架構系統的安全措施，如服務器冗余備份、設備網和應用網的物理分離、用戶權限管理、歷史操作日志以外，針對B/S系統還需要防火墻、VPN等措施，保證遠程操作、控制的安全性。

五. 結束語

HTML5是發展中的新技術，學習它，應用它，使得您一直走在新技術的前列。 BP

縮寫詞

參考文獻：

[1] 孫揚聲. 自動控制理論. 第三版. 北京： 中國電力出版社， 2004年：第1頁

[2] 魯春燕，孫 娟. 淺析C/S模式和B/S模式的優缺點. 福建電腦， 2008年， 第6期：第87頁

[3] HTML5 Draft. 2012-03-29. [2012-10-02] http：//www.w3.org/TR/html5/.

[4] The WebSocket protocol draft-hixie-thewebsocketprotocol-76. 2010-05-06.

[2012-10-02] http：//tools.ietf.org/html/draft-hixie-thewebsocketprotocol-76

[5] WebSocket. 2012-10-21. [2012-11-03] http：//zh.wikipedia.org/zh-cn/WebSocket

[6] WebSocket. 2012-10-24. [2012-11-03] http：//baike.baidu.com/view/3623887.htm