mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
chore: remove documentation that is better suited to exist elsewhere
This commit is contained in:
Gabe Kangas
parent
78f6906bfb
commit
7e25a033b1
@ -1,74 +0,0 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Design" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
# Owncast Design Guidelines & Resources
|
||||
|
||||
A collection of design contribution guidelines and resources for the Owncast interface.
|
||||
|
||||
> **All participating designers are highly encouraged to shape and evolve these guidelines!**
|
||||
> It is a work in progress and as we have design contributors we can work to solidify the process, tools and resources.
|
||||
|
||||
## 👋 Welcome
|
||||
|
||||
Owncast is a is a live streaming and chat server targeted to anybody who has live streaming needs. This means anybody from corporate events, government meetings, game streamers, musicians, churches, TV stations, and more.
|
||||
|
||||
Read the detailed [product definition](https://github.com/owncast/owncast/blob/develop/docs/product-definition.md) to learn more.
|
||||
|
||||
## 🚢 How to contribute to product design
|
||||
|
||||
1. Check out open [issues](https://github.com/owncast/owncast/issues) here on GitHub (we label them with `needs design`)
|
||||
2. Feel free to open an issue on your own if you find something you would like to contribute to the project.
|
||||
3. Add your contributions to an issue and we promise we will review your contribution carefully and foster discussions
|
||||
|
||||
**We encourage you to:**
|
||||
|
||||
* Get in touch with the team by joining our [Community Chat](https://owncast.rocket.chat).
|
||||
* Check out our [Contributor Guide](https://owncast.online/help) and
|
||||
[Code of Conduct](https://github.com/owncast/owncast/blob/develop/CODE_OF_CONDUCT.md)
|
||||
|
||||
## 🎭 Target audience
|
||||
|
||||
Owncast is a is a live streaming and chat server targeted to anybody who has live streaming needs. This means anything from corporate events, government meetings, game streams, concerts, TV stations, and more.
|
||||
|
||||
## 🧑🎨 Product design opportunities
|
||||
|
||||
Owncast is a constantly moving project with features both old and new. This allows for design contributions to be both big or small.
|
||||
You may not know how much time you can dedicate to the project, or if you'll be able to see something through to the end, so be honest about that. Take on projects that you'll be able to see completed.
|
||||
|
||||
* So maybe start small by finding rough edges and improvements to existing features without requiring complete rewrites. As a small project the bandwidth for rebuilding existing designs is limited, but tweaks are appreciated. This is especially great if you don't know how much time or energy you'll be able to provide the project. If you think you have a week to help, but might not be around in a month small projects are better.
|
||||
* If you think you'll be around longer term, learn about future new features and start thinking about the design challenges of those so we can build them your feedback and design contributions in mind. See your designs put in the world through brand new functionality!
|
||||
* Not everything has to be a a feature. Think big picture. What can we start doing now to put the project in a better place six months from now, or a year?
|
||||
|
||||
## 💅 Design relevant materials
|
||||
|
||||
A collection of design relevant information and materials can be found under the "style" section of "Storybook" here:
|
||||
|
||||
http://owncast.online/components
|
||||
|
||||
### Fonts
|
||||
|
||||
https://owncast.online/components/?path=%2Fdocs%2Fowncast-styles-typography--page
|
||||
|
||||
Body text: Inter
|
||||
|
||||
Display/Header text: Poppins
|
||||
|
||||
### Colors
|
||||
|
||||
https://owncast.online/components/?path=%2Fdocs%2Fowncast-styles-colors-components--page
|
||||
|
||||
### Design Files, Screenshots, etc
|
||||
|
||||
We do not currently have any design files that fully represent the state of
|
||||
the Owncast interface. However going forward it would be nice to resolve this
|
||||
and collaborate on designs.
|
||||
|
||||
We do have a [PenPot organization](https://design.penpot.app/#/dashboard/team/8373f780-f255-11ec-b774-f940e3befd53/projects). Please ask for access.
|
||||
|
||||
## 🎓 License
|
||||
|
||||
All design work is licensed under the
|
||||
[MIT](https://mit-license.org/)
|
||||
|
||||
[(Back to top)](#-table-of-contents)
|
||||
@ -1,86 +0,0 @@
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta title="owncast/Documentation/Get Started with Owncast Development" parameters={{previewTabs: { canvas: { hidden: true } }, chromatic: { disableSnapshot: true }}} />
|
||||
|
||||
***
|
||||
|
||||
title: "How to work on Owncast"
|
||||
description: The technical details for those wishing to take part in Owncast development.
|
||||
tags:
|
||||
\[
|
||||
development,
|
||||
contribute,
|
||||
open-source,
|
||||
github,
|
||||
git,
|
||||
go,
|
||||
react,
|
||||
typescript,
|
||||
contributing,
|
||||
]
|
||||
aliases: \[/docs/building]
|
||||
type: toc
|
||||
toc: true
|
||||
---------
|
||||
|
||||
Owncast is a straightforward web application and compared to many projects is very easy to get running locally and contributing to.
|
||||
|
||||
* The backend is written in [Go](https://go.dev/).
|
||||
* The frontend is written in [React](https://reactjs.org/).
|
||||
|
||||
If you're interested in contributing to Owncast, here's how you can get started.
|
||||
|
||||
## How to start with Frontend development
|
||||
|
||||
The web frontend of Owncast is written in React with TypeScript built using [Next.js](https://nextjs.org/).
|
||||
|
||||
You can browse the React components in the project using our [Storybook](https://owncast.online/components) page to get an idea of how the frontend is structured.
|
||||
|
||||
1. Fork the Owncast repository on Github located at https://github.com/owncast/owncast.
|
||||
2. Check out your fork locally with `git clone https://github.com/yourusername/owncast`.
|
||||
3. Create a new branch for your new changes with `git checkout -b my-new-feature`.
|
||||
|
||||
### Run the web project
|
||||
|
||||
1. Change to the `web` directory and install dependencies with `npm install`.
|
||||
2. Start the development server with `npm run dev`.
|
||||
3. Open `http://localhost:3000` in your browser.
|
||||
|
||||
You must have an instance of Owncast running locally to connect to. You can run one with `go run main.go` from the root of the repository. Read more details about running development Owncast under the backend section.
|
||||
|
||||
### Learn about how to write React Components with Owncast
|
||||
|
||||
We have a [short document](https://github.com/owncast/owncast/blob/develop/web/components/_COMPONENT_HOW_TO.md) outlining the specifics of the hows and whys of our specific component approach.
|
||||
|
||||
### Use Storybook to update and create components
|
||||
|
||||
Storybook is a tool that allows you to create and test components in isolation. It's a great way to develop new components and test them out without running a copy of the Owncast server.
|
||||
|
||||
1. Run `npm run storybook` to start the Storybook server.
|
||||
2. Open `http://localhost:6006` in your browser.
|
||||
3. Navigate the Storybook interface to browse and test components.
|
||||
|
||||
## How to start with Backend development
|
||||
|
||||
The backend of Owncast is written in Go. It operates as a web and API server, inbound RTMP ingestion server, outbound HLS distribution server, and chat server.
|
||||
|
||||
1. Ensure you have the [Go programming language](https://go.dev/dl/) tools installed for your system.
|
||||
2. Clone the Owncast repository with `git clone https://github.com/owncast/owncast`.
|
||||
3. A c compiler and tooling must be available on your system. Generally this means installing `gcc` and its development libraries.
|
||||
4. Run `go run main.go` from the root of the repository.
|
||||
|
||||
### Go Linting
|
||||
|
||||
We use golangci-lint to lint our Go code. While optional, it is a useful tool to assist you in writing better Go code. You can install it from the [golangci-lint](https://golangci-lint.run/welcome/install/#local-installation) website.
|
||||
|
||||
## Run a development stream
|
||||
|
||||
Many features are only enabled when a stream is live. You can run a local stream using any video file you have around by running:
|
||||
|
||||
```bash
|
||||
./test/ocTestStream.sh somevideofile.mp4
|
||||
```
|
||||
|
||||
## If you haven't yet, find an issue to work on
|
||||
|
||||
Visit our [Good First Issues](https://github.com/owncast/owncast/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) list to find something that might be a good fit for you to start on. Otherwise, feel free to drop into our [community chat](https://owncast.rocket.chat) and say hi and we can get to know you and see where you'd like to take part.
|
||||
@ -1,142 +0,0 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/Basic Example"
|
||||
parameters={{
|
||||
previewTabs: { canvas: { hidden: true } },
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## Basic
|
||||
|
||||
This is the most basic Owncast setup and is what you get when you run it without any additional services.
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
Owncast{fa:fa-server Owncast}
|
||||
|
||||
A[fa:fa-window-maximize Web App] --Video-->Owncast
|
||||
A[fa:fa-window-maximize Web App] --Web-->Owncast
|
||||
A[fa:fa-window-maximize Web App] <--Chat-->Owncast
|
||||
B[fa:fa-tv Smart TV] --Video--> Owncast
|
||||
I[fa:fa-window-restore Chat Embeds] --Web-->Owncast
|
||||
I[fa:fa-window-restore Chat Embeds] <--Chat-->Owncast
|
||||
Owncast --Video-->F[fa:fa-shapes VLC]
|
||||
Owncast --Video-->G[fa:fa-window-restore Video Embeds]
|
||||
Owncast --Web-->G[fa:fa-window-restore Video Embeds]
|
||||
Owncast --Video-->H[fa:fa-mobile-screen Mobile Apps]
|
||||
|
||||
`}
|
||||
/>
|
||||
|
||||
## S3 Object Storage
|
||||
|
||||
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
subgraph Chat & Web Assets
|
||||
Owncast{fa:fa-server Owncast}
|
||||
end
|
||||
|
||||
Owncast--Upload\\nVideo-->S3
|
||||
|
||||
subgraph Video Assets
|
||||
S3[fa:fa-hard-drive S3 Object Storage]
|
||||
end
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
Owncast--Web-->WebPlayer
|
||||
Owncast--Web-->Embeds
|
||||
Owncast<--Chat-->WebPlayer
|
||||
S3--Download\\nVideo-->WebPlayer
|
||||
S3--Download\\nVideo-->Embeds
|
||||
S3--Download\\nVideo-->MobileApps
|
||||
S3--Download\\nVideo-->SmartTV
|
||||
S3--Download\\nVideo-->VLC
|
||||
|
||||
`}
|
||||
/>
|
||||
|
||||
## CDN in front of S3 Object Storage
|
||||
|
||||
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
subgraph Video Assets
|
||||
S3[fa:fa-hard-drive S3 Object Storage]
|
||||
CDN[fa:fa-cloud Global CDN]
|
||||
end
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
subgraph Web Assets & Chat Service
|
||||
direction TB
|
||||
Owncast{fa:fa-server Owncast}
|
||||
end
|
||||
|
||||
Owncast--Upload\\nVideo-->S3
|
||||
Owncast--Web-->WebPlayer
|
||||
Owncast<--Chat-->WebPlayer
|
||||
Owncast--Web-->Embeds
|
||||
|
||||
CDN--Download\\nVideo-->WebPlayer
|
||||
CDN--Download\\nVideo-->Embeds
|
||||
CDN--Download\\nVideo-->MobileApps
|
||||
CDN--Download\\nVideo-->SmartTV
|
||||
CDN--Download\\nVideo-->VLC
|
||||
|
||||
S3 --- CDN
|
||||
|
||||
`}
|
||||
/>
|
||||
|
||||
## CDN in front of Owncast
|
||||
|
||||
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
CDN{{fa:fa-cloud Global CDN}}
|
||||
Owncast{fa:fa-server Owncast}
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
CDN--Web-->WebPlayer
|
||||
Owncast<--Chat-->WebPlayer
|
||||
CDN--Web-->Embeds
|
||||
|
||||
CDN--Download\\nVideo-->WebPlayer
|
||||
CDN--Download\\nVideo-->Embeds
|
||||
CDN--Download\\nVideo-->MobileApps
|
||||
CDN--Download\\nVideo-->SmartTV
|
||||
CDN--Download\\nVideo-->VLC
|
||||
|
||||
CDN --- Owncast
|
||||
|
||||
`}
|
||||
/>
|
||||
@ -1,51 +0,0 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/S3 With CDN Example"
|
||||
parameters={{
|
||||
previewTabs: { canvas: { hidden: true } },
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## CDN in front of S3 Object Storage
|
||||
|
||||
If you're using a S3 provider but would like to increase the speed of your video delivery to your clients around the world, you can use a CDN in front of your S3 provider.
|
||||
This leads to not only your server not serving any video traffic, but the video traffic would be distributed globally so each client player would be pulling video from somewhere geographically closer, reducing the likelihood of buffering and slower network requests.
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
subgraph Video Assets
|
||||
S3[fa:fa-hard-drive S3 Object Storage]
|
||||
CDN[fa:fa-cloud Global CDN]
|
||||
end
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
subgraph Web Assets & Chat Service
|
||||
direction TB
|
||||
Owncast{fa:fa-server Owncast}
|
||||
end
|
||||
|
||||
Owncast--Upload\\nVideo-->S3
|
||||
Owncast--Web-->WebPlayer
|
||||
Owncast<--Chat-->WebPlayer
|
||||
Owncast--Web-->Embeds
|
||||
|
||||
CDN--Download\\nVideo-->WebPlayer
|
||||
CDN--Download\\nVideo-->Embeds
|
||||
CDN--Download\\nVideo-->MobileApps
|
||||
CDN--Download\\nVideo-->SmartTV
|
||||
CDN--Download\\nVideo-->VLC
|
||||
|
||||
S3 --- CDN
|
||||
|
||||
`}
|
||||
/>
|
||||
@ -1,42 +0,0 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/CDN Example"
|
||||
parameters={{
|
||||
previewTabs: { canvas: { hidden: true } },
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## CDN in front of Owncast
|
||||
|
||||
If you're ok with some video requests coming directly to your Owncast server, and want to generally increase the overall speed that your viewers globally access all your Owncast assets, including video and the web interface, you can put a CDN in front of your entire Owncast server.
|
||||
|
||||
<Mermaid
|
||||
chart={`flowchart TD
|
||||
CDN{{fa:fa-cloud Global CDN}}
|
||||
Owncast{fa:fa-server Owncast}
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
CDN--Web-->WebPlayer
|
||||
Owncast<--Chat-->WebPlayer
|
||||
CDN--Web-->Embeds
|
||||
|
||||
CDN--Download\\nVideo-->WebPlayer
|
||||
CDN--Download\\nVideo-->Embeds
|
||||
CDN--Download\\nVideo-->MobileApps
|
||||
CDN--Download\\nVideo-->SmartTV
|
||||
CDN--Download\\nVideo-->VLC
|
||||
|
||||
CDN --- Owncast
|
||||
|
||||
`}
|
||||
/>
|
||||
@ -1,47 +0,0 @@
|
||||
import { Mermaid } from 'mdx-mermaid/Mermaid';
|
||||
import { Canvas, Meta, Story } from '@storybook/blocks';
|
||||
|
||||
<Meta
|
||||
title="owncast/Documentation/Infrastructure Examples/S3 Example"
|
||||
parameters={{
|
||||
previewTabs: { canvas: { hidden: true } },
|
||||
chromatic: { disableSnapshot: true },
|
||||
}}
|
||||
/>
|
||||
|
||||
## S3 Object Storage
|
||||
|
||||
If you would like no video traffic to take place from your Owncast server to your clients, you can use S3 Object Storage to be responsible for this instead.
|
||||
Instead of video players pulling the stream from your Owncast server it would instead make these requests to a S3 provider, and Owncast would upload video to this provider to make it available.
|
||||
|
||||
<Mermaid
|
||||
chart={`graph TD
|
||||
subgraph Chat & Web Assets
|
||||
Owncast{fa:fa-server Owncast}
|
||||
end
|
||||
|
||||
Owncast--Upload\\nVideo-->S3
|
||||
|
||||
subgraph Video Assets
|
||||
S3[fa:fa-hard-drive S3 Object Storage]
|
||||
end
|
||||
|
||||
subgraph Clients
|
||||
WebPlayer[fa:fa-window-maximize Web App]
|
||||
Embeds[fa:fa-window-restore Embeds]
|
||||
MobileApps[fa:fa-mobile-screen Mobile Apps]
|
||||
SmartTV[fa:fa-tv Smart TV]
|
||||
VLC[fa:fa-shapes VLC]
|
||||
end
|
||||
|
||||
Owncast--Web-->WebPlayer
|
||||
Owncast--Web-->Embeds
|
||||
Owncast<--Chat-->WebPlayer
|
||||
S3--Download\\nVideo-->WebPlayer
|
||||
S3--Download\\nVideo-->Embeds
|
||||
S3--Download\\nVideo-->MobileApps
|
||||
S3--Download\\nVideo-->SmartTV
|
||||
S3--Download\\nVideo-->VLC
|
||||
|
||||
`}
|
||||
/>
|
||||
Loading…
x
Reference in New Issue
Block a user