Native DJI Browser

面向 DJI 运动相机素材管理的本地 Web 应用。
挂载 Osmo Action 目录后即可在浏览器中完成素材预览、筛选和导出。

目录

• 核心特性
• 技术栈
• 快速开始
• Docker 部署
• 工作流说明
• 目录结构
• DJI 文件映射
• FAQ

核心特性

• 本地优先（Local-First）
  • 素材和元数据默认在本地处理，不上传原始媒体内容。
• DJI 预览链路优化
  • 列表优先使用 THM 进行快速预览。
  • 详情优先使用 JPG/DNG，THM 仅作为回退源。
• 数据库元数据解析
  • 读取 AC004.db 并展示收藏、GPS、打点等关键信息。
  • 元数据可用于页面筛选与信息增强。
• 成套导出（两段式）
  • 按 DJI 默认目录层级打包导出 ZIP，而非仅导出原图/原视频。
  • 导出前展示文件清单，确认后执行。
• i18n 支持
  • 内置 中文 / English，并支持语言切换与本地持久化记忆。

技术栈

• 前端：Vue 3 + TypeScript + Vite
• 状态管理：Pinia + 持久化插件
• 媒体能力：ArtPlayer、ExifReader
• 数据解析：SQL.js（浏览器端 SQLite）
• 样式：Tailwind CSS v4
• 部署：Docker + Nginx

快速开始

环境要求

• Node.js 20+
• pnpm 9+
• Chrome / Edge（需支持 File System Access API）

本地开发

pnpm install
pnpm run dev

构建与预览

pnpm run build
pnpm run preview

Docker 部署

启动（默认 8080）

docker compose up -d --build

访问：http://localhost:8080

自定义端口

PORT=9090 docker compose up -d --build

常用命令

docker compose logs -f
docker compose down

健康检查

curl http://localhost:8080/health

工作流说明

1) 预览加载策略

1. 先索引媒体与元数据，不抢首屏渲染，减少闪烁。
2. 列表卡片优先 THM，详情弹窗优先 JPG/DNG。

2) 导出流程（两段式）

1. 选择素材后先生成导出计划。
2. 在确认界面查看文件清单和目录层级。
3. 确认后打包 ZIP 导出。

目录结构

.
├─ src/
│  ├─ components/         # UI 组件（卡片、详情弹窗等）
│  ├─ composables/        # 业务逻辑（媒体、导出、数据库）
│  ├─ i18n/               # 国际化消息与配置
│  ├─ stores/             # Pinia 状态
│  └─ main.ts
├─ Dockerfile
├─ docker-compose.yml
├─ nginx.conf
└─ README.md

DJI 文件映射

文件	作用
.MP4	原始视频素材
.LRF	低码率预览视频
.THM	缩略图（秒开封面）
.JPG	预览图 / 照片主文件
.DNG	RAW 素材
AC004.db	元数据（收藏、GPS、打点等）

FAQ

为什么建议使用 Chrome / Edge？

项目依赖 File System Access API 来挂载并读写本地目录，该能力在 Chromium 系浏览器支持最完整。