{"id":31199969,"url":"https://github.com/zcyc/soon-screen-recorder","last_synced_at":"2025-09-20T10:49:18.861Z","repository":{"id":315197470,"uuid":"1031136353","full_name":"zcyc/soon-screen-recorder","owner":"zcyc","description":"A screen and webcam recording tool similar to Loom, but without the installation. Built with Next.js and Appwrite.","archived":false,"fork":false,"pushed_at":"2025-09-17T07:12:56.000Z","size":619,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-17T09:22:26.081Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://soon-screen-recorder.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zcyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-03T04:59:17.000Z","updated_at":"2025-09-17T02:19:44.000Z","dependencies_parsed_at":"2025-09-17T09:23:26.004Z","dependency_job_id":"2d79bd87-47ff-45ce-a04e-c85f04df8040","html_url":"https://github.com/zcyc/soon-screen-recorder","commit_stats":null,"previous_names":["zcyc/soon-screen-recorder"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zcyc/soon-screen-recorder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcyc%2Fsoon-screen-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcyc%2Fsoon-screen-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcyc%2Fsoon-screen-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcyc%2Fsoon-screen-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcyc","download_url":"https://codeload.github.com/zcyc/soon-screen-recorder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcyc%2Fsoon-screen-recorder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276085242,"owners_count":25582513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-20T10:49:15.808Z","updated_at":"2025-09-20T10:49:18.849Z","avatar_url":"https://github.com/zcyc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SOON - Screen Recording Made Simple\n\n**SOON** is a modern, web-based screen recording application built with Next.js that allows users to easily record their screen, camera, and audio with professional-quality output. Record, manage, and share your videos with a beautiful, intuitive interface.\n\n## 🎬 Features\n\n### Core Recording Features\n- **Multi-source Recording**: Record screen, camera, or both simultaneously\n- **High Quality Output**: Support for 720p and 1080p recording with customizable bitrates\n- **Audio Recording**: Capture system audio, microphone, or both\n- **Flexible Screen Sources**: Record entire screen, specific windows, or browser tabs\n- **Real-time Subtitles**: AI-powered speech recognition with subtitle generation (SRT/VTT export)\n- **Recording Controls**: Pause/resume functionality with real-time duration tracking\n\n### Video Management\n- **Video Gallery**: Organized grid and list views of all recordings\n- **Video Player**: Custom video player with subtitle support\n- **Public/Private Videos**: Control video visibility and sharing permissions\n- **Video Metadata**: Track views, duration, quality, and creation dates\n- **Search \u0026 Filter**: Find videos by title, quality, or other attributes\n\n### Sharing \u0026 Collaboration\n- **Public Sharing**: Generate shareable links for public videos\n- **Video Reactions**: Emoji-based reaction system for viewer engagement\n- **Download Options**: Export videos in WebM format\n- **Responsive Player**: Optimized video display across all devices\n\n### User Experience\n- **Authentication System**: Secure user registration and login with Appwrite\n- **Multi-language Support**: Built-in internationalization (English/Chinese)\n- **Theme Support**: Light and dark mode with customizable themes\n- **Responsive Design**: Mobile-first design that works on all devices\n- **Real-time Notifications**: Toast notifications for user feedback\n\n## 🛠️ Tech Stack\n\n- **Framework**: [Next.js 15](https://nextjs.org/) with App Router and Turbopack\n- **UI Library**: [shadcn/ui](https://ui.shadcn.com/) + [Tailwind CSS](https://tailwindcss.com/)\n- **Backend Services**: [Appwrite](https://appwrite.io/) for authentication, database, and file storage\n- **Recording API**: Web APIs (MediaRecorder, Screen Capture, getUserMedia)\n- **Styling**: Tailwind CSS 4.0 with CSS variables and theme system\n- **TypeScript**: Full type safety throughout the application\n- **Icons**: [Lucide React](https://lucide.dev/) icon library\n\n## 🏗️ Architecture Overview\n\nSOON uses Appwrite as the primary backend service:\n- **Appwrite**: Authentication, database operations, video storage, metadata management\n- **Next.js**: Frontend and API routes\n- **Client-side APIs**: Web recording APIs for media capture\n\n## 🚀 Complete Setup Guide\n\n### 📋 Prerequisites\n\nBefore starting, ensure you have:\n\n- **Node.js 18+** installed\n- **Appwrite project** created and accessible\n- **Git** for version control\n\n### ☁️ Step 1: Appwrite Setup\n\n#### 1. Create Appwrite Project\n\n1. **Access Appwrite Console**\n   - Visit: https://cloud.appwrite.io (or your self-hosted instance)\n   - Create an account or sign in\n   - Click \"Create Project\"\n   - Project Name: `SOON Screen Recorder`\n   - Project ID: `soon`\n\n#### 2. Configure Authentication\n\n1. **Navigate to Auth \u003e Settings**\n2. **Enable Auth Methods**:\n   - ✅ Email/Password\n   - ✅ Session Limit: 10\n   - ✅ Password History: 5\n3. **Security Settings**:\n   - Session Length: 1 year\n   - Password Dictionary: Enable\n\n#### 3. Create Database Collections\n\n##### 🎬 Videos Collection\n\n1. **Create Collection**\n   - Navigate to **Databases**\n   - Click \"Create Database\"\n   - Database ID: `soon`\n   - Database Name: `SOON Database`\n\n2. **Create Videos Collection**\n   - Collection ID: `videos`\n   - Collection Name: `Videos`\n\n3. **Add Attributes**:\n   \n   **String Attributes:**\n   ```\n   • title - Size: 255, Required: ✅\n   • fileId - Size: 255, Required: ✅\n   • userId - Size: 255, Required: ✅\n   • userName - Size: 255, Required: ✅\n   • quality - Size: 10, Required: ✅\n   • thumbnailUrl - Size: 500, Required: ❌\n   • subtitleFileId - Size: 255, Required: ❌\n   ```\n   \n   **Integer Attributes:**\n   ```\n   • duration - Default: 0, Required: ✅\n   • views - Default: 0, Required: ✅\n   ```\n   \n   **Boolean Attributes:**\n   ```\n   • isPublic - Default: false, Required: ✅\n   ```\n\n##### 👥 Reactions Collection\n\n1. **Create Collection**\n   - Collection ID: `reactions`  \n   - Collection Name: `Video Reactions`\n\n2. **Add Attributes**:\n   \n   **String Attributes (All Required):**\n   ```\n   • videoId - Size: 255\n   • userId - Size: 255  \n   • userName - Size: 255\n   • emoji - Size: 10\n   ```\n\n#### 4. Configure Permissions 🔐\n\n**Critical Step** - For both collections:\n\n1. **Videos Collection**:\n   - Click `videos` → `Settings` → `Permissions`\n   - **Read**: `users`, `any` (for public videos)\n   - **Create**: `users`\n   - **Update**: `users`\n   - **Delete**: `users`\n\n2. **Reactions Collection**:\n   - Click `reactions` → `Settings` → `Permissions`\n   - **Read**: `any`\n   - **Create**: `users`\n   - **Update**: `users`\n   - **Delete**: `users`\n\n#### 5. Create Storage Bucket\n\n1. **Navigate to Storage**\n2. **Create Bucket**:\n   - Bucket ID: `videos`\n   - Bucket Name: `Video Storage`\n   - File Size Limit: 1000MB (or your preference)\n   - Allowed Extensions: `webm,mp4,mov,avi`\n\n3. **Configure Bucket Permissions**:\n   - **Read**: `any` (for public access)\n   - **Create**: `users`\n   - **Update**: `users`\n   - **Delete**: `users`\n\n#### 6. Get API Keys\n\n1. **Navigate to Overview**\n2. **Copy Project Details**:\n   - Endpoint URL\n   - Project ID\n   - API Key (for server-side operations)\n\n### 📦 Step 2: Application Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd soon-screen-recorder\n   npm install\n   ```\n\n2. **Environment Configuration**\n   \n   Create a `.env.local` file in the root directory:\n   ```env\n   # Appwrite Configuration\n   NEXT_PUBLIC_APPWRITE_ENDPOINT=\"https://cloud.appwrite.io/v1\"\n   NEXT_PUBLIC_APPWRITE_PROJECT_ID=\"soon\"\n   NEXT_PUBLIC_APPWRITE_DATABASE_ID=\"soon\"\n   NEXT_PUBLIC_APPWRITE_BUCKET_ID=\"videos\"\n   \n   # Collection IDs\n   NEXT_PUBLIC_APPWRITE_COLLECTION_VIDEO_ID=\"videos\"\n   NEXT_PUBLIC_APPWRITE_COLLECTION_VIDEO_REACTIONS_ID=\"reactions\"\n   \n   # Server-side API Key (DO NOT expose to client-side)\n   APPWRITE_API_KEY=\"your_server_api_key\"\n   \n   # Optional: Analytics \u0026 Monitoring\n   NEXT_PUBLIC_ANALYTICS_ID=\"your_analytics_id\"\n   ```\n\n3. **Start Development Server**\n   ```bash\n   npm run dev\n   ```\n   \n   Open [http://localhost:3000](http://localhost:3000) to see the application.\n\n### 🔧 Troubleshooting\n\n#### Common Issues\n\n1. **Appwrite 401 Unauthorized**\n   - Verify Appwrite endpoint URL\n   - Check project ID and API key\n   - Ensure permissions are set correctly\n\n2. **Video Upload Fails**\n   - Check bucket permissions\n   - Verify file size limits\n   - Ensure allowed file extensions\n\n3. **Recording Not Working**\n   - Check browser permissions for camera/microphone\n   - Test in Chrome/Edge for best compatibility\n   - Ensure HTTPS for production deployment\n\n#### Environment Variables Checklist\n\nEnsure these variables are properly set:\n- ✅ `NEXT_PUBLIC_APPWRITE_ENDPOINT` - Appwrite endpoint\n- ✅ `NEXT_PUBLIC_APPWRITE_STORAGE_ENDPOINT` - Appwrite storage endpoint (for file URLs)\n- ✅ `NEXT_PUBLIC_APPWRITE_PROJECT_ID` - Your project ID\n- ✅ `NEXT_PUBLIC_APPWRITE_DATABASE_ID` - Database ID\n- ✅ `NEXT_PUBLIC_APPWRITE_BUCKET_ID` - Storage bucket ID\n- ✅ `APPWRITE_API_KEY` - Server-side API key\n\n## 📝 Usage\n\n### Recording Videos\n1. **Navigate to Dashboard**: Log in and go to the dashboard\n2. **Configure Recording**: Choose your recording source (screen/camera/both)\n3. **Set Quality**: Select between 720p and 1080p output\n4. **Enable Features**: Toggle audio recording and subtitles as needed\n5. **Start Recording**: Click the record button and grant necessary permissions\n6. **Control Recording**: Use pause/resume controls during recording\n7. **Save \u0026 Share**: Add a title, set privacy, and upload your video\n\n### Managing Videos\n- **View Library**: Browse all your recordings in the dashboard\n- **Share Videos**: Copy share links or use the built-in sharing features\n- **Download Videos**: Export your recordings in WebM format\n- **Delete Videos**: Remove unwanted recordings from your library\n\n### Advanced Features\n- **Subtitle Export**: Download generated subtitles in SRT or VTT format\n- **Public Gallery**: Browse public videos from other users\n- **Reactions**: Add emoji reactions to videos you watch\n- **Responsive Viewing**: Videos automatically adapt to container sizes\n\n## 🎨 Theming\n\nThe application includes a comprehensive theming system supporting light and dark modes. When developing:\n\n- Use CSS custom properties like `var(--color-primary)` \n- Utilize Tailwind theme classes like `bg-primary text-primary-foreground`\n- Avoid hardcoded colors to ensure proper theme switching\n- Customize themes in `contexts/theme-context.tsx`\n\n## 📁 Project Structure\n\n```\n├── app/                    # Next.js app directory\n│   ├── (login)/           # Authentication pages\n│   ├── dashboard/         # Main recording interface\n│   ├── discover/          # Public video gallery\n│   ├── devices/           # Device management\n│   ├── share/[videoId]/   # Public video sharing\n│   └── api/               # API routes\n├── components/            # Reusable UI components\n│   ├── ui/               # shadcn/ui components\n│   ├── screen-recorder.tsx # Main recording component\n│   ├── video-gallery.tsx  # Video management interface\n│   └── header.tsx        # Navigation header\n├── contexts/             # React contexts\n├── lib/                  # Utility libraries\n│   ├── auth/            # Authentication services\n│   ├── services/        # Business logic services\n│   ├── database.ts       # Appwrite database operations\n│   ├── appwrite.ts      # Appwrite configuration\n│   └── config.ts        # App configuration\n└── public/              # Static assets\n```\n\n## 🔧 Development Scripts\n\n- `npm run dev` - Start development server with Turbopack\n- `npm run build` - Build for production  \n- `npm run start` - Start production server\n\n## 🌐 Browser Support\n\n- **Chrome/Edge**: Full support with optimal performance\n- **Firefox**: Full support with slightly reduced performance\n- **Safari**: Partial support (some recording features limited)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📧 Support\n\nFor support and questions:\n- Create an issue on GitHub\n- Join our community discussions\n- Check the troubleshooting section above\n\n---\n\nBuilt with ❤️ using Next.js and Appwrite","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcyc%2Fsoon-screen-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcyc%2Fsoon-screen-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcyc%2Fsoon-screen-recorder/lists"}