Live link: Visit Streamify
Streamify is a Next.js and TypeScript-powered streaming web application, offering a feature-rich experience for content creators. With capabilities such as RTMP/WHIP streaming, authentication, real-time chat, viewer management, and a customizable dashboard, Streamify is a comprehensive platform for live content creation and community engagement. Its sleek design, rapid performance, and unique features make it a standout choice for seamless and interactive streaming experiences.
- Next Js 14: It is a React framework that supports server-side rendering, static site generation, and app router features.
- TypeScript: It is a superset of JavaScript that adds static type checking and other features to the language.
- Tailwind CSS: It is a utility-first CSS framework that allows you to style your elements using classes instead of writing custom CSS.
- Clerk: It is a platform that provides authentication and user management for Next.js applications.
- LiveKit: It is a service that enables real-time audio and video communication for web and mobile applications.
- MySQL: It is a relational database management system that stores and manages data in tables.
- Prisma: It is a next-generation ORM for Node.js and TypeScript that simplifies database access and operations.
- Shadcn UI: It is a UI component library for React that follows the Tailwind CSS design system.
- 📡 Streaming using RTMP / WHIP protocols
- 🌐 Generating ingress
- 🔗 Connecting Next.js app to OBS / Your favorite streaming software
- 🔐 Authentication
- 📸 Thumbnail upload
- 👀 Live viewer count
- 💬 Real-time chat using sockets
- 🎨 Unique color for each viewer in chat
- 👥 Following system
- 🚫 Blocking system
- 👢 Kicking participants from a stream in real-time
- 🎛️ Streamer / Creator Dashboard
- 🐢 Slow chat mode
- 🔒 Followers only chat mode
- 📴 Enable / Disable chat
- 🔽 Collapsible layout (hide sidebars, chat etc, theatre mode etc.)
- 📚 Sidebar following & recommendations tab
- 🏠 Home page recommending streams, sorted by live first
- 🔍 Search results page with a different layout
- 🔄 Syncing user information to our DB using Webhooks
- 📡 Syncing live status information to our DB using Webhooks
- 🤝 Community tab
- 🎨 Beautiful design
- ⚡ Blazing fast application
- 📄 SSR (Server-Side Rendering)
- 🗺️ Grouped routes & layouts
- 🗃️ MySQL
- 🚀 Deployment
- Log in to your account and go to the dashboard.
- Click on the Keys tab and select Generate Connections.
- Choose RTMP/WHIP from the drop-down menu and click Generate. You will see a server URL and a stream key. Copy them to your clipboard.
- Open OBS Studio on your computer. If you don’t have it, you can download it.
- In OBS Studio, go to Settings > Stream and select Custom as the service. Paste the server URL and the stream key in the corresponding fields. Click OK.
- Start your video source and click Start Streaming in OBS Studio. You are now streaming live 🎉🎉.
