FVS監控影片組件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 功能簡介

監視影片組件，可實時線上展示監視影片畫面。

注：本文僅為大家介紹監視視頻組件特有功能，其他屬性不贅述。

• 「監視影片」組件不支援 FVS組件交互屬性 。 
  

• 組件動畫請參見：FVS組件動畫 。

• 組件屬性請參見：FVS組件樣式屬性 。

2.1 功能入口

點選組件區「媒體>監視影片」，將組件新增到畫布中。在右側「內容」配置面板設定監視地址等內容。如下圖所示：

2.2 功能說明

2.2.1 監視地址

直接輸入監視地址 URL，V1.16.1 及之後版本，還支援在 URL 中插入公式實現動態展示監視影片。

V1.17.0 版本之前，監視地址僅支援 HLS 協定的影片流，形如 http://XXX.m3u8 。

V1.17.0 及之後版本，支援 HLS 、RTSP、RTMP 三種協定影片流，需透過選擇「影片類型」解析不同協定影片。

2.2.2 影片類型

支援選擇「影片類型」為 HLS 、RTSP、RTMP。選擇 RTSP 或 RTMP 時，需安裝「FVS流媒體處理依賴插件」 。

若未安裝，則提示安裝插件，點選「去安裝」，可跳轉至插件管理。

• 點選下載插件：FVS流媒體處理依賴插件

• 設計器插件安裝方法參照：設計器插件管理

• 伺服器安裝插件方法參照：伺服器插件管理

若未安裝「FVS流媒體處理依賴插件」，預覽配置了 RTSP 或 RTMP 監視影片的範本，會提示“無法找到此視頻相容的源”。如下圖所示：

注：配置監視地址後，畫布框中不實時顯示監視畫面，需預覽範本方可查看。

2.2.3 工具欄

V1.17.0 及之後版本，支援設定是否顯示影片工具欄，預設不顯示。

2.2.4 初始音量

支援配置監視影片的音量，預設音量為 0。

本文範例主要展示如何透過 下拉框元件 展示不同的監視影片。

3.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立空白看板，可自訂名稱和尺寸。如下圖所示：

3.2 設定下拉框元件

1）將「下拉框元件」拖入到畫布中，修改名稱為 a ，表示參數為 a ，用於設定監視地址並聯動監視影片組件。

2）設定元件的資料字典為自訂，實際值輸入範例監視地址，顯示值可自訂。

範例地址來源於 直播中國 ：https://gctxyc.liveplay.myqcloud.com/gc/sxzl_1_md.m3u8  、 https://gctxyc.liveplay.myqcloud.com/gc/yxhcyz_1/index.m3u8 。

設定完成後將預設值設定為其中一個監視地址即可。如下圖所示：

3.3 設定監視影片組件

點選「媒體>監視影片」，在頁面中新增一個「監視影片組件」，在監視地址處點選「插入公式」，輸入 $a 。如下圖所示：

注：若 URL 只有部分內容不同，也可以只將不同的部分用公式替代即可。例如：https://gctxyc.liveplay.myqcloud.com/gc/公式1.m3u8 。

3.4 效果瀏覽

3.4.1 PC端

點選右上角「儲存」，再點選「預覽」，效果如下圖所示：

3.4.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：動態展示監視視頻範例.fvs

5.1 螢石攝像頭監視地址

若使用者使用螢石攝像頭，可直接登入 螢石開放平台，獲取 hls 協定的直播地址。詳情請參見：螢石直播地址。  

5.2 監視影片無法播放排查步驟

上文提到若未安裝「FineVis流媒體處理依賴」插件，預覽配置了 RTSP 或 RTMP 監視影片的範本，會提示“無法找到此影片相容的源”。

但若安裝了該插件，仍提示“無法找到此影片相容的源”，則還可能與監視影片本身或網路環境有關係。

可按以下排查步驟進行檢查：

1）使用 vlc 能否播放成功：vlc 下載地址：https://www.videolan.org/index.an.html 。

下載並安裝後，點選左上角「媒體>開啟網路串流」，輸入監視影片連結，點選「播放」測試能否播放成功。

2）檢查伺服器所在地址與監視影片伺服器所在地址 telent 能否成功。

例如：

• telent 成功

• telent 不成功

5.3 監視影片數量限制

監視影片使用  RTSP 或 RTMP 協定時，需注意組件數量限制：

1）V2.5.1 之前的版本中，一個頁面最多不超過 6 個監視影片組件，否則會導致影片無法播放。

2）升級 FVS 插件至 V2.5.1 及之後版本且「FineVis流媒體處理依賴」插件至 V1.9 及之後版本；並參考 fine_conf_entity視覺化配置 修改 WebSocketConfig.randomSession 參數值為 true ，則頁面不再限制監視影片組件數量。

• 幀率越小、解析度越小、伺服器效能越高、帶寬越高，支援同時播放的視頻個數越多。

• 參考測試環境及效果如下表所示：

5.4 監視視頻播放卡頓

原因分析

預覽範本，監視視頻播放卡頓 ，可能是監視視頻的音頻無法解析而導致的。

解決方案

在 designer.vmoptions 檔案中新增啟動參數 -Dplugin.wysiwyg.media.audio.no=true 。

該參數的作用是：配置不解析音頻直接播放。新增後需重啟工程。

注：需升級「FineVis流媒體處理依賴」插件至 V2.0 及之後版本。

檔案所在路徑如下圖所示：

新增參數如下圖所示：