Next Video Build Hackathon Livepeer x Encode Club

Website • Github • Twitter • LinkedIn • Documentation • Video

BubbleStreamr - A platform for decentralized social content live streaming.

Real-time engagement with your audience. The platform allows you to publish and stream your content, as well as monetize it in the best way possible.

Intro:

Whereas YouTube other streaming platform are incredible in numerous cases, it may be a centralized benefit that comes with its claim bushel of joy for creators and viewers. For starters, all capacity for video content is stored on centralized servers; hence, creators and users eventually have no control over what happens to their content. The streaming platform decides what should be on its platform, not the users.

Our Mission:

Understanding the needs of content creators and their views, we handle to solve these issues directly by creating a better environment for users utilizing decentralization, open-source development, and transparent terms & conditions. Using Ethereum-based decentralized administrations to improve decentralized online streaming and improve content monetization for creators in countless ways.

Our Service:

Live streams with live chat so you can interact directly with your audience - Livepeer

and Push

Broadcast your live streams on any device powered by Livepeer.

Notify your members you’re going live with in-app & Web3 Enabled browser extension from Push notifications directly to user wallet address: Push

Paid subscription options for monetization of your content via a pay-per-view paywall: Unlock Protocol

Decentralised naming for the user: ENS

Project Stack

• Video Streaming SDK: Livepeer - The World's Open Video Infrastructure Livepeer is a decentralized video infrastructure network.
• In-app Notifications and Chat: Push - Push Protocol is a web3 communication network, enabling cross-chain notifications and messaging for dapps, wallets, and services
• Decentralised Name: ENS - Decentralised naming for wallets, websites, & more.
• pay-per-view paywall: Unlock Protocol
• Building Framework: Nextjs -Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites
• Frontend:
  • 1. Mantine - Build fully functional accessible web applications faster than ever
  • 2. Chakra-ui - Create accessible React apps with speed
• React-Query - Fetch, cache and update data in your React and React Native applications all without touching any "global state"
• Hosting Platform: Vercel Platform from the creators of Next.js.

How it work:

First and primarily, the platform has been created for social purposes, that is, to facilitate content producers and consumers or followers.

Content creators will connect their wallets to access the entire DApp and create a stream using Livepeer a decentralized video infrastructure network.

After the stream is created, the content creators can share the Playback id with the users by using Push Notifications, a decentralized protocol for transmitting notifications. The notifications are then sent to the Streamers channel, where all subscribers are aware of the stream. Anyone can subscribe to the Channel by heading to the Push Notifications Icon and clicking the Subscribe button.

When viewers are notified and ready to join the stream, users can pay for the subscription using the Unlock protocol to mint an NFT token to gain access to the stream - which is a way to assist content creators monetize and fans to support.

Additionally, we added PushChat, which enables users to communicate with one another on the platform by connecting their wallets and exchanging messages.

Responsive	Desktop

Roadmap for the Project

• Complete innovations and UI improvements
• User profile creation, followers, tipping through a smart contract or payment SDK

Installing

1. clone the repo with the following git command:

git clone https://github.com/SabeloMkhwanzi/bubbleStreamr

2. open a terminal in the root directory of the project and run: If not runing add npm install --force

npm install

to install all the package dependencies for the project

Create a .env.local file in the root folder and populate it with the following variables, Get Api a key from Livepeer, Push and Using the Unlock Dashboard, create a lock. After generating the lock, modify the configuration in components\JoinStream\index.js

NEXT_PUBLIC_STUDIO_API_KEY=
NEXT_PUBLIC_ALCHEMY_ID=
NEXT_PUBLIC_PUSHCHAT_API_KEY=
NEXT_PUBLIC_APP_CHANNEL_PK=

Finally, run the development server:

npm run dev

GitHub Repository: https://github.com/SabeloMkhwanzi/bubbleStreamr

Demo video: video

Project Start: Date: Nov 08, 2022 - Jan 8, 2023

Happy Hacking 😊