Skip to content

Repository files navigation

WVP App

WVP App Logo

WVP App 是基于 Flutter 开发的 WVP GB28181 移动端客户端,目标是为 wvp-GB28181-pro 提供轻量、稳定、适合移动端使用的核心能力。

当前项目聚焦四个高频场景:

  • 设备:查看 WVP 设备列表、在线状态、通道数量,支持搜索、筛选、下拉刷新。
  • 直播:围绕设备通道做实时预览,后续接入 WVP 点播接口。
  • 告警:查看设备告警事件,后续接入告警筛选和详情。
  • 录像:查看和回放设备录像,后续接入录像检索与播放。

项目处于早期开发阶段,基础登录、网络层、路由、设备页 UI 和设备列表接口已接入。直播、告警、录像会继续按核心流程逐步完善。

项目特性

  • Flutter 跨平台:优先支持 iOS / Android,桌面端可用于开发调试。
  • WVP 原生接口:通过 WVP OpenAPI 生成基础 API 封装,并按 App 场景补充业务方法。
  • Riverpod 状态管理:登录态、服务地址、网络服务统一管理。
  • Dio 网络层:支持 WVP access-token 鉴权、统一异常处理、401 自动跳转登录。
  • GoRouter 路由:内置登录守卫和底部导航。
  • 移动端优先 UI:目前主导航为 设备 / 告警 / 录像,接入入口放在设备页顶部。

运行环境

建议使用 Flutter 3.41+ 和 Dart 3.10+。

flutter --version
dart --version

如果是第一次运行 Flutter 项目,先检查本机环境:

flutter doctor

快速开始

  1. 克隆项目并进入目录:
git clone <your-repo-url>
cd wvp_app
  1. 安装依赖:
flutter pub get
  1. 生成代码:
dart run build_runner build

如果遇到生成文件冲突,可执行:

dart run build_runner build --delete-conflicting-outputs
  1. 启动 App:
flutter run

也可以通过 Makefile:

make get
make gen
make run

连接 WVP 服务

启动 App 后,在登录页填写 WVP 服务地址、用户名和密码。

服务地址示例:

192.168.1.4:18978
http://192.168.1.4:18978
https://example.com

App 会根据登录页输入保存服务地址,并请求 WVP 登录接口。登录成功后,后续请求会自动携带 WVP 使用的 access-token 请求头。

如果你在模拟器中访问局域网 WVP 服务,请确认:

  • 手机或模拟器与 WVP 服务在同一网络。
  • WVP 后端端口可访问。
  • iOS / Android 本地网络、明文 HTTP 访问策略已按实际环境配置。

常用命令

flutter pub get                         # 安装依赖
dart run build_runner build             # 生成 .g.dart / .freezed.dart
dart run build_runner watch             # 监听生成文件
flutter analyze                         # 静态分析
flutter run                             # 运行
flutter build apk --debug               # Android debug 包
flutter build ios --simulator --debug   # iOS 模拟器 debug 构建

Makefile 命令:

make get
make gen
make watch
make analyze
make run
make build/android

目录结构

lib/
├── app.dart
├── main.dart
├── core/
│   ├── config/        # 环境配置
│   ├── http/          # Dio、API 封装、拦截器、HTTP 异常
│   ├── models/        # freezed/json 模型
│   ├── providers/     # 全局 provider observer
│   ├── router/        # GoRouter 路由
│   ├── theme/         # 全局主题
│   └── utils/
├── pages/
│   ├── device/        # 设备页和设备相关组件
│   ├── alarm/         # 告警页
│   ├── record/        # 录像页
│   └── login/         # 登录页
├── providers/         # 业务 provider
├── services/          # 本地存储、日志等服务
└── widgets/           # 通用组件

doc/
├── api-spec/          # WVP OpenAPI 和接口生成脚本
├── img/               # 文档图片
└── wvp-app-plan.md    # App 功能规划

API 生成

WVP OpenAPI 相关文件放在 doc/api-spec/

python3 doc/api-spec/generate_api.py
dart run build_runner build

生成文件带有 GENERATED CODE 或“自动生成”标记时,不建议手动修改。App 场景下需要补充的方法,可以使用扩展文件或独立 service 封装。

开发路线

  • 设备列表:已接入 GB28181 设备列表接口。
  • 设备通道:计划接入通道列表、通道搜索、通道同步。
  • 直播预览:计划接入 WVP 点播接口,选择可播放地址进行移动端播放。
  • 告警:计划接入设备告警列表、筛选、详情。
  • 录像:计划接入录像查询、时间轴、回放。
  • 多 WVP:计划支持服务切换、历史服务管理。

更多规划见 doc/wvp-app-plan.md

参与贡献

欢迎提交 issue、PR 或功能建议。这个项目会保持移动端核心场景优先,尽量减少无关复杂度,保证代码结构清晰、可维护。

提交前建议运行:

flutter pub get
dart run build_runner build
flutter analyze

交流

可以扫码添加微信交流 WVP App、GB28181、移动端直播和项目合作。

微信二维码

致谢

感谢 wvp-GB28181-pro 项目及社区。

About

wvp app ,专供wvp的app,使用flutter开发,支持android,ios,如有需要可支持鸿蒙系统。目前正在开发中,细节可联系作者。

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages