GithubHelp home page GithubHelp logo

sudhanshu-purohit / streamify Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 308 KB

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.

Home Page: https://streamify-eight.vercel.app/

TypeScript 98.65% CSS 1.08% JavaScript 0.27%
clerk livekit mysql nextjs14 prisma shadcn-ui tailwindcss typescript

streamify's Introduction

Live link: Visit Streamify

Description:

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.

Tech Stack:

  1. Next Js 14: It is a React framework that supports server-side rendering, static site generation, and app router features.
  2. TypeScript: It is a superset of JavaScript that adds static type checking and other features to the language.
  3. Tailwind CSS: It is a utility-first CSS framework that allows you to style your elements using classes instead of writing custom CSS.
  4. Clerk: It is a platform that provides authentication and user management for Next.js applications.
  5. LiveKit: It is a service that enables real-time audio and video communication for web and mobile applications.
  6. MySQL: It is a relational database management system that stores and manages data in tables.
  7. Prisma: It is a next-generation ORM for Node.js and TypeScript that simplifies database access and operations.
  8. Shadcn UI: It is a UI component library for React that follows the Tailwind CSS design system.

Key Features:

  • πŸ“‘ 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

How to stream:

  1. Log in to your account and go to the dashboard.
  2. Click on the Keys tab and select Generate Connections.
  3. 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.
  4. Open OBS Studio on your computer. If you don’t have it, you can download it.
  5. 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.
  6. Start your video source and click Start Streaming in OBS Studio. You are now streaming live πŸŽ‰πŸŽ‰.

Screenshots:

Screenshot (185)



Screenshot (186)



Screenshot (187)



Screenshot (188)

streamify's People

Contributors

sudhanshu-purohit avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.