이 페이지는 Cloud Translation API를 통해 번역되었습니다.

IMA DAI SDK 시작하기

IMA SDK를 사용하면 웹사이트와 앱에 멀티미디어 광고를 쉽게 통합할 수 있습니다. IMA SDK는 모든 VAST 호환 광고 서버에서 광고를 요청하고 앱에서 광고 재생을 관리할 수 있습니다. IMA DAI SDK를 사용하면 앱에서 광고 및 콘텐츠 동영상(VOD 또는 라이브 콘텐츠)에 대한 스트림을 요청합니다. 그러면 SDK가 결합된 동영상 스트림을 반환하므로 앱 내에서 광고 동영상과 콘텐츠 동영상 간에 전환을 관리할 필요가 없습니다.

관심 있는 DAI 솔루션을 선택합니다

Google Cloud Video Stitcher API에 등록된 VOD 스트림 재생

이 가이드에서는 HTML5용 IMA DAI SDK를 사용하여 Google Cloud VOD 스트림 세션을 요청하고 재생하는 방법을 설명합니다.

이 가이드에서는 IMA DAI용 시작 가이드의 기본 예시를 설명합니다.

다른 플랫폼과 통합하거나 IMA 클라이언트 측 SDK를 사용하는 방법에 대한 자세한 내용은 양방향 미디어 광고 SDK를 참조하세요.

완성된 샘플 통합을 보거나 따라 하려면 HLS 또는 DASH용 Cloud 동영상 스티처 예시를 다운로드하세요.

Google Cloud 프로젝트 설정

Google Cloud 프로젝트를 설정하고 프로젝트에 액세스하도록 서비스 계정을 구성합니다.

IMA SDK에서 사용할 다음 변수를 입력합니다.

위치

VOD 구성이 생성된 Google Cloud 리전: LOCATION

프로젝트 번호

Video Stitcher API를 사용하는 Google Cloud 프로젝트 번호: PROJECT_NUMBER

OAuth 토큰

Video Stitcher 사용자 역할이 포함된 서비스 계정의 단기 OAuth 토큰:

OAUTH_TOKEN

단기 OAuth 토큰 만들기에 대해 자세히 알아보세요. OAuth 토큰은 만료되지 않은 한 여러 요청에서 재사용될 수 있습니다.

네트워크 코드

광고 요청에 사용되는 Ad Manager 네트워크 코드: NETWORK_CODE

VOD 구성 ID

VOD 스트림의 VOD 구성 ID입니다. VOD_CONFIG_ID

클라우드 병합으로 VOD 구성 만들기 가이드에서 VOD 구성 ID 만들기에 대해 자세히 알아보세요.

개발 환경 구성

IMA 샘플 앱은 HLS 스트림 요청만 보여줍니다. VideoStitcherVodStreamRequest 클래스를 구성할 때 DASH 스트림을 계속 사용할 수 있습니다. DASH 호환 플레이어를 설정할 때 동영상의 메타데이터를 StreamManager.processMetadata()에 제공할 수 있는 동영상 플레이어 진행률 이벤트의 리스너를 설정해야 합니다. 이 함수는 다음과 같은 세 가지 매개변수를 사용합니다.

type: HLS 스트림의 경우 'ID3'로, DASH 스트림의 경우 'urn:google:dai:2018'로 설정해야 하는 문자열입니다.
data: DASH 이벤트 메시지의 경우 메시지 데이터 문자열입니다.
timestamp: DASH 스트림의 이벤트 메시지 시작 시간에 해당하는 숫자입니다.

플레이어 이벤트에서 제공할 수 있게 되는 즉시 가능한 빈도로 메타데이터를 전송하세요. 메타데이터가 누락되거나 올바르지 않으면 IMA DAI SDK가 광고 이벤트를 트리거하지 않아 광고 이벤트가 부적절하게 보고될 수 있습니다.

HTML5용 IMA DAI 예시를 다운로드하고 hls_js/simple 샘플 ZIP 파일을 새 폴더로 추출합니다. 이 예시는 테스트 목적으로 로컬에서 호스팅할 수 있는 웹 앱입니다.

예시를 로컬에서 호스팅하려면 새 폴더로 이동하여 다음 Python 명령어를 실행하여 웹 서버를 시작합니다.

python3 -m http.server 8000

http.server는 Python 3.x에서만 사용할 수 있습니다. Apache HTTP 서버나 Node JS와 같은 다른 웹 서버를 사용할 수 있습니다.

웹브라우저를 열고 localhost:8000으로 이동하여 동영상 플레이어를 표시합니다. 브라우저에서 HLS.js 라이브러리를 지원해야 합니다.

모두 제대로 작동하는 경우 동영상 플레이어에서 재생 버튼을 클릭하면 단편 영화 'Tears of Steel'이 시작되고 30초마다 광고 시점이 표시됩니다.

VOD 스트림 요청

샘플 스트림을 광고가 병합된 VOD 스트림으로 바꾸려면 VideoStitcherVodStreamRequest 클래스를 사용하여 Google Ad Manager로 광고 세션을 자동으로 만듭니다. Google Ad Manager UI를 사용하면 모니터링 및 디버깅용으로 생성된 DAI 세션을 찾을 수 있습니다.

기존 샘플에는 VOD 스트림 또는 라이브 스트림을 요청하는 함수가 있습니다. Google Cloud Video Stitcher API를 사용하려면 VideoStitcherVodStreamRequest 객체를 반환하는 새 함수를 추가해야 합니다.

예를 들면 다음과 같습니다.

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

페이지를 새로고침합니다. 그런 다음 커스텀 VOD 스트림을 요청하고 재생할 수 있습니다.

(선택사항) 스트리밍 세션 옵션 추가

VideoStitcherVodStreamRequest.videoStitcherSessionOptions를 사용하여 기본 Cloud Video Stitcher API 구성을 재정의하는 세션 옵션을 추가해 스트림 요청을 맞춤설정합니다. 인식할 수 없는 옵션을 제공하면 Cloud Video Stitcher API에서 HTTP 400 오류로 응답합니다. 도움이 필요하면 문제 해결 가이드를 참조하세요.

예를 들어 다음 코드 스니펫으로 매니페스트 옵션을 재정의할 수 있으며 이 옵션에서는 가장 낮은 비트 전송률에서 가장 높은 비트 전송률 순으로 변환되는 스트림 매니페스트 2개를 요청합니다.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

삭제

Google Cloud Video Stitcher API를 사용하여 VOD 스트림을 성공적으로 호스팅하고 HTML5용 IMA DAI SDK를 사용하여 요청했으므로 이제 모든 제공 리소스를 삭제해야 합니다.

VOD 삭제 가이드에 따라 불필요한 리소스와 애셋을 삭제합니다.

마지막으로 Python 3 웹 서버를 시작한 터미널 창에서 ctrl+C 명령어를 사용하여 로컬 서버를 종료합니다.