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監控影片組件.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 ，則頁面不再限制監控影片組件數量。