青島廣電多媒體大屏嵌入式系統的開發應用

劉 海

隨著多媒體戶外大屏的興起，公共場所、地鐵、廣場等地都紛紛投入了眾多媒體設備，這些設備不僅有效地提升了宣傳內容的傳播效率，一些可交互式的智能屏設備更是提供了體驗良好的公共服務。本文結合青島市廣播電視臺的應用開發實例，分享在嵌入式系統中開發多媒體可交互式屏幕的經驗與應用。

1 開發系統產品介紹

青島是多媒體起步較早的地區，近年更是嘗試了多媒體門戶平臺、App與相應網站、移動電視與同頻數字廣播等各種技術傳播手段，于是開發一種基于IP網絡和廣播網絡雙網結構的戶外大屏系統，能集中展示青島臺多種媒體的綜合大屏的研發與實踐便隨之展開。最終我們交付了一套跨平臺的程序軟體以及幾種交互終端，它能將青島數字廣播、主流網站、青島臺多媒體平臺、以及日常公益信息的展示融為一體。圖1展示的終端高為2 300mm，寬為880mm，配以55寸3 000尼特高亮度交互觸摸屏。

圖1 高亮度交互觸摸屏

2 系統的功能

這款設備之所以設計成雙網結構——IP網與數字廣播接收網，目的在于通過終端內置CDR（Convergent Digital Radio）廣播接收系統解碼出青島試播的數字廣播嵌入信息，該信息在災害來臨時，即使IP網斷開，仍能通過廣播這種災害中被證明最有效的傳播方式，來提供緊急的應急與服務信息[1]。CDR數字廣播系統智能屏實時接收同頻廣播信息，通過獨有芯片解碼出文字與圖片信息，軟件設定展示權限為最高級別，接收完整信息后屏幕將強制鎖定為應急展示界面（圖2），同時系統聲音功放將播放相應信息。當無應急事件時，系統將使用高速IP網絡進行工作，終端可進入交互式界面（圖3），用以展示指定的鏈接內容，鏈接功能使用了安全技術，不可隨意輸入，不可下載資源或運行腳本，技術上實現了瀏覽內容的安全；同時界面可隨時更新，用以引導群眾多瀏覽公益知識、宣教內容。

圖2 鎖屏應急信息界面

圖3 交互界面

大屏同時支持播出單播放，在指定時段展示媒體內容，包括指定的圖片、視頻、以及電視廣播節目，支持實時推流直播，可由后臺將各種直播信號推流到服務器，并由大屏幕展示。

3 系統的設計與實現

多媒體系統邏輯上由顯示系統、CDR（Convergent Digital Radio）接收系統、狀態監測系統三大部分構造而成，如圖4所示，顯示系統負責所有的界面交互邏輯與平時公益信息的展示；CDR接收系統負責實時接收CDR廣播的內容，并解壓提出相關的嵌入信號，解壓后通過相應的串口信號發送到顯示系統；狀態監測系統則時刻注意著設備自身的狀態，通過浸水檢測器、煙火監測器、防震檢測器等嵌入模塊，隨時監控設備的狀態，并將信息發送到監控中心。這三部分各自由編寫的三個程序控制，并配有進程狗，在各類Linux系統和Windows系統上均能良好的編譯運行。

圖4 多媒體系統中配備的三個子模塊系統

三個系統互相獨立存在，通過連線與協議互相連接。CDR接收系統在得到報警信息后，還能直接輸出蜂鳴報警聲音，避免單獨一個系統損壞影響其它系統功能。

3.1 顯示系統

顯示系統是展示的核心，也是最為復雜的部分，在考慮到多平臺、易于開發部署、生態豐富等要求后，最終采用了Electron技術[2]，這讓我們不僅可以方便測試，也便于在不同的系統下，讀取多種連接串口的輸入信號。

在實際開發中，我們運用了Vue[3]與Electron結合的方式來進行技術實現，使用的Vue-Electron-builder[4]。之所以選擇Vue技術，他有幾大優勢：

1）它賦予界面開發一個MVVM（Model，View，ViewModel）的架構。

2）它將Electron中的多網頁結構變成了SPA架構（Single Page Application），單網頁架構的最大好處在與它節省了Electron中各窗口之間的多線程通信，即再也不用使用多個ipcMain與ipcRender之間相互通信，降低了通信研發成本。

3）通過VUE的router機制，可以做出復雜的界面邏輯，并盡量保證其組件化，開發起來迅捷快速。

4）通過Vue搭建的VUEX，可以保持狀態的統一化以及通用功能在組件之間的復用。

3.2 串口輸入信號的處理

從前文闡述中可知，我們的顯示系統一直在接收CDR接收系統解碼出來的串口信號。這里涉及兩個問題，一是廣播解碼下來的串口信號并不穩定，偶有誤碼產生；一是我們需要在顯示中鎖屏，使得界面無法交互并立即顯示正確信息。

解決串口信息不穩定的情況要從我們的實際測試中來尋找比較合適的辦法。CDR嵌入信號目前傳輸的傳輸帶寬為110Kbps，當傳輸文字信息時，一般不會超過500字，假設我們設定重復播發信息的周期為1S，并在信息的發端將文字分段標識并配置驗證碼，比如將字符串“information1information2”分成兩段加上標識：“information1--md5information2--md5”，這樣配置后，通過幾次的接收比對，我們不僅通過MD5碼保證每段信息的完整性，也通過信息分段以及高頻重復接收保證了排除串口亂碼工作的效率。

在Vue-Electron架構中，我們把這段串口的解析程序單獨做成一個線程，按照Electron推薦的方法[5]，我們單獨創立一個不可見的子窗口，并運行這段程序，設置窗口崩潰時自動重啟。通過這樣的方式，我們就可以在后臺運行一個一直監聽串口接收信號，并在接收完整后立即鎖屏切換的線程。

3.3 窗口之間的切換

為了做到界面之間根據狀態的切換，實際上我們使用的是Vue Router，以及VUEX。當我們有鎖屏的需求時，事實上我們其實是在router中做了一個“/locking-screen”的路徑，并配置一個沒有任何界面響應的“locking-screen.vue”文件，這樣當我們在任何情況與條件下，只需調用this.$router.push(‘/ locking-screen’)，就能夠進入到這個界面中，完成了鎖屏預警信息的展示。

同時我們還需要一個退出的機制，如倒計時60秒，此時再無CDR信息輸入，那么我們就調用this.$router.push(‘/‘)，返回屏幕初始狀態。而這個倒計時則返回的功能，以及一些狀態我們會在全局中經常用到。比如正在瀏覽，人走后需要過段時間自動切回；如長時間無人互動屏幕，則播放播單等等。由于這個功能在此系統中如此常見，而且需要很多的全局狀態，我們選擇使用了Vuex，優點是代碼條理清晰，遠勝于Electron各窗口進程的獨自管理。

如上，在vuex的actions中設置異步函數，各個組件通過讀寫state來掌控頁面的狀態，同時傳入closeFunc作為倒計時結束后的執行動作，達到了功能復用，狀態唯一。

3.4 設置與搭配

縱觀本程序，由于選用了Vue-Electron的方式，我們可以使用很多NPM組件[6]，比如串口就可以使用SerialPort這個組件[7]，樣式則可以使用Vuetify[8]，這里需要注意的一點是，當使用SerialPort這種組件時，需要在vue.config.js中添加如下配置。

3.5 環境監控系統

系統主要構成由硬件和軟件組成，硬件部分采用ESP32+STM32雙芯片共同服務模式。ESP32主要功能是將數據上傳到MQTT服務器（圖5），同時還負責對光照，電壓，空氣質量，液晶顯示屏的處理。STM32負責溫濕度，門磁，漏水，振動開關的處理及繼電器的操作，STM32通過串口與ESP32通信。采用雙芯片工作模式的優點是提高系統可靠性，數據采集更準確，靈活性更高。ESP32將采集到的數據上傳到MQTT服務器，MQTT服務器將數據轉發到后臺的設備GIS監控服務器，這樣我們就可以在后端的地圖監控系統中看到設備運行時的監控指標了。

圖5 MQTT服務器基本通訊簡圖

CDR接收系統（圖6）核心芯片是我國自主知識產權的芯片，單芯片集成400MHZ、32位MIPS指令集的龍芯處理器，芯片集成射頻調諧器、CDR/FM解調和AD/DA電路，并具有射頻信號處理專用的DSP電路和USB接口電路。

圖6 CDR接收系統工作流程圖

CDR接收系統將數字音頻信號中的嵌入信息不斷解碼，通過程序驗正完整性后，將信息傳遞給顯示系統，得以優先展示。

4 系統的完成與展望

多媒體大屏嵌入式系統原型試成并運行，有效的整合了青島臺平臺資源，在公眾展示屏這一概念下，拓展了資訊的展示渠道，添加了新的賽道與舞臺。綜合本系統來說，使用的硬件與軟件都具有跨平臺性，在自研成品能良好展示、完成目標功能的同時，與第三方合作共同開發下，也有著強大的整合與移植能力，如在Windows系統下的公交亭系統（圖7），我們可以迅速改造與融合?？梢哉f為青島廣電的嵌入式產品開發，打下了一個良好的開端。

圖7 Windows系統公交亭展示屏產品