IVS Web Broadcast SDK 시작하기 | 실시간 스트리밍

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

가져오기

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

스크립트 태그 사용

동일한 스크립트 가져오기를 사용하면 아래 예제에 정의된 클래스와 열거형을 글로벌 객체 IVSBroadcastClient에서 찾을 수 있습니다.

const { Stage, SubscribeType } = IVSBroadcastClient;

npm 사용

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

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

서버 측 렌더링 지원

웹 브로드캐스트 SDK 스테이지 라이브러리는 로드될 때 라이브러리 작동에 필요한 브라우저 프리미티브를 참조하므로 서버 측 컨텍스트에서 로드할 수 없습니다. 이를 해결하려면 다음 및 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 },
});