Video Processing & Recording Engine
Relevant source files
The following files were used as context for generating this wiki page:
The Video Processing & Recording Engine is a core subsystem of KudosWall designed to facilitate high-fidelity browser-based video recording, secure storage, and authenticated playback of customer testimonials. It enables users to capture video feedback directly in the browser without third-party applications, providing a frictionless experience for testimonial collection.
The engine leverages a distributed architecture using Next.js Edge proxies for request routing, Cloudflare R2 for media storage, and HMAC-SHA256 signing for secure content delivery. Additionally, it integrates AI-driven transcript refinement to process speech-to-text data for subtitles and marketing content.
Sources: README.md:16-20, README.md:46-55, apps/web/src/lib/ai/prompts.ts:109-115
Media Storage & Security Architecture
KudosWall employs a secure media delivery pipeline that ensures video testimonials are only accessible via authorized requests. This is achieved through temporary signed paths and HMAC-SHA256 tokens.
Secure Delivery Sequence
The following diagram illustrates the flow from a visitor requesting a video to the final streaming from Cloudflare R2.
Sources: README.md:46-60
Key Security Components
| Component | Description | Source |
|---|---|---|
R2_SIGNING_SECRET | HMAC-SHA256 seed key used for signing media URLs. | README.md:120 |
| Signed Path TTL | Temporary signed URLs expire after 3600 seconds. | README.md:59 |
| Plan-Gating | Access to video features is enforced based on Stripe billing tiers. | README.md:21 |
Data Flow & API Endpoints
The system exposes specific API routes for the lifecycle of a video testimonial, from the initial upload of recorded blobs to the retrieval of stored assets.
Video Upload Flow
When a user completes a recording in the browser, the data is transmitted to the server-side upload handler.
API Route Definitions
| Endpoint | Method | Purpose |
|---|---|---|
/api/upload/video | POST | Handles the ingestion of video blobs from the recorder. |
/api/videos/[key] | GET | Serves/proxies video assets from storage using a unique key. |
/wall/[slug] | GET | Renders the "Wall of Love" containing embedded video players. |
Sources: apps/web/src/app/api/upload/video/route.ts, apps/web/src/app/api/videos/[key]/route.ts, apps/web/src/app/wall/[slug]/page.tsx:165-170
AI-Enhanced Post-Processing
The engine includes an "Intelligence Engine" that processes raw video transcripts to improve content quality for marketing purposes.
Transcript Refinement
KudosWall uses the CLEANUP_TRANSCRIPT AI prompt to transform speech-to-text data into clean subtitles. The process involves:
- Disfluency Removal: Stripping "um", "uh", and "like".
- Sentence Correction: Fixing run-on sentences.
- Voice Preservation: Maintaining industry jargon and the customer's personal "voice".
Sources: apps/web/src/lib/ai/prompts.ts:109-122
Sentiment & Theme Analysis
Videos are analyzed using the analysis schema to generate:
- Enthusiasm Scores: A 1-10 scale used for sorting high-impact testimonials.
- Theme Detection: Identifying core topics like "Support", "Pricing", or "UX".
- Mismatch Detection: Flagging videos where the spoken tone does not match the star rating.
Sources: apps/web/src/lib/ai/prompts.ts:36-47
Frontend Implementation: The Video Player
The user interface for video consumption is a high-fidelity, edge-optimized player designed for zero layout shift (CLS).
Player Configuration (Wall of Love)
The public "Wall of Love" renders testimonials using a specific configuration for video elements:
const wallSettings = {
layout: "masonry",
showRating: true,
showReviewerPhoto: true,
animation: "fade",
truncateText: "off",
maxItems: 100,
};
Sources: apps/web/src/app/wall/[slug]/page.tsx:86-103
Browser Compatibility & UX
The recording engine utilizes a browser-native flow that works on both mobile and desktop without app downloads. It captures high-fidelity video using standard web APIs (MediaRecorder) and transmits them as blobs to the backend.
Sources: apps/web/src/lib/comparisons.tsx:550-555, README.md:16-18
Summary
The KudosWall Video Processing & Recording Engine provides a robust, end-to-end pipeline for video testimonials. By combining Next.js Edge capabilities with Cloudflare R2 storage and HMAC-SHA256 security, it achieves high performance (sub-100ms loading) while maintaining enterprise-grade security. The integration of AI for transcript cleanup and sentiment analysis further adds value by automating the refinement of raw customer feedback into punchy marketing assets.