이 문서에서는 Amazon IVS Low-Latency Streaming Web Broadcast SDK 시작하기와 관련된 단계를 안내합니다.
라이브러리 설치
IVSBroadcastClient는 글로벌 Reflect 객체를 확장하는 reflect-metadata
스크립트 태그 사용
Web Broadcast SDK는 JavaScript 라이브러리로 배포되며 https://web-broadcast.live-video.net/1.22.0/amazon-ivs-web-broadcast.js
<script> 태그를 통해 로드되면 라이브러리는 IVSBroadcastClient라는 창 범위에 글로벌 변수를 노출합니다.
npm 사용
npm 패키지를 설치하는 방법
npm install amazon-ivs-web-broadcast
이제 IVSBroadcastClient 객체에 액세스하여Errors, BASIC_LANDSCAPE과 같은 다른 모듈과 상수를 가져올 수 있습니다.
import IVSBroadcastClient, {
Errors,
BASIC_LANDSCAPE
} from 'amazon-ivs-web-broadcast';샘플
빠르게 시작하려면 아래 예제를 참조하세요.
AmazonIVSBroadcastClient의 인스턴스 생성
라이브러리를 사용하려면 클라이언트의 인스턴스를 생성해야 합니다. 이렇게 하려면 streamConfig 파라미터(해상도 및 프레임 속도와 같은 방송 제약 조건 지정)와 IVSBroadcastClient에 대해 create 메서드를 호출하면 됩니다. 클라이언트를 생성할 때 수집 엔드포인트를 지정하거나 스트림을 시작할 때 이를 설정할 수 있습니다.
수집 작업은 AWS Console에서 찾거나 CreateChannel 엔드포인트(예: UNIQUE_ID.global-contribute.live-video.net)에서 반환될 수 있습니다.
const client = IVSBroadcastClient.create({
// Enter the desired stream configuration
streamConfig: IVSBroadcastClient.BASIC_LANDSCAPE,
// Enter the ingest endpoint from the AWS console or CreateChannel API
ingestEndpoint: 'UNIQUE_ID.global-contribute.live-video.net',
});다음은 일반적으로 지원되는 스트림 구성입니다. 사전 설정은 BASIC 최대 480p 및 비트 전송률 1.5Mbps, BASIC Full HD는 최대 1080p 및 비트 전송률 3.5Mbps, STANDARD(또는 ADVANCED)는 최대 1080p 및 비트 전송률 8.5Mbps입니다. 원하는 경우 비트 전송률, 프레임 속도 및 해상도를 사용자 지정할 수 있습니다. 자세한 내용은 BroadcastClientConfig
IVSBroadcastClient.BASIC_LANDSCAPE; IVSBroadcastClient.BASIC_FULL_HD_LANDSCAPE; IVSBroadcastClient.STANDARD_LANDSCAPE; IVSBroadcastClient.BASIC_PORTRAIT; IVSBroadcastClient.BASIC_FULL_HD_PORTRAIT; IVSBroadcastClient.STANDARD_PORTRAIT;
npm 패키지를 사용하는 경우 개별적으로 가져올 수 있습니다.
참고: 클라이언트측 구성이 백엔드 채널 유형과 일치해야 합니다. 예를 들어 채널 유형이 STANDARD인 경우 IVSBroadcastClient.STANDARD_* 값 중 하나로 streamConfig를 설정해야 합니다. 채널 유형이 ADVANCED인 경우 아래 그림(예로 ADVANCED_HD 사용)과 같이 수동으로 구성해야 합니다.
const client = IVSBroadcastClient.create({
// Enter the custom stream configuration
streamConfig: {
maxResolution: {
width: 1080,
height: 1920,
},
maxFramerate: 30,
/**
* maxBitrate is measured in kbps
*/
maxBitrate: 3500,
},
// Other configuration . . .
});권한 요청
앱에서 사용자의 카메라 및 마이크에 액세스할 수 있는 권한을 요청해야 하며 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
스트림 미리 보기 설정
방송할 내용을 미리 보려면 SDK에 <canvas> 요소를 제공하세요.
// where #preview is an existing <canvas> DOM element on your page
const previewEl = document.getElementById('preview');
client.attachPreview(previewEl);사용 가능한 장치 목록
캡처할 수 있는 장치를 확인하려면 브라우저의 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 제약 조건을 사용하여 이상적인 카메라 해상도를 지정할 수도 있습니다. (이러한 제약 조건에 대한 자세한 내용은 여기
const streamConfig = IVSBroadcastClient.BASIC_LANDSCAPE;
...
window.cameraStream = await navigator.mediaDevices.getUserMedia({
video: {
deviceId: window.videoDevices[0].deviceId,
width: {
ideal: streamConfig.maxResolution.width,
},
height: {
ideal: streamConfig.maxResolution.height,
},
},
});
window.microphoneStream = await navigator.mediaDevices.getUserMedia({
audio: { deviceId: window.audioDevices[0].deviceId },
});스트림에 장치 추가
스트림을 가져온 후 고유한 이름(아래에서는 camera1)과 구성 위치(비디오의 경우)를 지정하여 장치를 레이아웃에 추가할 수 있습니다. 예를 들어 웹캠 장치를 지정하여 웹캠 비디오 소스를 방송 스트림에 추가합니다.
비디오 입력 장치를 지정할 때는 방송하려는 ‘레이어’를 나타내는 인덱스를 지정해야 합니다. 이는 이미지 편집이나 CSS와 동의어로서, z-index는 렌더링할 레이어의 순서를 나타냅니다. 선택적으로 스트림 소스의 x/y 좌표(및 크기)를 정의하는 위치를 제공할 수 있습니다.
파라미터에 대한 자세한 내용은 VideoComposition
client.addVideoInputDevice(window.cameraStream, 'camera1', { index: 0 }); // only 'index' is required for the position parameter
client.addAudioInputDevice(window.microphoneStream, 'mic1');브로드캐스트 시작
방송을 시작하려면 Amazon IVS 채널의 스트림 키를 제공하세요.
client
.startBroadcast(streamKey)
.then((result) => {
console.log('I am successfully broadcasting!');
})
.catch((error) => {
console.error('Something drastically failed while broadcasting!', error);
});브로드캐스트 중지
client.stopBroadcast();
비디오 위치 전환
클라이언트는 비디오 장치의 구성 위치 전환을 지원합니다.
client.exchangeVideoDevicePositions('camera1', 'camera2');오디오 음소거
오디오를 음소거하려면 removeAudioInputDevice를 사용하여 오디오 장치를 제거하거나 오디오 트랙에서 enabled 속성을 설정합니다.
let audioStream = client.getAudioInputDevice(AUDIO_DEVICE_NAME);
audioStream.getAudioTracks()[0].enabled = false;여기서 AUDIO_DEVICE_NAME은 addAudioInputDevice() 호출 중에 원래 오디오 장치에 지정된 이름입니다.
음소거 해제 방법
let audioStream = client.getAudioInputDevice(AUDIO_DEVICE_NAME);
audioStream.getAudioTracks()[0].enabled = true;비디오 숨기기
비디오를 숨기려면 removeVideoInputDevice를 사용하여 비디오 장치를 제거하거나 비디오 트랙에서 enabled 속성을 설정합니다.
let videoStream = client.getVideoInputDevice(VIDEO_DEVICE_NAME).source;
videoStream.getVideoTracks()[0].enabled = false;여기서 VIDEO_DEVICE_NAME은 원래 addVideoInputDevice() 호출 중에 비디오 디바이스에 지정된 이름입니다.
숨김 해제 방법
let videoStream = client.getVideoInputDevice(VIDEO_DEVICE_NAME).source;
videoStream.getVideoTracks()[0].enabled = true;