# 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 广播 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 广播 SDK 暂存区库无法在服务器端上下文中加载，因为它在加载时会引用库正常运行所需的浏览器基元。要解决此问题，请动态加载库，如 [Web Broadcast Demo using Next and 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 },
});
```