BlueCams

BlueCams is a real-time social video product direction built around the promise: Meet. Talk. Connect. This repository contains the first verified Next.js product shell plus explicit server integration boundaries for the production systems described in the project specifications.

Included now

• Responsive BlueCams landing experience with original visual identity.
• Sidebar navigation for Home, Random Cam, Rooms, Messages, Friends, Notifications, Profile, and Settings.
• Intentional Random Cam camera/microphone setup backed by the real browser navigator.mediaDevices.getUserMedia({ video: true, audio: true }) flow.
• Real local <video> preview using video.srcObject = stream, live-track checks, explicit permission/error states, device enumeration, camera/microphone switching, speaker selection where setSinkId is supported, toggles that affect real tracks, and cleanup on Stop/unmount.
• Separate standard and 18+ experience switch with policy-aware safety copy. Adult access is not granted by the switch; production must require server-side age assurance and accepted terms.
• Honest empty states for rooms, friends, messages, notifications, and profile. No hardcoded social users, fake matches, fake conversations, fake rooms, fake notifications, fake viewer counts, or fake online status remain in the application UI.
• First-time onboarding shell that refuses to create a local profile until real Google OAuth and server-side onboarding are configured.
• Direct PostgreSQL-backed Google users, profiles, opaque hashed sessions, logout revocation, signed site state, short-lived video-session authorization, and server-side sign-in logging foundations.
• Health API that reports whether database, realtime, and vision integrations are configured.

Production integrations still required

The UI intentionally does not pretend to be a production matchmaking, WebRTC signaling, age-assurance, or AI provider. Wire these behind server routes before launch:

• Google OAuth / OpenID Connect and secure HttpOnly BlueCams sessions. Run database/schema.sql before enabling onboarding.
• PostgreSQL schema and migrations for friendships, blocks, messages, rooms, reports, moderation, calls, and audit logs.
• Authenticated realtime service for matchmaking, presence, notifications, signaling, and private calls.
• WebRTC STUN/TURN credentials from a real TURN provider. Never ship TURN secrets to the browser.
• Reputable age-assurance provider for VERIFIED_18_PLUS state; Google login is not proof of age.
• Dedicated Vision/Eagle Eye service for liveness and sampled safety analysis. Inconclusive must never become verified or safe.

Local setup

npm install
cp .env.example .env.local
npm run typecheck
npm test
npm run build
npm run dev

Open http://localhost:3000 and choose Set up video chat. Camera and microphone permission is requested only after pressing Enable camera & microphone. The browser's native prompt controls the result; the app cannot approve it. Localhost is a supported development secure context. Vercel production must use HTTPS.

If access is denied, use the browser's site settings to allow Camera and Microphone and press Enable camera & microphone again. If no device exists or another application owns it, BlueCams reports the specific state instead of showing an endless loading screen.

Environment

See .env.example. Generate the five independent cookie secrets with npm run generate:cookie-secrets; place the output only in a server environment file or secret manager. All credentials are server-only and must not use NEXT_PUBLIC_. Set DATABASE_URL, run database/schema.sql, configure OAuth callbacks for local and production URLs in the Google console, and optionally set DISCORD_SIGNIN_WEBHOOK_URL for server-side sign-in logging. Use HTTPS in production, strict CORS/origin checks for realtime, secure SameSite cookies, rate limits, CSP, and a restrictive camera/microphone Permissions-Policy.

Vercel architecture

Vercel hosts the Next.js web app and appropriate API routes. Persistent realtime, TURN, and heavy vision inference belong in dedicated services. Browser-to-browser media should use WebRTC with external STUN/TURN. A production rollout should run migrations and smoke-test OAuth, onboarding, authorization, blocking, matchmaking, signaling, 5 + 5 unlock, adult gating, reports, and safety-service degraded/unavailable states.

The app sends Permissions-Policy: camera=(self), microphone=(self), speaker-selection=(self) and does not grant unrelated origins access. The CSP permits same-origin app scripts/media, HTTPS/WSS realtime endpoints, and the configured font hosts.