Skip to content

Commit

Permalink
[docs] Rework getting started section + Add TypeScript (#783)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wkozyra95
wkozyra95 authored Sep 24, 2024
1 parent 6570ad1 commit 96766c6
Show file tree
Hide file tree
Showing 17 changed files with 634 additions and 203 deletions.
56 changes: 56 additions & 0 deletions docs/pages/guides/basic-layouts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,17 @@ After configuration you should see the following output:
Update output to render a [`View`](../api/components/View.md) component with an [`InputStream`](../api/components/InputStream.md) as its child.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return (
<View backgroundColor="#4d4d4d">
<InputStream inputId="input_1" />
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down Expand Up @@ -76,6 +87,19 @@ The input stream in the example has a resolution `1920x1080` and it is rendered
Wrap an [`InputStream`](../api/components/InputStream.md) component with a [`Rescaler`](../api/components/Rescaler.md).

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return (
<View backgroundColor="#4d4d4d">
<Rescaler>
<InputStream inputId="input_1" />
</Rescaler>
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down Expand Up @@ -137,6 +161,22 @@ The same effect (for single input) could be achieved by either:
Add another [`InputStream`](../api/components/InputStream.md) wrapped with [`Rescaler`](../api/components/Rescaler.md).

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return (
<View backgroundColor="#4d4d4d">
<Rescaler>
<InputStream inputId="input_1" />
</Rescaler>
<Rescaler>
<InputStream inputId="input_2" />
</Rescaler>
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down Expand Up @@ -205,6 +245,22 @@ In an example below we can see that:
Specify `width` and `height` of one of the `Rescaler` components and position it using `top`/`right` options in the corner.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return (
<View backgroundColor="#4d4d4d">
<Rescaler>
<InputStream inputId="input_1" />
</Rescaler>
<Rescaler width={320} height={180} top={20} right={20}>
<InputStream inputId="input_2" />
</Rescaler>
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down
89 changes: 87 additions & 2 deletions docs/pages/guides/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ This guide will explain basic LiveCompositor setup.
### Start the compositor

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
import LiveCompositor from "@live-compositor/node"

async function start() {
const compositor = new LiveCompositor();
await compositor.init();
}
```
</TabItem>
<TabItem value="http" label="HTTP">
Start the compositor server. Check out [configuration page](../deployment/configuration.md) for available configuration options.
</TabItem>
Expand Down Expand Up @@ -43,6 +53,21 @@ This guide will explain basic LiveCompositor setup.
### Register input stream `input_1`.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
await compositor.registerInput("input_1", {
type: "rtp_stream",
transportProtocol: "tcp_server",
port: 9001,
video: {
decoder: "ffmpeg_h264"
}
})
```
After `registerInput` call is done you can establish the connection and start sending the stream. Check out [how to deliver input streams](./deliver-input.md) to learn more.

In this example we are using RTP over TCP, but it could be easily replaced by UDP.
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/input/input_1/register
Expand Down Expand Up @@ -88,6 +113,21 @@ This guide will explain basic LiveCompositor setup.
### Register input stream `input_2`.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
await compositor.registerInput("input_2", {
type: "rtp_stream",
transportProtocol: "tcp_server",
port: 9002,
video: {
decoder: "ffmpeg_h264"
}
})
```
After `registerInput` call is done you can establish the connection and start sending the stream. Check out [how to deliver input streams](./deliver-input.md) to learn more.

In this example we are using RTP over TCP, but it could be easily replaced by UDP.
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/input/input_2/register
Expand Down Expand Up @@ -137,6 +177,41 @@ Configure it to:
- produce silent audio

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return <View backgroundColor="#4d4d4d"/>
}

async function start() {
// init code from previous steps

await compositor.registerOutput("output_1", {
type: "rtp_stream",
transportProtocol: "tcp_server",
port: 9003,
video: {
resolution: { width: 1280, height: 720 },
encoder": {
type: "ffmpeg_h264",
preset: "ultrafast"
},
root: <App />
},
audio: {
encoder: {
type: "opus",
channels: "stereo"
},
}
})
}
```
After `registerOutput` is done you can establish the connection and start listening for the stream. Check out [how to receive output streams](./receive-output.md) to learn more.

In this example we are using RTP over TCP, if you prefer to use UDP you need start listening on the specified
port before registering output to make sure you are not losing first frames.
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/register
Expand Down Expand Up @@ -170,8 +245,6 @@ Configure it to:
}
}
```
You can configure the output framerate and the sample rate using [`LIVE_COMPOSITOR_OUTPUT_FRAMERATE`](../deployment/configuration.md#live_compositor_output_framerate) and [`LIVE_COMPOSITOR_OUTPUT_SAMPLE_RATE`](../deployment/configuration.md#live_compositor_output_sample_rate) environment variables.

After receiving the response you can establish the connection and start listening for the stream. Check out [how to receive output streams](./receive-output.md) to learn more.

In this example we are using RTP over TCP, if you prefer to use UDP you need start listening on the specified port before sending register request to make sure you are not losing
Expand Down Expand Up @@ -235,6 +308,18 @@ Configure it to:
- Mix audio from input streams `input_1` and `input_2`, where `input_1` volume is slightly lowered.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
return (
<Tiles backgroundColor="#4d4d4d">
<InputStream inputId="input_1" volume={0.9} />
<InputStream inputId="input_2" />
</Tiles>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down
116 changes: 116 additions & 0 deletions docs/pages/guides/view-transition.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,26 @@ guide in the ["Configure inputs and output"](./quick-start.md#configure-inputs-a
### Transition that changes the `width` of an input stream

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
const [beforeTransition, setBeforeTransition] = useState(true);
useEffect(() => {
setTimeout(() => setBeforeTransition(false), 2000);
}, []);

return (
<View backgroundColor="#4d4d4d">
<Rescaler
width={beforeTransition ? 480 : 1280}
transition={{ durationMs: 2000 }}>
<InputStream inputId="input_1" />
</Rescaler>
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
Set initial scene for the transition:
```http
Expand Down Expand Up @@ -139,6 +159,29 @@ components that are not a part of the transition, but their size and position st
Add a second input stream wrapped with `Rescaler`, but without any transition options.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
const [beforeTransition, setBeforeTransition] = useState(true);
useEffect(() => {
setTimeout(() => setBeforeTransition(false), 2000);
}, []);

return (
<View backgroundColor="#4d4d4d">
<Rescaler
width={beforeTransition ? 480 : 1280}
transition={{ durationMs: 2000 }}>
<InputStream inputId="input_1" />
</Rescaler>
<Rescaler>
<InputStream inputId="input_2" />
</Rescaler>
</View>
)
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down Expand Up @@ -273,6 +316,30 @@ on the parent layout.
Let's try the same example as in the first scenario with a single input, but instead, change the `Rescaler` component to be absolutely positioned in the second update.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
const [beforeTransition, setBeforeTransition] = useState(true);
useEffect(() => {
setTimeout(() => setBeforeTransition(false), 2000);
}, []);

return (
<View backgroundColor="#4d4d4d">
{beforeTransition ? (
<Rescaler width={480}>
<InputStream inputId="input_1" />
</Rescaler>
) : (
<Rescaler width={1280} top={0} left={0} transition={{ durationMs: 2000 }} >
<InputStream inputId="input_1" />
</Rescaler>
)}
</View>
);
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down Expand Up @@ -390,6 +457,55 @@ All of the above examples use default linear interpolation, but there are also a
modes available.

<Tabs queryString="lang">
<TabItem value="react" label="React">
```tsx
function App() {
const [beforeTransition, setBeforeTransition] = useState(true);
useEffect(() => {
setTimeout(() => setBeforeTransition(false), 2000);
}, []);

const top = beforeTransition ? 0 : 540;

return (
<View backgroundColor="#4d4d4d">
<Rescaler
width={320} height={180} top={top} left={0}
transition={{ durationMs: 2000 }}>
<InputStream inputId="input_1" />
</Rescaler>
<Rescaler
width={320} height={180} top={top} left={320}
transition={{ durationMs: 2000, easingFunction: 'bounce' }}>
<InputStream inputId="input_2" />
</Rescaler>
<Rescaler
width={320} height={180} top={top} left={640}
transition={{
durationMs: 2000,
easingFunction: {
functionName: 'cubic_bezier',
points: [0.65, 0, 0.35, 1],
},
}}>
<InputStream inputId="input_3" />
</Rescaler>
<Rescaler
width={320} height={180} top={top} left={960}
transition={{
durationMs: 2000,
easingFunction: {
functionName: 'cubic_bezier',
points: [0.33, 1, 0.68, 1],
},
}}>
<InputStream inputId="input_4" />
</Rescaler>
</View>
);
}
```
</TabItem>
<TabItem value="http" label="HTTP">
```http
POST: /api/output/output_1/update
Expand Down
Loading

0 comments on commit 96766c6

Please sign in to comment.