Web Sender 앱에 고급 기능 추가

광고 시점

Web Sender SDK는 표시됩니다.

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

발신자와 수신자 모두에게 휴식 시간을 지정할 수 있지만 Web Receiver에 지정되어 있어야 하며 일관성을 유지하기 위한 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 (빈 배열)하고 미디어를 새로고침합니다.

현재 미디어에서 모든 텍스트 트랙을 삭제 (예: 다음 중 하나를 수행합니다.

  • (앞에 표시된) var activeTrackIds = [2, 3];를 업데이트하여 오디오 트랙은 [3] 만 포함됩니다.
  • mediaInfo.tracks=null을 설정합니다. Kubernetes에서 텍스트 자막을 사용 중지하려면 미디어를 새로고침하세요 (track.hidden). 다음을 포함하지 않는 activeTracksId 배열 전송 이전에 사용 설정한 trackId는 텍스트 트랙을 사용 중지합니다.

텍스트 트랙 스타일 지정

TextTrackStyle 는 텍스트 트랙의 스타일 정보를 캡슐화하는 객체입니다. 후(After) 기존 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 현재 미디어가 변경되면 연결된 모든 발신자에게 알림이 전송됩니다. 현재 미디어 세션의 해당 속성(예: activeTrackIds 및 textTrackStyle의 MediaInfo 필드는 콜백에서 발신자에게 전송됩니다. 이 경우 수신기 SDK는 새로운 스타일이 이전 스타일과 다른지 확인하지 않으며 통지에 관계없이 연결된 모든 발신자에게 알림을 전송합니다.

진행 상태 표시기

발신기에 진행률 표시기와 함께 재생 위치를 표시하는 것이 필수사항입니다. Cast API는 Cast 미디어 프로토콜을 사용합니다. 는 이 시나리오 및 다른 시나리오에 대한 대역폭 소비를 최적화하므로 상태 동기화를 구현해야 합니다. 적절한 구현 미디어 재생 진행률 표시기에 대한 자세한 내용은 CastVideos-chrome 샘플 앱을 다운로드합니다.

CORS 요구사항

가변 품질 미디어 스트리밍의 경우 Google Cast에 CORS 헤더가 있어야 하므로 단순한 mp4 미디어 스트림에도 트랙이 포함된 경우 CORS가 필요합니다. 만약 모든 미디어에서 트랙을 사용하려면 두 트랙 모두에 대해 CORS를 사용 설정해야 합니다. 미디어 스트림도 있습니다 따라서 CORS 헤더를 사용할 수 없는 경우 mp4 미디어를 저장할 수 있고 간단한 부제목을 추가할 수 있습니다 서버를 업데이트하지 않으면 미디어를 스트리밍할 수 없습니다. 적절한 CORS 헤더를 포함할 수 있습니다.

Content-Type,Accept-Encoding, Range 헤더가 필요합니다. 마지막 두 헤더 Accept-Encoding 및 Range는 추가 헤더입니다. 이전에 필요 없었을 수 있습니다.

와일드 카드 '*' Access-Control-Allow-Origin 헤더에 사용할 수 없습니다. 만약 페이지에 보호된 미디어 콘텐츠가 있는 경우 와일드 카드.

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

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

sessionId는 다음을 사용하여 활성 CastSession에서 찾을 수 있습니다. getSessionId() 통화 후 loadMedia()

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

  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();
  }
});

다음 단계

이것으로 Web Sender 앱에 추가할 수 있는 기능을 마치겠습니다. 이제 다른 플랫폼용 발신기 앱을 빌드할 수 있습니다 (Android 또는 iOS) 수신기 앱 빌드

이전
전송 통합