适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 版本

1.2 功能简介

监控视频组件，可实时在线展示监控视频画面。

注：本文仅为大家介绍监控视频组件特有功能，其他属性不赘述。

• 「监控视频」组件不支持 FVS组件交互属性 。 
  

• 组件动画请参见：FVS组件动画 。

• 组件属性请参见：FVS组件样式属性 。

2.1 功能入口

点击组件区「其他>媒体>监控视频」，将组件添加到画布中。在右侧「内容」配置面板设置监控地址等内容。如下图所示：

2.2 功能说明

2.2.1 监控地址

直接输入监控地址 URL 即可插入监控视频。

V1.17.0 版本之前，监控地址仅支持 HLS 协议的视频流，形如 http://XXX.m3u8 。

V1.17.0 及之后版本，支持 HLS 、RTSP、RTMP 三种协议视频流，需通过选择「视频类型」解析不同协议视频。

V3.2.0 及之后版本，支持在 URL 中「插入动态值」实现动态展示监控视频。支持输入公式或直接绑定数据集字段，数据集字段默认选中首行数据。详情请参见：FVS动态值 。

注：V1.16.1 至 V3.1.0 版本，仅支持插入公式。

2.2.2 视频类型

支持选择「视频类型」为 HLS 、RTSP、RTMP。选择 RTSP 或 RTMP 时，需安装「FVS流媒体处理依赖插件」 。

注1：IOS 端暂不支持播放 RTSP/RTMP 视频源。

注2：视频类型选择「HLS」时，仅支持 H264 协议。可使用 vlc 查看编解码信息了解具体协议内容。

若未安装，则提示安装插件，点击「去安装」，可跳转至插件管理。

• 点击下载插件：FVS流媒体处理依赖插件

• 设计器插件安装方法参照：设计器插件管理

• 服务器安装插件方法参照：服务器插件管理

若未安装「FVS流媒体处理依赖插件」，预览配置了 RTSP 或 RTMP 监控视频的模板，会提示“无法找到此视频兼容的源”。如下图所示：

注：配置监控地址后，画布框中不实时显示监控画面，需预览模板方可查看。

2.2.3 填充方式

V2.9.0.4 及之后版本，监控视频可选择两种填充方式：

• 适应：视频画面宽高比不变，等比拉大/缩小视频，确保宽/高充满组件即可

• 拉伸：视频宽度拉伸至组件宽度，视频高度拉伸至组件高度

2.2.4 工具栏

支持设置是否显示视频工具栏，默认不显示。

2.2.5 初始音量

支持配置监控视频的音量，默认音量为 0。

本文示例主要展示如何通过 下拉框控件 展示不同的监控视频。

3.1 新建模板

点击设计器左上角「文件>新建可视化看板」，创建空白看板，可自定义名称和尺寸。如下图所示：

3.2 设置下拉框控件

1）将「下拉框控件」拖入到画布中，设置「绑定参数」为 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 监控视频的模板，会提示“无法找到此视频兼容的源”。

若已安装了该插件，仍提示“无法找到此视频兼容的源”，请按照以下步骤进行排查：

5.2.1 检查视频流和网络连通性

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

下载并安装后，点击左上角「媒体>打开网络串流」，输入监控视频链接，点击「播放」测试能否播放成功。

2）检查服务器所在地址与监控视频服务器所在地址 telnet 能否成功。

例如：

• telnet 成功

• telnet 不成功

5.2.2 检查Linux系统兼容性

在低版本 Linux 系统上，「FineVis流媒体处理依赖」插件 V2.7 及以上版本，无法预览监控视频。

注：低版本 Linux 系统的判断：使用「FineVis流媒体处理依赖」 V2.9 版本插件，根据日志中的提示判断是否需要升级。日志若出现下图报错，则为低版本 Linux。

可通过以下方案解决：
删除「FVS流媒体处理依赖插件」，安装「FineVis流媒体处理依赖-适配低版本linux」插件。

注：安装「FineVis流媒体处理依赖-适配低版本linux」插件时需确保先删除原有「FVS流媒体处理依赖插件」插件。

5.3 监控视频播放卡顿

若播放监控视频时卡顿，可按照以下步骤进行排查：

5.3.1 使用VLC对照测试

点击左上角「媒体>打开网络串流」，输入监控视频链接，点击「播放」测试是否卡顿。

• 若 VLC 播放同样卡顿，说明故障并非监控视频组件导致，优先排查网络环境、流媒体服务器、视频流参数配置；可核查带宽、网络延迟、丢包率及防火墙拦截等问题，视频流优化可参考下文 5.3.2 章节。

• 若在 VLC 流畅播放、模板里播放卡顿：问题在客户端或服务器，先进行视频流调优再复测，仍旧卡顿参考第 5.3.3 和 5.3.4 节。

5.3.2 视频流调优

优先通过视频流调优降低整体编解码压力，再判断是否仍卡顿。

原因分析

视频流码率过高、分辨率过大，或编解码格式不兼容，导致客户端或 FR 服务器解码压力过大。

解决方案

• 改用子码流：修改模板中监控视频组件的 URL，将主码流地址替换为子码流地址。

• 调整为高性能模式：在摄像头云台或安防平台中，将视频编码格式修改为 h264，音频编码格式修改为 AAC。

注1：高性能模式主要用于降低 FR 服务器的编解码压力，仅对卡在服务器的情况有效。

注2：调整只是为了测试定位是否为视频流问题，定位完成后可以再改回原配置。

5.3.3 客户端本地卡顿排查

原因分析

客户端电脑 CPU、显卡、内存资源被三维场景、动画、其他软件占用，无充足资源完成视频解码渲染。

定位方法

• 新建空白模板，仅放一个监控视频组件，观察是否仍然卡顿；同时查看性能面板中的 GPU 负载（CPU、内存若满载也可能导致卡顿）。

注：正常播放时性能面板中的 video decode 应有占用值（不能为 0）。

• 关闭客户端 PC 上的其他应用程序及浏览器标签页，再次观察。

• 更换一台配置更高的客户端进行预览。

解决方案

• 精简模板，移除三维场景、地图等高负载组件及不必要的动画。关闭客户端其他应用与浏览器标签页。

• 提升客户端硬件配置（特别是 GPU）。

5.3.4 服务器卡顿排查

原因分析

FR 服务器编解码并发过高，超出服务器硬件承载上限。

解决方案

• 减少同时预览的人数和模板数量，建议只在大屏挂载预览。

• 提升 FR 服务器硬件配置。

5.4 监控视频数量限制

监控视频使用 RTSP 或 RTMP 协议时，需注意组件数量限制：

1）FVS V2.5.1 之前版本、「FineVis流媒体处理依赖」插件 V1.9 之前版本。一个页面最多不超过 6 个监控视频组件，否则会导致视频无法播放。

2）升级 FVS 插件至 V2.5.1 及之后版本，且「FineVis流媒体处理依赖」插件为 V2.5 及之后版本，并参考 fine_conf_entity可视化配置 修改 WebSocketConfig.randomSession 参数值为 true 后，页面支持的监控视频组件数量增多，但具体数量和 音视频编解码格式 以及 分辨率 强相关。

• 测试环境：

服务器：CPU  i5-12400F 内存 32G

客户端：CPU i7-12700H GPU RTX3060 内存 32G 

• 测试结果如下表所示：

注：「FineVis流媒体处理依赖」插件为 V1.9 至 V2.5 版本，使用的是普通模式，支持数据见上表普通模式。

5.5 音频解析异常排查

原因分析

监控视频的音频无法解析也可能导致播放异常。

解决方案

在 designer.vmoptions 文件中添加启动参数 -Dplugin.wysiwyg.media.audio.no=true 。

该参数的作用是：配置不解析音频直接播放。添加后需重启工程。

注1：需升级「FineVis流媒体处理依赖」插件至 V2.0 及之后版本。

注2：除非在必要情况下（如使用 4K 或 8K 大屏显示），建议使用子码流或降低分辨率。

文件所在路径如下图所示：

添加参数如下图所示：

也可通过工程环境进行修改：

• Windows 的 Tomcat 环境下，在 catalina.bat 文件中添加 

set "JAVA_OPTS=-Dplugin.wysiwyg.media.audio.no=true"

• Linux 的 Tomcat 环境下，在 catalina.sh 文件中添加

JAVA_OPTS="-Dplugin.wysiwyg.media.audio.no=true"