跳到主要内容

视频对讲 UI 演示

本示例展示了一个视频对讲与门禁系统的 UI 交互流程。它通过 dxFacial 实现了人脸的捕获（Capture）与实时显示，实现了一个视频对接的基本步骤涉及到的页面展示。

特别说明

本示例仅为可视化对讲 UI 的演示，实际的视频对讲核心功能尚未发布，将在后续版本中推出。

界面预览​

以下是该示例在设备上的运行截图：

主界面 (Main)呼叫界面 (Call)
主界面呼叫界面
注：主界面中间空白区域为人脸实时显示区，由于硬件层限制，截图无法捕获实时画面。模拟与住户或管理中心视频通话的交互。
密码界面 (Pin)连接界面 (Connection)
密码界面连接界面
访客或住户通过数字键盘进行密码开锁。展示系统网络与后台服务的连接状态。

功能特性​

  • 多页面 UI 导航：包含了主页面 (Main)、呼叫页面 (Call)、密码输入页面 (Pin) 和网络连接页面 (Connection)。
  • 实时人脸捕获与显示：通过 dxFacial 模块实现人脸采集，并在 UI 层指定区域进行实时渲染显示。
  • 人脸识别集成：通过独立的 Worker 线程运行人脸引擎，在不影响 UI 流畅度的前提下处理算法逻辑。
  • 多线程架构：
    • 主线程：负责 UI 初始化与逻辑调度。
    • Camera Worker：负责通过 dxFacial 进行数据采集与算法处理。

源码结构说明​

该示例的完整源代码请参考：GitHub 源码地址

主要文件结构如下：

  • main.js：应用入口，启动摄像头相关 Worker 并初始化屏幕。
  • screen.js：屏幕管理模块，负责 UI 框架初始化及各视图组件加载。
  • faceworker.js：运行在独立线程的人脸识别与采集逻辑。
  • view/：存放各个界面的具体实现（如 mainView.js, callView.js 等）。

提示：本示例是针对 VF105 设备设计的，屏幕分辨率为 800*1280。大部分界面布局和图片资源均基于此分辨率优化。虽然核心业务逻辑具有跨设备通用性，但若需在其他不同分辨率的设备上运行，则需要进行相应的 UI 适配工作。