開始使用 IVS Web 廣播 SDK | 即時串流

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

匯入

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

使用指令碼標籤

使用相同指令碼會匯入後，下方範例定義的類別和列舉便可以在全域物件 IVSBroadcastClient 上找到：

const { Stage, SubscribeType } = IVSBroadcastClient;

使用 NPM

類別、列舉和類型也可以從套件模組導入：

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

伺服器端轉譯支援

無法在伺服器端環境中載入 Web 廣播 SDK 舞台程式庫，因為其在載入時會參考程式庫運作所需的瀏覽器基本概念。若要解決此問題，請依使用 Next 和 React 的 Web 廣播示範所示，動態載入此程式庫。

請求權限

您的應用程式必須請求許可，才能存取使用者的攝影機和麥克風，而您必須使用 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 (許可 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 },
});