-
Notifications
You must be signed in to change notification settings - Fork 151
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
13c21f5
commit 393aa48
Showing
1 changed file
with
143 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,174 @@ | ||
| # Stream2Peer | ||
| # 4C (The Cool Community of Content Creators) | ||
|
|
||
| Stream2Peer is a decentralized video stream management platform built on top of [Livepeer](https://livepeer.org/). Inspired by [StreamYard](https://streamyard.com/), this project replicates the core functionalities of StreamYard with added advantages of decentralization, scalability, and enhanced user control. Stream2Peer allows users to broadcast, record, and manage live streams seamlessly using the power of Web3 and Livepeer's open-source technology. | ||
| Imagine **The Cool Community For Content Creators** or **4C**, as a chill coffee shop (cooler even 💣). An inclusive and helpful environment, where we help content creators reach their goals by sharing experiences. | ||
|
|
||
| ## Features | ||
| Gain access to exclusive talks/workshops with popular content creators, and hence, opportunities to collaborate. | ||
|
|
||
| - **Decentralized Streaming**: Stream2Peer uses the Livepeer protocol to deliver highly scalable and decentralized video streaming services. | ||
| - **Multiple Streaming Destinations**: Broadcast to multiple platforms like YouTube, Twitch, LinkedIn, and more simultaneously. | ||
| - **Customizable Layouts**: Flexible layout options for live streaming, allowing you to control how guests and shared media appear. | ||
| - **Multi-Guest Support**: Invite guests easily to join your live streams with a simple URL. | ||
| - **Recording and Playback**: Record live streams and provide playback options for your audience. | ||
| - **Browser-Based Streaming**: No additional downloads required; Stream2Peer operates entirely from the browser. | ||
| - **Chat and Audience Interaction**: Built-in tools for live chat and audience engagement. | ||
| - **Monorepo Setup**: Organize both frontend and backend codebases in a single repository using `pnpm` workspaces. | ||
| We have games too! 🎮 | ||
|
|
||
| ## Tech Stack | ||
| ## 👋 Join Us : | ||
| Join our amazing community on Discord and Twitter. | ||
|
|
||
| - **Frontend**: | ||
| - Framework: [React](https://react.dev/) with [Vite](https://vitejs.dev/) for a fast development environment. | ||
| - UI: [TailwindCSS](https://tailwindcss.com/) for styling and flexibility in design. | ||
|
|
||
| - **Backend**: | ||
| - Framework: [AdonisJS](https://adonisjs.com/) for a scalable and robust server. | ||
| - Database: [MySQL](https://www.mysql.com/) (or any SQL database you prefer). | ||
|
|
||
| - **Streaming & Transcoding**: | ||
| - [Livepeer](https://livepeer.org/): Utilized for decentralized transcoding and media handling. | ||
|
|
||
| - **Monorepo Management**: | ||
| - Managed with [pnpm](https://pnpm.io/) workspaces for streamlined dependency management and easy package sharing between the frontend and backend. | ||
| <a href="https://discord.com/invite/cRjhjFRRre"><img src="https://cdn.worldvectorlogo.com/logos/discord-6.svg" title="Discord" alt="Discord Community" width="40"/></a><a href="https://twitter.com/4ccommunityhq"><img src="https://worldvectorlogo.com/logo/twitter-logo-2" title="Twitter" alt="Twitter Account" width="40"/></a> | ||
|
|
||
| ## Getting Started | ||
| <br> | ||
| <img src="https://raw.githubusercontent.com/FrancescoXX/4c-site/main/src/assets/banner.jpg" alt="4C logo"> | ||
|
|
||
| ### Prerequisites | ||
| ## 📷 Website overview | ||
|
|
||
| Before you begin, ensure you have met the following requirements: | ||
| This repository concerns the 4C community [website](https://www.4c.rocks/). Visit the website to stay up to date with community members' projects, active members, and other amazing content! | ||
|
|
||
| - [Node.js](https://nodejs.org/) v16+ installed | ||
| - [pnpm](https://pnpm.io/) installed globally | ||
| - PostgreSQL database running | ||
| ## 🎉 Want to contribute? | ||
|
|
||
| ### Installation | ||
| Whether you are a community member or not, we would love your point of view! Feel free to first check out our [code of conduct](https://github.com/FrancescoXX/4c-site/blob/main/CODE_OF_CONDUCT.md) and also the [contribution guidelines](https://github.com/FrancescoXX/4c-site/blob/main/CONTRIBUTING.md) for any missing steps. | ||
|
|
||
| 1. Clone the repository: | ||
| ### 💻 For Contributors | ||
|
|
||
| ```bash | ||
| git clone https://github.com/tobySolutions/stream2peer.git | ||
| cd stream2peer | ||
| #### 🔖 Tech Stack | ||
|
|
||
| The code base of this repo uses | ||
|
|
||
| - [NextJS](https://nextjs.org/) | ||
| - [TailwindCSS](https://tailwindcss.com/) | ||
|
|
||
| For contributing to the code, you will need | ||
|
|
||
| - [Node](https://nodejs.org/en/) installed on your computer. | ||
| - Basic knowledge of [Git](https://git-scm.com/) | ||
|
|
||
| #### 🔖 Contribution steps | ||
|
|
||
| You can directly work on this project on Gitpod! | ||
|
|
||
| [](https://gitpod.io/#https://github.com/FrancescoXX/4c-site) | ||
|
|
||
| Or, to work on it locally, | ||
|
|
||
| 1. [Fork](https://github.com/FrancescoXX/4c-site) this repository | ||
| 2. Clone the repo | ||
|
|
||
| ```console | ||
| $ git clone [email protected]:<your github username>/4c-site.git | ||
| ``` | ||
| 3. Navigate to the cloned directory | ||
|
|
||
| 2. Install dependencies: | ||
| ```console | ||
| $ cd 4c-site | ||
| ``` | ||
| 4. Install dependencies | ||
|
|
||
| ```console | ||
| $ npm install | ||
| ``` | ||
| 5. Start the project on `localhost` | ||
|
|
||
| ```bash | ||
| pnpm install | ||
| ```console | ||
| $ npm run dev | ||
| ``` | ||
|
|
||
| 3. Run the development server: | ||
| ##### Troubleshooting | ||
|
|
||
| In the course of trying to set up the project locally, if you come across an error that says `PWA is not supported`, you can try the following steps below to fix it; | ||
|
|
||
| > For Linux or Mac 👇 | ||
| ```bash | ||
| cd packages | ||
| pnpm run dev | ||
| 1. Go to 4c-site folder using `cd 4c-site` | ||
| 2. In the terminal, | ||
|
|
||
| ```console | ||
| $ export NODE_OPTIONS=--openssl-legacy-provider | ||
| ``` | ||
| 3. If you get an error in the above code then use the option below | ||
|
|
||
| ### Project Structure | ||
|
|
||
| ```bash | ||
| stream2peer/ | ||
| │ | ||
| ├── packages/ | ||
| │ ├── frontend/ # React with Vite (Client-side code) | ||
| │ └── backend/ # AdonisJS (Server-side code) | ||
| │ | ||
| ├── pnpm-workspace.yaml # pnpm workspace setup for monorepo | ||
| ├── package.json # Root package file | ||
| └── README.md # Project documentation | ||
| ``` | ||
| ```console | ||
| $ unset NODE_OPTIONS="" | ||
| ``` | ||
| 4. Start the development server with | ||
|
|
||
| ### Backend API | ||
| ```console | ||
| $ npm run dev | ||
| ``` | ||
|
|
||
| The backend is powered by AdonisJS, and it handles stream creation, user management, and more. The API endpoints are RESTful and support integration with Livepeer’s transcoding API for video handling. | ||
| > For Windows 👇 | ||
| ### Frontend | ||
| 1. Go to 4c-site folder using `cd 4c-site` | ||
| 2. In the terminal, | ||
| ```console | ||
| $ set NODE_OPTIONS=--openssl-legacy-provider | ||
| ``` | ||
| 3. Start the development server with | ||
| ```console | ||
| $ npm run dev | ||
| ``` | ||
|
|
||
| In order to run this project locally, you might require some additional configurations, such as downgrading your `node` version to v16. | ||
| You may get an error similar to this: | ||
|
|
||
|  | ||
|
|
||
| To fix this, downgrade your `node` version to v16. Here is a simple way of doing that with the [`nvm` node version manager](https://github.com/nvm-sh/nvm): | ||
|
|
||
| 1. Download and install `nvm`. Use [nvm-setup.exe](https://github.com/coreybutler/nvm-windows/releases) for windows, or [install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh) on other systems. | ||
| 2. Install version v16 | ||
|
|
||
| ```console | ||
| $ nvm install 16.16.0 | ||
| ``` | ||
| 3. Make your system use version 16 of node | ||
|
|
||
| ```console | ||
| $ nvm use 16.16.0 | ||
| ``` | ||
|
|
||
| To check if everything has worked, restart your shell and run `node -v`. The output should be `v16.16.0`. If it is, you can continue working on the project! | ||
|
|
||
| The frontend is built using React and Vite, offering a fast and optimized development environment. It allows users to interact with the Livepeer API, set up streams, invite guests, and more. | ||
|
|
||
| ## Contributing | ||
| #### Run commit | ||
|
|
||
| ```console | ||
| $ git commit -m <Commit-message> | ||
| ``` | ||
|
|
||
| #### 🔖 Adding a project to the project page | ||
|
|
||
| > Note: _The project page is reserved to display projects for community members only. Each member can put up only one project._ | ||
| To add your project to the project page, head over to the [`/data`](https://github.com/FrancescoXX/4c-site/tree/main/src/data) directory, and subsequently, the `projects.json` file. There, you will find objects for each project. | ||
|
|
||
| For example, | ||
|
|
||
| ```json | ||
| { | ||
| "name": "Francesco Ciulla", | ||
| "title": "FREE Web3 Resources", | ||
| "screenshot": "https://user-images.githubusercontent.com/18360871/199210192-f5599a23-f0b1-49ff-9c52-2554a72a2c14.png", | ||
| "description": "A list of resources to learn Web3 for FREE", | ||
| "link": "https://github.com/FrancescoXX/free-Web3-resources", | ||
| "twitter": "https://twitter.com/FrancescoCiull4", | ||
| "live_link": "https://www.freeweb3resources.com", | ||
| "stack": ["React", "CSS", "Solidity"] | ||
| } | ||
| ``` | ||
|
|
||
| - Create a new object similar to the one above. | ||
| - Follow the example above and create project details like; | ||
| - Your name | ||
| - The project's title | ||
| - A screenshot | ||
| - A short description | ||
| - A link to the GitHub repo (If it is open source) | ||
| - A link to your Twitter profile | ||
| - A live link to the project. | ||
| - Open a pull request 👍 | ||
|
|
||
| Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. | ||
| --- | ||
|
|
||
| 1. Fork the Project. | ||
| 2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`). | ||
| 3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`). | ||
| 4. Push to the Branch (`git push origin feature/AmazingFeature`). | ||
| 5. Open a Pull Request. | ||
| Notice anything odd and/or missing from this README or on the website itself? Feel free to raise an [issue](https://github.com/FrancescoXX/4c-site/issues). | ||
|
|
||
| ## License | ||
| Join the amazing [4C community](https://discord.com/invite/cRjhjFRRre) on discord, and follow us on [Twitter](https://twitter.com/4ccommunityhq) to stay in the loop. | ||
|
|
||
| Distributed under the MIT License. See `LICENSE` for more information. | ||
| # 🔑 License | ||
|
|
||
| ## Acknowledgements | ||
| This repository is under the [MIT](./LICENSE) license. | ||
|
|
||
| - [Livepeer](https://livepeer.org/) | ||
| - [AdonisJS](https://adonisjs.com/) | ||
| - [pnpm](https://pnpm.io/) | ||
| - [React](https://react.dev/) | ||
| - [Vite](https://vitejs.dev/) | ||
| Please leave a star ⭐️ All support is highly appreciated. |