DEV Community

Cover image for Video Annotator
Javel Rowe
Javel Rowe

Posted on

4 1

Video Annotator

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

What I Built

VNote is a video annotation tool.

By adding a Youtube video URL to the input field on the landing page, users can access a note-taking interface integrated with the video player. This enables users to create timestamped notes directly linked to specific moments in the video, aiding in comprehension, retention, and collaboration through a shareable link.

Target Users

  • Educators: Create interactive video lessons with embedded notes, questions, or links to supplementary materials.

  • Students: Collaborate on study guides by annotating lecture videos or documentaries.

  • Researchers: Analyze and code qualitative video data with precise timestamps and linked resources.

  • Content Creators: Include additional context, behind-the-scenes details, or interactive elements to videos.

Demo

Demo Link

VNote Pro

Annotate, share, and learn from videos.

favicon vnote.pro

Video Demo

Github Repo

GitHub logo perplexedyawdie / video-annotator

Annotate, share, and learn from videos.

Welcome to VNote Pro 👋

Version License: MIT

Capture and share key moments from any video with time-stamped notes, links, etc. Easily collaborate and learn by sharing your annotated videos.

🏠 Homepage

Install

Make a copy of the .env.example file and rename it to .env.local then add the required env vars.

npm install
Enter fullscreen mode Exit fullscreen mode

Usage

You can run the command below or use the provided Dockerfile.

npm run dev
Enter fullscreen mode Exit fullscreen mode

Author

👤 Javel Rowe

Show your support

Give a ⭐️ if this project helped you!


This README was generated with ❤️ by readme-md-generator






Landing Page
Landing Page

Taking Notes
Taking notes!

Platform Primitives

Netlify Blobs made it super easy to quickly store/retrieve notes data.

Specifically, I was able to interact with Netlify Blobs by using the Typescript client. First, I initialized the client like so:

import { getStore } from '@netlify/blobs';

const store = getStore({
    name: 'note-store',
    siteID: process.env.NETLIFY_SITE_ID,
    token: process.env.NETLIFY_API_TOKEN,
})
Enter fullscreen mode Exit fullscreen mode

then I was able to easily save data like so:

export async function saveNote(noteData: VNote): Promise<boolean> {
    try {
        await store.setJSON(noteData.id, noteData)
        return true
    } catch (error) {
        console.error(error)
        return false
    }
}
Enter fullscreen mode Exit fullscreen mode

and retrieving was just as simple:

export async function getNoteData(noteId: string): Promise<VNote | null> {
    try {
        const noteData = await store.get(noteId, {
            type: "json"
        });
        if (noteData) {
            return {
                id: noteData.id,
                url: noteData.url,
                noteDetails: noteData.noteDetails ?? null
            }
        } else {
            throw new Error("Unable to retrieve note!");

        }
    } catch (error) {
        console.error(error)
        return null
    }
}
Enter fullscreen mode Exit fullscreen mode

This site was hosted on Netlify & I added a custom domain.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
masteing_the_code profile image
Joel Jose

ohh Nice👏

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️