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

Web Sender 앱에 고급 기능 추가

광고 시점

Web Sender SDK는 특정 미디어 스트림 내의 광고 시점 및 컴패니언 광고를 지원합니다.

광고 시점의 작동 방식에 관한 자세한 내용은 웹 수신기 광고 시점 개요를 참고하세요.

발신자와 수신자 모두에 휴식 시간을 지정할 수 있지만, 플랫폼 간에 일관된 동작을 유지하려면 웹 수신기와 Android TV 수신기에서 휴식 시간을 지정하는 것이 좋습니다.

웹에서는 BreakClip 및 Break를 사용하여 로드 명령어에서 광고 시점을 지정합니다.

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

Tracks API 사용

트랙은 텍스트 (자막 또는 자막) 객체나 오디오 또는 동영상 스트림 객체일 수 있습니다. Tracks API를 사용하면 애플리케이션에서 이러한 객체로 작업할 수 있습니다.

Track 객체는 SDK의 트랙을 나타냅니다. 다음과 같이 트랙을 구성하고 고유 ID를 할당할 수 있습니다.

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

미디어 항목에는 여러 개의 트랙이 있을 수 있습니다. 예를 들어 여러 자막 (각각 다른 언어용) 또는 여러 대체 오디오 스트림(서로 다른 언어용)이 있을 수 있습니다.

MediaInfo는 미디어 항목을 모델링하는 클래스입니다. Track 객체 컬렉션을 미디어 항목과 연결하려면 tracks 속성을 업데이트합니다. 이 연결은 미디어가 수신기에 로드되기 전에 이루어져야 합니다.

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

미디어 activeTrackIds 요청에서 활성 트랙을 설정할 수 있습니다.

미디어가 로드된 후 EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)를 호출하고 opt_activeTrackIds에서 활성화할 트랙의 ID를 전달하여 미디어 항목과 연결된 하나 이상의 트랙을 활성화할 수도 있습니다. 두 매개변수 모두 선택사항이며 원하는 대로 설정할 활성 트랙 또는 스타일을 선택할 수 있습니다. 예를 들어 프랑스어 자막 (2)과 프랑스어 오디오 (3)를 활성화하는 방법은 다음과 같습니다.

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

현재 미디어에서 모든 오디오 또는 동영상 트랙을 삭제하려면 mediaInfo.tracks=null (빈 배열)를 설정하고 미디어를 새로고침하면 됩니다.

현재 미디어에서 모든 텍스트 트랙을 삭제하려면 (예: 자막 사용 중지) 다음 중 하나를 실행합니다.

오디오 트랙 [3] 만 포함하도록 var activeTrackIds = [2, 3]; (앞에 나타남)을 업데이트합니다.
mediaInfo.tracks=null을 설정합니다. 텍스트 자막 (track.hidden)을 끄기 위해 미디어를 새로고침할 필요는 없습니다. 이전에 사용 설정된 trackId가 포함되지 않은 activeTracksId 배열을 전송하면 텍스트 트랙이 사용 중지됩니다.

텍스트 트랙 스타일 지정

TextTrackStyle는 텍스트 트랙의 스타일 지정 정보를 캡슐화하는 객체입니다. TextTrackStyle 객체를 만들거나 기존 객체를 업데이트한 후에는 다음과 같이 editTrackInfo 메서드를 호출하여 현재 재생 중인 미디어 항목에 이를 적용할 수 있습니다.

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

콜백 결과(성공 또는 오류)와 함께 요청 상태를 추적하고 그에 따라 발신 발신자를 업데이트할 수 있습니다.

애플리케이션은 사용자가 시스템에서 제공한 설정을 사용하거나 애플리케이션 자체에서 제공한 설정을 사용하여 텍스트 트랙의 스타일을 업데이트할 수 있도록 허용해야 합니다.

다음 텍스트 트랙 스타일 요소에 스타일을 지정할 수 있습니다.

포그라운드 (텍스트) 색상 및 불투명도
배경 색상 및 불투명도
가장자리 유형
가장자리 색상
글꼴 배율
글꼴 모음
글꼴 스타일

예를 들어, 다음과 같이 텍스트 색상을 빨간색으로 설정하고 불투명도를 75% 로 설정합니다.

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

볼륨 컨트롤

RemotePlayer 및 RemotePlayerController를 사용하여 수신기 볼륨을 설정할 수 있습니다.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

발신기 앱은 볼륨 제어를 위해 다음 가이드라인을 준수해야 합니다.

발신자 애플리케이션은 발신자 UI가 항상 수신자별 볼륨을 보고하도록 수신자와 동기화해야 합니다. RemotePlayerEventType.VOLUME_LEVEL_CHANGED 및 RemotePlayerEventType.IS_MUTED_CHANGED 콜백을 사용하여 발신자의 볼륨을 유지합니다. 자세한 내용은 상태 업데이트를 참고하세요.
발신기 앱은 사전 정의된 특정 수준으로 볼륨 수준을 설정하거나 앱이 수신기에 로드될 때 볼륨 수준을 발신기 기기의 벨소리/미디어 볼륨으로 설정해서는 안 됩니다.

설계 체크리스트의 발신자 볼륨 제어를 참조하세요.

수신자에게 미디어 메시지 전송

Media Messages는 발신자에서 수신자로 전송할 수 있습니다. 예를 들어 수신자에게 SKIP_AD 메시지를 보내려면 다음 안내를 따르세요.

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

상태 업데이트

여러 발신자가 동일한 수신자에 연결된 경우 다른 발신자가 변경하더라도 각 발신자가 수신자의 변경사항을 알고 있어야 합니다.

이를 위해 애플리케이션은 필요한 모든 리스너를 RemotePlayerController에 등록해야 합니다. 현재 미디어의 TextTrackStyle가 변경되면 연결된 모든 발신기에 알림이 전송되고 MediaInfo 필드의 activeTrackIds 및 textTrackStyle와 같은 현재 미디어 세션의 상응하는 속성이 콜백의 발신자에게 전송됩니다. 이 경우 수신기 SDK는 새 스타일이 이전 스타일과 다른지 확인하지 않고 이와 상관없이 연결된 모든 발신기에 알립니다.

진행 상태 표시기

발신자에 진행률 표시기와 함께 재생 위치를 표시하는 것은 대부분의 앱에서 요구사항입니다. Cast API는 이 시나리오와 다른 시나리오의 대역폭 소비를 최적화하는 Cast 미디어 프로토콜을 사용하므로 자체 상태 동기화를 구현할 필요가 없습니다. API를 사용하여 미디어 재생의 진행률 표시기를 올바르게 구현하려면 CastVideos-chrome 샘플 앱을 참고하세요.

CORS 요구사항

적응형 미디어 스트리밍의 경우 Google Cast에 CORS 헤더가 있어야 하지만 간단한 mp4 미디어 스트림에도 트랙이 포함된 경우 CORS가 필요합니다. 미디어에 트랙을 사용 설정하려면 트랙 스트림과 미디어 스트림 모두에 CORS를 사용 설정해야 합니다. 따라서 서버에 간단한 mp4 미디어에 사용할 수 있는 CORS 헤더가 없는 상태에서 간단한 자막 트랙을 추가하는 경우, 적절한 CORS 헤더를 포함하도록 서버를 업데이트하지 않으면 미디어를 스트리밍할 수 없습니다.

Content-Type,Accept-Encoding, Range 헤더가 필요합니다. 마지막 두 헤더 Accept-Encoding와 Range는 이전에 필요하지 않았을 수 있는 추가 헤더입니다.

Access-Control-Allow-Origin 헤더에 와일드 카드 '*'를 사용할 수 없습니다. 페이지에 보호된 미디어 콘텐츠가 있는 경우 와일드 카드 대신 도메인을 사용해야 합니다.

웹페이지를 새로고침하지 않고 세션 재개

기존 CastSession를 재개하려면 참여하려는 세션의 sessionId와 함께 requestSessionById(sessionId)를 사용합니다.

sessionId는 loadMedia()를 호출한 후 getSessionId()를 사용하여 활성 CastSession에서 찾을 수 있습니다.

권장되는 접근 방식은 다음과 같습니다.

loadMedia()를 호출하여 세션을 시작합니다.
sessionId를 로컬에 저장
필요한 경우 requestSessionById(sessionId)를 사용하여 세션에 다시 참여

let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

다음 단계

이제 Web Sender 앱에 추가할 수 있는 기능이 완료되었습니다. 이제 다른 플랫폼(Android 또는 iOS)용 발신기 앱을 빌드하거나 수신기 앱을 빌드할 수 있습니다.

전송 통합