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에서 찾을 수 있습니다.

권장되는 방법은 다음과 같습니다.

  1. loadMedia()를 호출하여 세션을 시작합니다.
  2. sessionId를 로컬에 저장
  3. 필요한 경우 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();
  }
});

다음 단계

웹 송신기 앱에 추가할 수 있는 기능을 모두 살펴봤습니다. 이제 다른 플랫폼(Android 또는 iOS)용 송신기 앱을 빌드하거나 수신기 앱을 빌드할 수 있습니다.

이전
전송 통합