Build a Livestream App With Next.js | Twitch Clone | Part 2/2
Github & Additional Content: https://www.codewithantonio.com/proje...
PART 1 • Build a Livestream App With Next.js |...
Clerk: https://dub.sh/UyH5Jb2
LiveKit: https://livekit.io/
Ngrok: https://ngrok.com/download
Nodejs: https://nodejs.org/en
Hi all 👋 In this free 14 hour tutorial you are going to learn how to build a Twitch Clone using Next 14. We are going to start with the basics like configuring Next.js, learning the routing concepts, and then slowly go deeper into setting up authentication, database, local tunnels, webhooks, all the way to generating RTMP and WHIP connections to connect to our OBS streaming software.
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
🚦 Live statuses
💬 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
Timestamps
00:00 Intro & Demo
00:11 Additional content
00:45 Key settings
22:32 Ingress
47:09 OBS crash course
53:45 Livekit webhook
01:10:20 Viewer token
01:34:14 Video component
02:14:27 Chat component
03:01:16 Community component
03:29:14 Header component
03:53:08 Info card
04:35:21 About card
04:57:16 User page
05:18:52 Home page
05:46:28 Search page
06:14:57 Unblock page
06:46:00 Deployment
Смотрите видео Build a Livestream App With Next.js | Twitch Clone | Part 2/2 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code With Antonio 12 Декабрь 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 67,534 раз и оно понравилось 1.4 тысяч людям.