How to Add Video Annotation Tools to Your App — Copy-Paste Prompts Inside

Timestamped comments are text notes linked to a playback position — they appear in a sidebar and let reviewers jump to the referenced moment. Drawing annotations are visual overlays (lines, shapes, freehand) rendered directly on the video frame at a specific timestamp. Both are stored in the same annotation_comments table using different annotation_type values ('comment' vs 'drawing'). Most review workflows use both: text comments for context and drawings to point at the exact element being discussed.

Yes — Supabase Realtime subscriptions deliver INSERT events from other users within 100–300 ms. Each collaborator's annotations appear in every other viewer's sidebar in near real-time. Conflict resolution is simple: annotations are append-only (no two users edit the same row), so concurrent annotation is inherently safe. The only edge case is the Realtime reconnection duplicate bug — deduplicate by tracking annotation IDs in a Set ref.

Position a div absolutely over the video progress bar element. For each annotation, compute the left position as (timestamp_ms / duration_ms) * 100%. Render a small colored dot at that position with position: absolute and left: {percent}%. The dot needs pointer-events: all and a click handler that calls player.currentTime(timestamp_ms / 1000) to seek. Don't modify video.js internal DOM — overlay a separate div that matches the progress bar's dimensions.

Yes. For JSON: query all annotation_comments for the video and serialize to JSON — a Next.js Server Action or Supabase Edge Function works well for this. For PDF: use pdf-lib to create a document with one page per annotation, including the timestamp, content text, and a thumbnail of the drawing (convert Fabric.js canvas to a PNG data URL and embed it in the PDF). For simple annotation lists (no drawings), pdf-lib can run client-side in the browser without a server.

The annotation_permissions table controls who can see which video's annotations. The RLS policy on annotation_comments checks that the querying user's auth.uid() appears in annotation_permissions with any role for that video_id. A user who is not in annotation_permissions for a video gets zero rows from any query on annotation_comments for that video. Add users to annotation_permissions with their role when you share a video with them.

Yes, Supabase Realtime is well-suited for annotation collaboration — annotations are low-frequency events (a few per minute per user), well within Realtime's capacity. The main limitation is concurrent connection count: the free tier supports ~200 concurrent Realtime connections, Pro supports ~500. For a public video review platform with thousands of simultaneous viewers, you'd need Supabase Enterprise or a dedicated WebSocket server.

Set the canvas element's CSS pointer-events property to 'none' when in playback mode and 'all' when in an annotation mode. This is the single most important implementation detail for this feature. In React: style={{ pointerEvents: mode === 'playback' ? 'none' : 'all' }} on the canvas element. Test by clicking the video play button and the volume control while the canvas is mounted — both should work in playback mode.

Fabric.js is the best choice for video annotation — it provides a complete Object Model for pen, shape, and text tools with JSON serialization built in, making it straightforward to store and replay annotations. Konva.js is a capable alternative with better TypeScript types in version 9+. For simpler use cases (just freehand drawing, no shapes), the browser's native Canvas 2D API with Path2D is sufficient and has zero dependencies — but you lose the object-level manipulation that Fabric.js provides for editing and deleting individual annotations.