# 開始使用 IVS Web 廣播 SDK \$1 即時串流
<a name="broadcast-web-getting-started"></a>

本文件將帶您了解開始使用 IVS 即時串流 Web 廣播 SDK 的相關步驟。

## 匯入
<a name="broadcast-web-getting-started-imports"></a>

多位主持人適用的建構區塊所在的命名空間與根廣播模組不同。

### 使用指令碼標籤
<a name="broadcast-web-getting-started-imports-script"></a>

Web 廣播開發套件以 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 廣播 SDK 舞台程式庫，因為其在載入時會參考程式庫運作所需的瀏覽器基本概念。若要解決此問題，請依[使用 Next 和 React 的 Web 廣播示範](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.');
   }
}
```

如需詳細資訊，請參閱[許可 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 },
});
```