이 페이지는 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)

Track 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 (빈 배열)를 설정하고 미디어를 새로고침하면 됩니다.

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

이전에 표시된 대로 var activeTrackIds = [2, 3];를 업데이트하여 [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)용 발신자 앱을 빌드하거나 수신자 앱을 빌드할 수 있습니다.

전송 통합