A web application for managing and displaying video recordings with custom TEI XML transcriptions. For more information see:
This is a prototype application and is not intended for public use. It was developed for deployment in a secure environment and does NOT currently provide any authentication checks for calls to Express API endpoints. This will be addressed in a future release.
- Node.js (v18 or higher)
- npm or yarn
- Java (for eXist-db)
- eXist-db (v6.0 or higher) for XML data storage of transcriptions
- ffmpeg for generating thumbnails for transcriptions
- WISE instance (https://gitlab.com/vgg/wise/wise) for multimodal video search
This assumes prerequisites are in place. For complete setup instructions, see: docs/GETTING_STARTED.md
# Install Vue app dependencies
npm install
# Install Express server dependencies
npm run server:installThe .env file should point to the Express middleware:
VITE_API_BASE_URL=http://localhost:3000Configure the Express server in server/.env:
PORT=3000
EXISTDB_BASE_URL=http://localhost:8088/exist/apps/medeia
EXISTDB_USERNAME=<your-existdb-username>
EXISTDB_PASSWORD=<your-existdb-password>
CORS_ORIGIN=http://localhost:5174
MEDIA_BASE_DIR=<path-to-video-recordings>Add any video recordings of transcribed videos (e.g. mp4 files) to the MEDIA_BASE_DIR folder. If this folder path is not specified, the default path will be /media in the root of the project.
XML transcriptions of video recordings can be imported into eXist-db or the eXist-db dashboard or via the eXist-db API.
Transcriptions should conform to the MedEIA specification and should be placed in the data/transcriptions folder of the eXist-db medeia app.
You need two terminals:
Terminal 1 - Express Server:
npm run dev:serverTerminal 2 - Vue Dev Server:
npm run dev- Vue App: http://localhost:5174
- Express API: http://localhost:3000
- eXist-db: http://localhost:8088
- Vue 3 - JavaScript framework
- TypeScript - Static type checking
- SASS - CSS preprocessor
- Vite - Frontend build tool
- Pinia - State management
- Vue Router - Router for Vue.js
- SCSS - CSS preprocessor
- Express.js - Node.js middleware server (Port 3000)
- eXist-db - Native XML database for storing TEI XML documents (Port 8088)
- XQuery - Query language for XML data
- FFmpeg - Video processing library
- WISE - Multimodal search tool for media collections
apgrd_medeia/
├── src/ # Vue.js frontend
│ ├── assets/ # Static assets (images, videos)
│ ├── components/ # Reusable Vue components
│ ├── router/ # Vue Router configuration
│ ├── services/ # API service layer
│ ├── stores/ # Pinia stores
│ ├── styles/ # SCSS stylesheets
│ ├── views/ # Page components
│ ├── App.vue # Root component
│ └── main.ts # Application entry point
├── server/ # Express middleware
│ ├── config/ # Server configuration
│ ├── routes/ # API route handlers
│ ├── index.js # Server entry point
│ └── package.json # Server dependencies
├── medeia-existdb/ # eXist-db application, bundled for convenience
│ ├── modules/ # XQuery API modules
│ ├── data/ # XML data storage
│ └── *.xql # XQuery files
├── public/ # Public static assets
├── .env # Environment variables
├── package.json # NPM dependencies
└── vite.config.ts # Vite configuration
┌─────────────────┐ ┌──────────────────┐ ┌──────────────┐
│ Vue.js │ │ Express │ │ eXist-db │
│ Frontend │────────▶│ Middleware │────────▶│ Database │
│ (Port 5174) │ │ (Port 3000) │ │ (Port 8088) │
└─────────────────┘ └──────────────────┘ └──────────────┘
│ ┌──────────────────┐
└──────────────────▶│ WISE multimodal │
│ search │
└──────────────────┘
User interface. The Vue app is a single-page application (SPA) that uses the Vue Router for navigation and the Pinia state management library for application state management.
The Express server sits between the Vue frontend and eXist-db, providing a secure connection to the eXist-db API and abstracting away the XQuery logic required for eXist-db queries.
This application requires a separate instance of WISE (https://gitlab.com/vgg/wise/wise) for search and browsing of pre-processed video recordings. See the GitLab site for installation instructions.
The WISE API endpoint should be configured in the .env file. See .env.example for an example.
XML database. For detailed eXist-db setup instructions, see BACKEND_SETUP.md
The medeia eXist-db application package has the following structure:
medeia-existdb/
├── modules/
│ ├── api.xql # Main API endpoint
│ ├── recordings.xql # Recordings queries
│ └── transcriptions.xql # Transcriptions queries
├── data/
│ ├── recordings/ # Video metadata XML
│ └── transcriptions/ # TEI XML files
├── expath-pkg.xml # Package descriptor
├── repo.xml # Repository configuration
└── controller.xql # URL routing
Example usage in components:
import { recordingsService } from '@/services/api'
// In your component
const recordings = await recordingsService.getAll()
const recording = await recordingsService.getById(id)IMPORTANT: See security note above. This application is not currently intended for public use.
-
Build the application:
npm run build
-
Deploy the
dist/folder to your web server -
Ensure eXist-db is accessible from your production environment
-
Configure CORS in eXist-db if frontend and backend are on different domains
-
In the eXist-db dashboard, or via the eXist-db API, import any transcriptions of video recordings to the
data/transcriptionsfolder of themedeiaapp.
docs/GETTING_STARTED.mddocs/BACKEND_SETUP.md(eXist-db setup)
GPL v3