thePR0M3TH3AN/bitvid
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2025-09-07 14:38:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Keep Creating Online
2025-01-08 16:28:05 -05:00
parent 547d6cf06c
commit bd7b6fd63c
2 changed files with 91 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
README.md
View File

@@ -1,309 +1,125 @@
# **bitvid: Building a Nostr + WebTorrent Video Streaming Client**
![](https://bitvid.netlify.app/assets/jpg/bitvid.jpg)
# bitvid - Decentralized Video Sharing
##### _IPNS: k51qzi5uqu5dgwr4oejq9rk41aoe9zcupenby6iqecsk5byc7rx48uecd133a1_
This project plan outlines the steps to build a decentralized video streaming client using **Nostr** for metadata and **WebTorrent** for video distribution. It includes technical specifications, a framework outline, and a phased approach for development.
**bitvid** is a decentralized platform where users can share videos and follow creators with privacy and freedom. Built with a static site architecture, it’s lightweight, efficient, and fully decentralized, making it ideal for hosting or local deployment.
---
## **1. Overview**
## Features
### **1.1 Objectives**
1. Enable users to upload videos by posting a magnet link along with metadata (title, description, tags, thumbnail).
2. Allow users to edit video metadata (e.g., description, thumbnail URL) without duplicating content.
3. Fetch video content via WebTorrent and display published videos on a decentralized platform.
4. Operate entirely client-side with static hosting.
5. Use Nostr to store and retrieve metadata.
- **Decentralized Sharing**: Video sharing without central servers.
- **Private Video Listings**: Share encrypted videos for added privacy.
- **Nostr Integration**: Use Nostr keys for login and interaction.
- **WebTorrent Streaming**: Stream videos directly through torrent technology.
- **Developer-Friendly**: Open source and customizable for your needs.
- **Responsive Design**: Seamless experience across devices.
---
## **2. Specifications**
## For Users
### **2.1 Nostr Note Specification**
### Getting Started
We will use **Kind `30078`** for arbitrary custom app data. The note will store all video metadata, enabling discovery and categorization. Editing is supported using the `d` tag in **Replaceable Events**.
#### **Nostr Event Schema**
```json
{
"kind": 30078,
"pubkey": "npub1exampleauthorhash",
"created_at": 1700000000,
"tags": [
["d", "example-video-identifier"],
["t", "video"],
["t", "tutorial"]
],
"content": {
"type": "video",
"magnet_link": "magnet:?xt=urn:btih:examplehash&dn=nostr-video.mp4",
"title": "Nostr Video Example",
"description": "A tutorial on Nostr and WebTorrent integration.",
"tags": ["video", "tutorial", "nostr"],
"author": "npub1exampleauthorhash",
"upload_time": 1700000000,
"file_size": "20MB",
"thumbnail": "https://example.com/thumbnail.jpg",
"duration": "15m20s"
}
}
```
#### **Fields Description**
- **kind**: `30078` (custom app data for video metadata).
- **tags**:
- `"d"`: Unique identifier (e.g., hash of the magnet link or custom ID) for replaceable events.
- `"t"`: Categorization tags for searching.
- **content**:
- `type`: Defines the content type (`video`).
- `magnet_link`: WebTorrent magnet link for the video.
- `title`, `description`, `tags`: Metadata for the video.
- `author`: Uploader’s Nostr public key (`npub`).
- `upload_time`: Unix timestamp of the upload.
- `file_size`: Size of the video file.
- `thumbnail`: URL of the video thumbnail.
- `duration`: Optional video duration (retrieved from metadata if available).
1. **Visit the Site**: Navigate to the live instance of **bitvid** (e.g., `https://bitvid.btc.us`).
2. **Login with Nostr**:
- Use a compatible Nostr browser extension or manually input your public key.
3. **Upload Videos**:
- Provide a title, magnet link, and optional thumbnail or description.
- Toggle "Private" for encrypted listings.
4. **Stream Videos**:
- Play videos directly in the browser using WebTorrent technology.
---
## **3. Framework Outline**
## For Developers
### **3.1 Technologies**
### Local Setup
- **Frontend**: React (or Vanilla JavaScript for smaller scale).
- **Decentralized Protocols**:
- **Nostr** for metadata storage, retrieval, and updates.
- **WebTorrent** for video content distribution.
- **Hosting**: Static hosting (e.g., GitHub Pages, Netlify, or Vercel).
To run **bitvid** locally:
---
1. Clone the repository:
### **3.2 Application Structure**
```bash
git clone https://github.com/PR0M3TH3AN/bitvid.git
cd bitvid
```
Organize the project into reusable components and modules to manage complexity and scalability.
2. Start a local server:
#### **3.2.1 Directory Structure**
```
src/
├── components/ # Reusable UI components
│ ├── Header.js # Navigation header
│ ├── Footer.js # Footer with links and copyright
│ ├── Layout.js # Wrapper for consistent page structure
│ ├── MagnetInput.js # Input for magnet links
│ ├── VideoForm.js # Form for uploading video metadata
│ ├── EditVideoForm.js # Form for editing video metadata
│ ├── VideoList.js # Displays list of videos
│ ├── VideoCard.js # Individual video item card
├── pages/ # Page-level components
│ ├── Home.js # Home page with video list
│ ├── Upload.js # Upload page for video publishing
│ ├── About.js # About page
├── utils/ # Utility functions and services
│ ├── torrent.js # WebTorrent integration
│ ├── nostr.js # Nostr event handling
├── App.js # Main application component
└── index.js # Entry point
```
---
### **3.3 Phases**
#### **Phase 1: Core Functionality**
1. **Input and Parse Magnet Links**:
- Create `MagnetInput` to accept user input for a magnet link.
- Validate the link format.
2. **Fetch Torrent Metadata**:
- Use `WebTorrent` to fetch file size, name, and optional metadata (e.g., duration, thumbnail).
3. **Publish Metadata to Nostr**:
- Build `VideoForm` to collect metadata (title, description, tags, thumbnail URL).
- Use `nostr-tools` to create and sign events, then publish them to relays.
4. **Display Videos**:
- Create `VideoList` to fetch and display videos published on Nostr relays.
---
#### **Phase 2: Editing and Replaceable Events**
1. **Enable Editing**:
- Fetch the latest metadata using the unique `d` tag.
- Prepopulate an editable form (`EditVideoForm`) with current metadata.
- Publish updates using replaceable events to overwrite the existing entry.
2. **UI for Editing**:
- Add an "Edit" button to each video card.
- Redirect users to the editing page or show a modal with the editing form.
---
#### **Phase 3: UI Enhancements**
1. **Reusable Layouts**:
- Add `Header` and `Footer` for navigation and consistent structure.
- Use `Layout` to wrap all pages.
2. **Dynamic Pages**:
- Implement routing (e.g., React Router) for `Home`, `Upload`, and `About` pages.
3. **Video Cards**:
- Create `VideoCard` to display individual video metadata in `VideoList`.
---
#### **Phase 4: Performance Optimization**
1. **Caching**:
- Use `IndexedDB` or `LocalStorage` to cache fetched metadata for offline usage.
2. **Pagination or Lazy Loading**:
- Improve `VideoList` for better handling of large datasets.
3. **Reduce Network Calls**:
- Debounce or throttle relay queries for efficiency.
---
#### **Phase 5: Advanced Features**
1. **Video Previews**:
- Stream videos directly in the browser using WebTorrent and HTML5 `<video>`.
2. **Search and Filters**:
- Add a search bar and filters for tags, titles, or authors.
3. **Reactions and Comments**:
- Use Nostr events (`kind: 7` for reactions and `kind: 1` for comments) to add engagement features.
---
## **4. Development Milestones**
### **Milestone 1: Basic Upload and Display**
- Implement `MagnetInput` and `VideoForm`.
- Fetch and publish metadata to Nostr.
- Build `VideoList` to display published videos.
**Deliverable**: Users can upload videos and see them listed.
---
### **Milestone 2: Editing Support**
- Implement `EditVideoForm` for editing metadata.
- Add `d` tags to video events for replaceable updates.
- Fetch and update metadata seamlessly.
**Deliverable**: Users can update metadata without duplicating content.
---
### **Milestone 3: Complete UI**
- Add `Header`, `Footer`, and `Layout` for consistent design.
- Implement routing for `Home`, `Upload`, and `About`.
**Deliverable**: Fully functional interface with navigation and polished design.
---
### **Milestone 4: Optimized Performance**
- Implement caching and pagination for `VideoList`.
- Optimize network calls for fetching Nostr events.
**Deliverable**: Application performs well with a large number of videos.
---
### **Milestone 5: Advanced Features**
- Add direct video streaming using WebTorrent.
- Implement search and filtering for videos.
- Enable user reactions and comments.
**Deliverable**: Feature-rich, fully decentralized video platform.
---
## **5. Hosting and Deployment**
1. **Static Hosting Options**:
- **GitHub Pages**: Free and integrates with Git repositories.
- **Netlify**: Free plan with continuous deployment and custom domains.
- **Vercel**: Optimized for React and other frontend frameworks.
2. **Deployment Steps**:
- Build the project:
- Using Python:
```bash
npm run build
python -m http.server 8000
```
- Deploy:
- **GitHub Pages**:
```bash
npm install gh-pages --save-dev
npm run deploy
```
- **Netlify** or **Vercel**:
- Connect the repository and configure the build settings.
- Or with Node.js:
```bash
npx serve
```
3. Open the site in your browser:
```
http://localhost:8000
```
### Configuration
- **`config.js`**:
- Toggle `isDevMode` for development (`true`) or production (`false`).
- **`site.webmanifest`**:
- Customize PWA settings such as theme color, icons, and start URL.
### Adding Features
1. **Fork the repository** and create a new branch for your feature.
2. Make changes and test locally.
3. Submit a pull request with a detailed explanation of your contribution.
---
## **6. Tools and Libraries**
## For Contributors
| **Category** | **Tool/Library** | **Description** |
| ---------------------- | ----------------------------- | ------------------------------------------ |
| Frontend Framework | React | Component-based UI development. |
| Decentralized Metadata | Nostr + nostr-tools | Protocol and tools for metadata storage. |
| Video Distribution | WebTorrent | Decentralized video streaming. |
| State Management | React Hooks | Local state for managing application data. |
| Styling | Tailwind CSS (optional) | Utility-first styling framework. |
| Hosting | Netlify, Vercel, GitHub Pages | Static hosting options. |
### How to Contribute
1. **Fork and Clone**:
```bash
git clone https://github.com/PR0M3TH3AN/bitvid.git
cd bitvid
```
2. **Create a Branch**:
```bash
git checkout -b feature/your-feature-name
```
3. **Make Changes**:
- Ensure your code follows best practices and is well-documented.
4. **Test**:
- Validate the site functionality locally before submitting.
5. **Submit a Pull Request**:
- Explain your changes and reference any related issues.
### Contribution Guidelines
- Follow the [MIT License](https://opensource.org/licenses/MIT).
- Use clear, concise commit messages.
- Respect the existing coding style and architecture.
---
## **7. Timeline**
## Acknowledgments
| **Week** | **Task** |
| -------- | -------------------------------------------- |
| Week 1 | Setup project, create `MagnetInput`. |
| Week 2 | Implement WebTorrent integration. |
| Week 3 | Build `VideoForm` and Nostr publishing. |
| Week 4 | Create `VideoList` to display videos. |
| Week 5 | Implement `EditVideoForm` with updates. |
| Week 6 | Add `Header`, `Footer`, and `Layout`. |
| Week 7 | Optimize performance (caching, lazy load). |
| Week 8 | Add advanced features (streaming, comments). |
**bitvid** leverages the following open-source technologies:
- **Nostr Tools** for decentralized identity management.
- **WebTorrent** for P2P video streaming.
- **TailwindCSS** for responsive design.
---
## **8. Risks and Mitigation**
## Contact & Support
### **8.1 Key Risks**
1. **Relay Downtime**:
- **Mitigation**: Use multiple relays and implement fallback mechanisms.
2. **Private Key Management**:
- **Mitigation**: Encourage integration with secure key storage solutions like Nostr Keychain.
3. **Scalability**:
- **Mitigation**: Optimize performance early (pagination, caching).
### **8.2 Potential Challenges**
- **Decentralized Thumbnails**:
- Since we rely on user-provided URLs, broken links might occur.
- Educate users to host thumbnails on reliable services.
- **Website**: [bitvid.btc.us](https://bitvid.btc.us)
- **GitHub**: [PR0M3TH3AN](https://github.com/PR0M3TH3AN)
- **Nostr**: [npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe](https://primal.net/p/npub13yarr7j6vjqjjkahd63dmr27curypehx45ucue286ac7sft27y0srnpmpe)
---
## **9. Deliverables**
1. **Core Application**:
- Magnet link input, torrent metadata fetching, Nostr publishing.
2. **Editing Support**:
- Allow metadata updates without creating duplicates.
3. **Polished UI**:
- Navigation, video listing, and upload pages.
4. **Performance Optimizations**:
- Efficient event fetching and caching.
5. **Advanced Features**:
- Streaming, reactions, and search capabilities.