IVS Web Player SDK 시작하기 - Amazon IVS
데모스크립트 태그를 사용하여 설정샘플 코드NPM을 사용하여 설정TypeScript서비스 작업자 설정오디오 전용 재생

IVS Web Player SDK 시작하기

이 문서에서는 Amazon IVS Web Player SDK 시작하기와 관련된 단계를 안내합니다.

script 태그와 npm 모듈을 통해 지원을 제공합니다.

데모

Amazon IVS 플레이어 샘플 라이브 데모에서는 콘텐츠 전송 네트워크를 통해 script 태그로 웹 플레이어를 사용하는 방법을 보여 줍니다. 데모에는 이벤트 리스너 설정이 포함되어 있습니다.

또한 추가 웹 플레이어 데모는 https://github.com/aws-samples/amazon-ivs-player-web-sample을 참조하세요.

스크립트 태그를 사용하여 설정

script 태그를 사용하여 Amazon IVS 플레이어를 설정하려면 다음을 수행합니다.

  1. 다음 태그를 포함합니다(최신 버전 플레이어의 경우).

    <script src="https://player.live-video.net/1.37.0/amazon-ivs-player.min.js"></script>

  2. amazon-ivs-player.min.js가 로드되면 IVSPlayer 변수를 글로벌 컨텍스트에 추가합니다. 이는 플레이어 인스턴스를 생성하는 데 사용할 라이브러리입니다. 먼저, 브라우저가 IVS 플레이어를 지원하는지 확인하기 위해 isPlayerSupported를 확인합니다.

    if (IVSPlayer.isPlayerSupported) { ... }

    그런 다음, 플레이어 인스턴스를 생성하기 위해 IVSPlayer 객체에서 create 함수를 호출합니다.

    const player = IVSPlayer.create();

    Amazon IVS Web Player SDK는 웹 작업자를 사용하여 비디오 재생을 최적화합니다.

  3. 플레이어 인스턴스에서 load 및 play 함수를 사용하여 스트림을 로드하고 재생합니다.

    player.load("PLAYBACK_URL");
player.play();

    여기서, PLAYBACK_URL은 스트림 키가 요청될 때 Amazon IVS API에서 반환되는 URL입니다.

샘플 코드

이 예제에서 PLAYBACK_URL을 로드하려는 소스 스트림의 URL로 대체합니다. 이 예제에서는 Amazon IVS 플레이어의 최신 버전을 사용합니다.

<script src="https://player.live-video.net/1.37.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

<video> 태그에서 playsinline은 iOS Safari에서 인라인 재생에 필요합니다. https://webkit.org/blog/6784/new-video-policies-for-ios/를 참조하세요.

NPM을 사용하여 설정

Webpack 구성 파일 예제를 비롯한 관련 지침은 https://github.com/aws-samples/amazon-ivs-player-web-sample 리포지토리를 참조하세요.

참고: 자체 도메인에서 플레이어 정적 자산을 호스팅할 경우 WebAssembly 이진(amazon-ivs-wasmworker.min.wasm)의 ‘콘텐츠 유형’ 응답 헤더를 ‘application/wasm’으로 설정해야 합니다. 또한 자산을 압축하여 유선을 통해 다운로드되는 바이트 수를 줄이고 플레이어의 재생 시작 시간을 단축해야 합니다.

TypeScript

TypeScript를 사용하는 경우, npm 패키지에는 가져와서 사용할 수 있는 유형이 포함됩니다. 이러한 유형에 대한 자세한 내용을 알아보려면, Amazon IVS Player SDK: Web Reference를 확인하세요.

서비스 작업자 설정

네이티브 재생만 지원하는 브라우저(주로 iOS Safari)를 통해 플레이할 때 지연 시간을 더 낮추기 위해 서비스 작업자를 설정하고 구성할 수 있습니다. 자세한 내용은 타사 플레이어의 지연 시간 단축 항목을 참조하세요.

Amazon IVS 플레이어가 서비스 작업자를 사용하도록 설정하려면 다음을 수행합니다.

  1. 파일을 생성하여 IVS 서비스 작업자를 CDN에서 로드하세요. 이는 서비스 작업자를 가져오는 페이지와 동일한 도메인에서 서비스 작업자를 호스팅해야 하기 때문에 필요합니다.

    이름이 amazon-ivs-service-worker-loader.js이거나 비슷한 파일을 생성하고 다음 줄을 추가합니다.

    importScripts('https://player.live-video.net/1.37.0/amazon-ivs-service-worker.min.js');

  2. 플레이어 인스턴스를 생성할 때 amazon-ivs-service-worker-loader.js 파일을 참조하는 다음 serviceWorker 구성을 전달하세요.

    const player = IVSPlayerPackage.create({
   serviceWorker: {
      url: 'amazon-ivs-service-worker-loader.js'
   }
});

  3. 비디오 요소에서 crossOrigin 속성을 anonymous로 설정합니다. 이는 서비스 작업자가 매니페스트를 변경할 수 있도록 하는 데 필요합니다.

참고: 서비스 작업자를 로컬에서 테스트하려면 localhost 또는 https에서 해당 페이지를 제공해야 합니다.

라이브 데모를 보려면 다음 저장소의 서비스 작업자 예제를 참조하세요.

https://github.com/aws-samples/amazon-ivs-player-web-sample

오디오 전용 재생

오디오 전용 품질은 setQuality() 메서드를 사용하여 수동으로 선택해야 합니다. 플레이어는 두 번째 인수 adaptive에 대한 true 값을 지원하지 않으므로 기본적으로 이 인수는 false입니다.

재생이 시작되기 전에 품질을 오디오 전용으로 설정하려면 READY 이벤트 내에서 setQuality()를 직접적으로 호출합니다.

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

READY 내 품질 설정은 자동 재생 모드와 비자동 재생 모드 모두에서 작동합니다.