IVS Web 广播 SDK 入门 | 实时直播功能

本文档将引导您完成 IVS 实时直播 Web 广播 SDK 入门所涉及的步骤。

导入

实时构建基块与根广播模块位于不同的命名空间中。

使用脚本标签

使用相同的脚本导入，可以在全局对象 IVSBroadcastClient 上找到以下示例中定义的类和枚举：

const { Stage, SubscribeType } = IVSBroadcastClient;

使用 npm

也可以从程序包模块中导入类、枚举和类型：

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

服务器端渲染支持

Web 广播 SDK 暂存区库无法在服务器端上下文中加载，因为它在加载时会引用库正常运行所需的浏览器基元。要解决此问题，请动态加载库，如 Web Broadcast Demo using Next and React 中所示。

请求权限

您的应用程序必须请求权限才能访问用户的摄像头和麦克风，并且必须使用 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 和 MediaDevices.getUserMedia()。

列出可用的设备

要查看哪些设备可供捕获，请查询浏览器的 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

获取可用设备列表后，您可以从任意数量的设备中检索媒体流。例如，您可以使用 getUserMedia() 方法从摄像头中检索媒体流。

如果您想指定从哪个设备捕获媒体流，可以在媒体限制的 audio 或 video 部分明确设置 deviceId。或者，您可以省略 deviceId，让用户从浏览器提示中选择他们的设备。

您还可以使用 width 和 height 限制来指定理想的摄像头分辨率。（请在此处阅读有关这些限制的更多信息。） SDK 会自动应用与您的最大广播分辨率相对应的宽度和高度限制；但是，最好自己也应用这些限制，以确保将源添加到 SDK 后源宽高比不会改变。

对于实时直播功能，请确保将媒体分辨率限制为 720p。具体而言，getUserMedia 和 getDisplayMedia 的宽度和高度限制值相乘不得超过 921600（1280*720）。

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 },
});