# Publish via WebRTC/WHIP

**WebRTC 전송을 지원하는 Live Encoder** 또는 **Web Browser**에서, 별도의 플러그인 없이 Media Source를 `WebRTC`/`WHIP` Protocol을 이용하여 OvenMediaEngine Enterprise on AWS에 Publish할 수 있습니다.

또한, WebRTC Simulcast를 활용하면 하나의 송출 세션에서 여러 화질 트랙을 함께 전송할 수 있어, 시청자 네트워크 상태에 맞춰 더 안정적으로 초저지연 Live Streaming을 제공하고 트랜스코딩 부담을 줄이는 구성도 가능합니다. 

본 Guide에서는 WebRTC/WHIP로 Stream을 Publish하는 절차와, 송출 이후 기본 재생 및 상태 확인 방법을 순서대로 안내합니다.

<table><thead><tr><th width="151">Item</th><th>Supported</th></tr></thead><tbody><tr><td>Container</td><td>RTP / RTCP</td></tr><tr><td>Security</td><td>DTLS, SRTP</td></tr><tr><td>Transport</td><td>ICE</td></tr><tr><td>Error Correction</td><td>ULPFEC (<code>VP8</code>, <code>H.264</code>), In-band FEC (<code>Opus</code>)</td></tr><tr><td>Codec</td><td>VP8, H.264, H.265, Opus</td></tr><tr><td>Signaling</td><td>Self-Defined Signaling Protocol, Embedded WebSocket-based Server / WHIP</td></tr></tbody></table>

## WebRTC/WHIP Publish 시작하기 <a href="#start-publishing-a-webrtc-whip-stream" id="start-publishing-a-webrtc-whip-stream"></a>

본 예제에서는 가장 보편적으로 사용되는 Live Encoder Software인 OBS Studio (Option A)와 AirenSoft에서 제공하는 OvenPlayer Demo (Option B)를 사용했습니다.

{% stepper %}
{% step %}

### \[Option A] Live Encoder로 송출 (OBS Studio) <a href="#publish-from-a-live-encoder" id="publish-from-a-live-encoder"></a>

<figure><img src="https://2184736704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ6NWzeQyKbSWkDFSGwGx%2Fuploads%2FAEmmBcvIK83BsKsZSszG%2Fimage.png?alt=media&#x26;token=4ddc8444-ef26-474d-9761-31abd8ee19a8" alt=""><figcaption></figcaption></figure>

1. Open Broadcaster Software (OBS) Studio를 실행합니다.
   * OBS Studio가 설치되어 있지 않다면, 공식 링크 (<https://obsproject.com/download>)에서 다운로드하여설치하십시오.
2. 송출할 Media Source (또는 Camera, Screen Capture 등)를 추가합니다.
3. 이후 OBS 우측 하단의 <mark style="color:yellow;">\[Settings]</mark>를 클릭합니다.

<figure><img src="https://2184736704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ6NWzeQyKbSWkDFSGwGx%2Fuploads%2F9vDogZkSDBOOA70HyBgG%2Fimage.png?alt=media&#x26;token=dd188b9c-05be-4359-92a8-75a803e0bda8" alt=""><figcaption></figcaption></figure>

4. Settings 화면 좌측에서, <mark style="color:yellow;">\[Stream]</mark> 탭을 선택합니다.
5. 그리고 <mark style="color:yellow;">\[Service]</mark>에서 <mark style="color:$primary;">**\[WHIP]**</mark>을 선택한 뒤, <mark style="color:yellow;">Server</mark> 입력란에 아래 WebRTC/WHIP Ingress URL 패턴 중 하나를 입력하십시오.
   1. Non-TLS:
      * WebRTC Input URL 형식: <mark style="color:$primary;">**`ws://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`80`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=send`**</mark>
      * WHIP URL 형식: <mark style="color:$primary;">**`http://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`80`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=whip`**</mark>
   2. TLS:
      * WebRTC (TLS) Input URL 형식: <mark style="color:$primary;">**`wss://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`443`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=send`**</mark>
      * WHIP (TLS) URL 형식: <mark style="color:$primary;">**`https://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`443`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=whip`**</mark>

{% hint style="info" %}
WebRTC Input 또는 WHIP URL의 패턴을 모르는 경우, Web Conosle에서 \[Managed Stream]을 만든 후 <mark style="color:yellow;">\[URLs]</mark> 탭에서 확인할 수 있습니다.
{% endhint %}

<figure><img src="https://2184736704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ6NWzeQyKbSWkDFSGwGx%2Fuploads%2FQgNg2uy8I4z7C72k7eTK%2Fimage.png?alt=media&#x26;token=4f49e019-9400-4159-8619-9d7383929870" alt=""><figcaption></figcaption></figure>

6. 이후 <mark style="color:yellow;">\[Output]</mark> 탭에서 원활한 초저지연 및 저지연 스트리밍을 위해 <mark style="color:$primary;">**`Keyframe Interval`**</mark>을 <mark style="color:$primary;">**1초**</mark>로, <mark style="color:$primary;">**`B-frames`**</mark>를 <mark style="color:$primary;">**0**</mark>으로 설정할 것을 권장합니다.

{% hint style="success" %} <mark style="color:yellow;">B-frames</mark>를 <mark style="color:yellow;">0</mark>으로 설정 (`bframes=0`)하는 이유는 `WebRTC` 최종 출력 시 끊김 현상을 방지하기 위함입니다.\
위 예시는 Encoder로 `x264`를 선택했을 때의 설정 화면이며, 다른 Encoder를 선택할 경우 표시되는 항목이나 세부 구성은 달라질 수 있습니다. <mark style="color:yellow;">`WebRTC`</mark><mark style="color:yellow;">를 최종 출력</mark>으로 사용하는 경우, <mark style="color:yellow;">B-frames는 0으로 설정하는 것을 권장</mark>합니다.
{% endhint %}

7. 필요에 따라 \[Audio], \[Video] 등 각 탭에서 세부 설정을 조정한 뒤, <mark style="color:yellow;">\[OK]</mark>를 클릭하여 OBS 메인 화면으로 돌아갑니다.
8. 모든 설정이 완료되었다면, <mark style="color:yellow;">\[Start Streaming]</mark>을 클릭하여 송출을 시작합니다.
   {% endstep %}

{% step %}

### \[Option B] OvenPlayer Demo로 송출 <a href="#publish-using-the-ovenplayer-demo" id="publish-using-the-ovenplayer-demo"></a>

<figure><img src="https://2184736704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ6NWzeQyKbSWkDFSGwGx%2Fuploads%2F5DdknPXemvJrLL8JCTNF%2Fimage.png?alt=media&#x26;token=d49a48a7-474c-4d45-957d-ad0e97b38fed" alt=""><figcaption></figcaption></figure>

1. <mark style="color:yellow;">Non-TLS</mark>의 경우 [<mark style="color:yellow;">http://</mark>demo.ovenplayer.com/demo\_input.html](http://demo.ovenplayer.com/demo_input.html)로, <mark style="color:yellow;">TLS</mark>의 경우 [<mark style="color:yellow;">https://</mark>demo.ovenplayer.com/demo\_input.html](https://demo.ovenplayer.com/demo_input.html)로 접속하십시오.
2. <mark style="color:yellow;">\[WebRTC Ingress URL]</mark> 필드에 Non-TLS, TLS 구분하여, 아래 WebRTC/WHIP Ingress URL 패턴 중 하나를 입력하십시오.
   1. Non-TLS:
      * WebRTC Input URL 형식: <mark style="color:$primary;">**`ws://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`80`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=send`**</mark>
      * WHIP URL 형식: <mark style="color:$primary;">**`http://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`80`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=whip`**</mark>
   2. TLS:
      * WebRTC (TLS) Input URL 형식: <mark style="color:$primary;">**`wss://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`443`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=send`**</mark>
      * WHIP (TLS) URL 형식: <mark style="color:$primary;">**`https://`**</mark>`{Public IPv4 or Domain}:`<mark style="color:$primary;">**`443`**</mark>`/{app}/{stream}`<mark style="color:$primary;">**`?direction=whip`**</mark>
3. 우측 <mark style="color:yellow;">\[START]</mark> 버튼을 클릭하여, Publishing이 정상적인지 체크합니다.

{% hint style="info" %}
WebRTC Input 또는 WHIP URL의 패턴을 모르는 경우, Web Conosle에서 \[Managed Stream]을 만든 후 <mark style="color:yellow;">\[URLs]</mark> 탭에서 확인할 수 있습니다.
{% endhint %}
{% endstep %}

{% step %}

### Web Console에서 스트림 상태 및 재생 확인 <a href="#check-stream-status-and-playback-in-the-web-console" id="check-stream-status-and-playback-in-the-web-console"></a>

<figure><img src="https://2184736704-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZ6NWzeQyKbSWkDFSGwGx%2Fuploads%2FSCVVyTCP3mw4hoQpWkxL%2Fimage.png?alt=media&#x26;token=043adb2a-df0a-4f51-9b45-a9d8a0805039" alt=""><figcaption></figcaption></figure>

* <mark style="color:yellow;">Web Console</mark>에 OBS 또는 OvenPlayer Demo에서 송출한 Stream이 목록에 표시되는지 확인합니다.
  {% endstep %}
  {% endstepper %}