VdoCipher Next.js Demo 🎥

This repository is a minimal Next.js application demonstrating how to integrate the VdoCipher secure video player. It displays a protected video using a server-side OTP (one time password) request.

---

🚀 Features

• Simple next/app layout with a single video page
• Server-side fetch of VdoCipher OTP and playback info
• Client IP detection for geo/whitelist locking
• Sample data file (data/videos.ts) with VdoCipher video IDs
• Environment-based configuration using VDOCIPHER_API_KEY

---

📁 Project Structure

app/                # Next.js app directory
  page.tsx          # Home page that loads a VdoCipher iframe
data/
  videos.ts         # Array of sample video metadata
utils/
  getClientIp.ts    # Utility for extracting client IP from headers
public/             # Static assets
...                 # Standard Next.js config files

---

🛠️ Getting Started

1. Clone the repo

   git clone https://github.com/yourusername/vdocipher.git
   cd vdocipher

2. Install dependencies

   npm install
   # or yarn
   # or pnpm install

3. Configure environment variable

   Create a .env.local file at the project root with your VdoCipher API key:

   VDOCIPHER_API_KEY=your_api_secret_here

   You can obtain the API key from your VdoCipher dashboard.

4. Run the development server

   npm run dev
   # or yarn dev

   Open http://localhost:3000 in your browser.

5. Change videos

   Update data/videos.ts with your own vdoCipherId values, or extend the page logic to iterate through the list.

---

📺 Tutorial Video

Below is a walkthrough of how the integration works. Click the thumbnail to watch on YouTube or use the embedded player.

<iframe width="560" height="315" src="https://www.youtube.com/embed/TtvLJimE6kE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

📦 Deployment

You can deploy this Next.js app to Vercel (recommended) or any platform that supports Node.js.

1. Push your code to a Git provider (GitHub, GitLab, etc.)
2. Import the repository in Vercel and set the VDOCIPHER_API_KEY environment variable in the dashboard
3. Trigger a deployment

---

💡 Tips

• The OTP request is made server-side (app/page.tsx) to keep the API key secret.
• Customize the watermarking/annotations payload in the fetch body to fit your requirements.
• Use getClientIp to restrict playback based on user location.

---

🤝 Contributing

Contributions are welcome! Feel free to open issues or pull requests with improvements.

---

📄 License

This project is licensed under the MIT License.

---

Happy coding! 🎬