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 ππ.