# IVS Web Broadcast SDK 시작하기 \$1 실시간 스트리밍
<a name="broadcast-web-getting-started"></a>

이 문서에서는 IVS Real-Time Streaming Web Broadcast SDK를 시작하는 데 관련된 단계를 안내합니다.

## 가져오기
<a name="broadcast-web-getting-started-imports"></a>

실시간의 구성 요소는 루트 브로드캐스팅 모듈이 아닌 다른 네임스페이스에 있습니다.

### 스크립트 태그 사용
<a name="broadcast-web-getting-started-imports-script"></a>

Web Broadcast SDK는 JavaScript 라이브러리로 배포되며 [https://web-broadcast.live-video.net/1.33.0/amazon-ivs-web-broadcast.js](https://web-broadcast.live-video.net/1.33.0/amazon-ivs-web-broadcast.js)에서 찾을 수 있습니다.

아래 예제에 정의된 클래스와 열거형을 글로벌 객체 `IVSBroadcastClient`에서 찾을 수 있습니다.

```
const { Stage, SubscribeType } = IVSBroadcastClient;
```

### npm 사용
<a name="broadcast-web-getting-started-imports-npm"></a>

`npm` 패키지를 설치하는 방법 

```
npm install amazon-ivs-web-broadcast
```

패키지 모듈에서 클래스, 열거형 및 유형을 가져올 수도 있습니다.

```
import { Stage, SubscribeType, LocalStageStream } from 'amazon-ivs-web-broadcast'
```

### 서버 측 렌더링 지원
<a name="broadcast-web-getting-started-imports-server-side-rendering"></a>

Web Broadcast SDK 스테이지 라이브러리는 로드될 때 라이브러리 작동에 필요한 브라우저 프리미티브를 참조하므로 서버 측 컨텍스트에서 로드할 수 없습니다. 이를 해결하려면 [다음 및 React를 사용한 웹 브로드캐스트 데모](https://github.com/aws-samples/amazon-ivs-broadcast-web-demo/blob/main/hooks/useBroadcastSDK.js#L26-L31)에 설명된 대로 라이브러리를 동적으로 로드하세요.

## 권한 요청
<a name="broadcast-web-request-permissions"></a>

앱에서 사용자의 카메라 및 마이크에 액세스할 수 있는 권한을 요청해야 하며 HTTPS를 사용하여 제공해야 합니다. (이는 Amazon IVS에만 국한되지 않으며 카메라와 마이크에 액세스해야 하는 모든 웹 사이트에 필요합니다.)

다음은 오디오 및 비디오 장치 모두에 대한 권한을 요청하고 캡처하는 방법을 보여 주는 예제 함수입니다.

```
async function handlePermissions() {
   let permissions = {
       audio: false,
       video: false,
   };
   try {
       const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
       for (const track of stream.getTracks()) {
           track.stop();
       }
       permissions = { video: true, audio: true };
   } catch (err) {
       permissions = { video: false, audio: false };
       console.error(err.message);
   }
   // If we still don't have permissions after requesting them display the error message
   if (!permissions.video) {
       console.error('Failed to get video permissions.');
   } else if (!permissions.audio) {
       console.error('Failed to get audio permissions.');
   }
}
```

자세한 내용은 [Permissions API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API) 및 [MediaDevices.getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)를 참조하세요.

## 사용 가능한 장치 목록
<a name="broadcast-web-request-list-devices"></a>

캡처할 수 있는 장치를 확인하려면 브라우저의 [MediaDevices.enumerateDevices()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) 메서드를 쿼리하세요.

```
const devices = await navigator.mediaDevices.enumerateDevices();
window.videoDevices = devices.filter((d) => d.kind === 'videoinput');
window.audioDevices = devices.filter((d) => d.kind === 'audioinput');
```

## 장치에서 MediaStream 검색
<a name="broadcast-web-retrieve-mediastream"></a>

사용 가능한 장치 목록을 가져온 후 원하는 수의 장치에서 스트림을 검색할 수 있습니다. 예를 들어 `getUserMedia()` 메서드를 사용하여 카메라에서 스트림을 검색할 수 있습니다.

스트림을 캡처할 장치를 지정하려면 미디어 제약 조건의 `audio` 또는 `video` 섹션에서 `deviceId`를 명시적으로 설정할 수 있습니다. 또는 `deviceId`를 생략하고 사용자가 브라우저 프롬프트에서 장치를 선택하도록 할 수 있습니다.

`width` 및 `height` 제약 조건을 사용하여 이상적인 카메라 해상도를 지정할 수도 있습니다. (이러한 제약 조건에 대한 자세한 내용은 [여기](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#properties_of_video_tracks)를 참조하세요). SDK는 최대 방송 해상도에 해당하는 너비 및 높이 제한을 자동으로 적용합니다. 하지만 SDK에 소스를 추가한 후에 소스 종횡비가 변경되지 않도록 이를 직접 적용하는 것도 좋습니다.

실시간 스트리밍의 경우 미디어가 720p 해상도로 제한되어 있는지 확인하세요. 특히 너비 및 높이에 대한 `getUserMedia` 및 `getDisplayMedia` 제약 조건 값은 함께 곱했을 때 921600(1280\$1720)을 초과해서는 안 됩니다.

```
const videoConfiguration = {
  maxWidth: 1280,
  maxHeight: 720,
  maxFramerate: 30,
}

window.cameraStream = await navigator.mediaDevices.getUserMedia({
   video: {
       deviceId: window.videoDevices[0].deviceId,
       width: {
           ideal: videoConfiguration.maxWidth,
       },
       height: {
           ideal:videoConfiguration.maxHeight,
       },
   },
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
   audio: { deviceId: window.audioDevices[0].deviceId },
});
```