Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamę

Pakiet Web Sender SDK obsługuje przerwy na reklamy i reklamy towarzyszące w ramach danego strumienia multimediów.

Więcej informacji o działaniu przerw na reklamy znajdziesz w artykule Przerwy na reklamy w odbiorniku internetowym – omówienie.

Przerwy można określić zarówno na urządzeniu wysyłającym, jak i odbiorniku, ale zalecamy określanie ich na odbiorniku internetowym i odbiorniku Androida TV, aby zachować spójne działanie na różnych platformach.

W internecie określ przerwy na reklamę w poleceniu wczytywania za pomocą tych tagów:BreakClip i 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)

Korzystanie z interfejsów API ścieżek

Ścieżka może być obiektem tekstowym (napisy) lub obiektem strumienia audio lub wideo. Interfejsy Tracks API umożliwiają pracę z tymi obiektami w aplikacji.

Obiekt Track reprezentuje ścieżkę w pakiecie SDK. Ścieżkę możesz skonfigurować i przypisać do niej unikalny identyfikator w ten sposób:

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;

Element multimedialny może mieć wiele ścieżek, np. wiele napisów (każde w innym języku) lub wiele alternatywnych strumieni audio (w różnych językach).

MediaInfo to klasa modelująca element multimedialny. Aby powiązać zbiór obiektów Track z elementem multimedialnym, zaktualizuj jego właściwość tracks. To powiązanie musi zostać utworzone przed załadowaniem multimediów na odbiornik:

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;

Aktywne ścieżki możesz ustawić w żądaniu dotyczącym multimediów activeTrackIds.

Możesz też aktywować jeden lub więcej ścieżek powiązanych z elementem multimedialnym po załadowaniu multimediów, wywołując EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywacji w opt_activeTrackIds. Uwaga: oba parametry są opcjonalne i możesz wybrać, które z nich chcesz ustawić: aktywne ścieżki czy style. Oto przykład aktywowania napisów w języku francuskim (2) i dźwięku w języku francuskim (3):

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

Aby usunąć wszystkie ścieżki audio lub wideo z bieżącego pliku multimedialnego, ustaw po prostu mediaInfo.tracks=null (pustą tablicę) i ponownie załaduj plik.

Aby usunąć wszystkie ścieżki tekstowe z bieżącego pliku multimedialnego (np. wyłączyć napisy), wykonaj jedną z tych czynności:

  • Zaktualizuj var activeTrackIds = [2, 3]; (pokazany wcześniej), aby zawierał tylko [3], czyli ścieżkę audio.
  • Ustaw mediaInfo.tracks=null. Pamiętaj, że aby wyłączyć napisy tekstowe (track.hidden), nie musisz ponownie wczytywać multimediów. Wysłanie tablicy activeTracksId, która nie zawiera wcześniej włączonego elementu trackId, wyłącza ścieżkę tekstową.

Stylizowanie ścieżek tekstowych

TextTrackStyle to obiekt, który zawiera informacje o stylu ścieżki tekstowej. Po utworzeniu lub zaktualizowaniu istniejącego obiektu TextTrackStyle możesz zastosować go do aktualnie odtwarzanego elementu multimedialnego, wywołując jego metodę editTrackInfo, np. tak:

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

Stan żądania możesz śledzić za pomocą wyników wywołań zwrotnych (powodzenie lub błąd) i odpowiednio informować nadawcę.

Aplikacje powinny umożliwiać użytkownikom aktualizowanie stylu ścieżek tekstowych za pomocą ustawień udostępnianych przez system lub samą aplikację.

Możesz dostosować te elementy stylu ścieżki tekstowej:

  • Kolor i przezroczystość pierwszego planu (tekstu)
  • kolor i przezroczystość tła;
  • Typ krawędzi
  • Kolor krawędzi
  • Skala czcionki
  • Rodzina czcionek
  • Styl czcionki

Na przykład ustaw kolor tekstu na czerwony z 75-procentową przezroczystością:

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

Sterowanie głośnością

Możesz użyć RemotePlayer i RemotePlayerController do ustawienia głośności odbiornika.

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

Aplikacja wysyłająca powinna przestrzegać tych wytycznych dotyczących sterowania głośnością:

  • Aplikacja nadawcy musi być zsynchronizowana z odbiornikiem, aby interfejs nadawcy zawsze raportował głośność zgodnie z odbiornikiem. Użyj wywołania zwrotnego RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby utrzymać głośność na urządzeniu wysyłającym. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.
  • Aplikacje wysyłające nie mogą ustawiać poziomu głośności na określony, zdefiniowany wcześniej poziom ani ustawiać poziomu głośności na głośność dzwonka/multimediów urządzenia wysyłającego, gdy aplikacja jest wczytywana na odbiorniku.

Zobacz Sterowanie głośnością nadawcy w liście kontrolnej dotyczącej projektu.

wysyłanie wiadomości z multimediami do odbiorcy;

Media Messages może być wysyłana od nadawcy do odbiorcy. Aby na przykład wysłać wiadomość SKIP_AD do odbiorcy:

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

Aktualności

Gdy wielu nadawców jest połączonych z tym samym odbiorcą, ważne jest, aby każdy nadawca był świadomy zmian u odbiorcy, nawet jeśli zostały one zainicjowane przez innych nadawców.

W tym celu aplikacja powinna zarejestrować wszystkie niezbędne odbiorniki w RemotePlayerController. Jeśli zmieni się TextTrackStyle bieżącego medium, wszyscy połączeni nadawcy otrzymają powiadomienie, a odpowiednie właściwości bieżącej sesji multimedialnej, takie jak activeTrackIds i textTrackStyle pola MediaInfo, zostaną wysłane do nadawców w wywołaniach zwrotnych. W takim przypadku pakiet SDK odbiornika nie sprawdza, czy nowy styl różni się od poprzedniego, i powiadamia o tym wszystkie połączone aplikacje wysyłające.

Wskaźnik postępu

Wyświetlanie lokalizacji odtwarzania ze wskaźnikiem postępu na urządzeniu wysyłającym jest wymagane w przypadku większości aplikacji. Interfejsy Cast API korzystają z protokołu multimediów Cast, który optymalizuje zużycie przepustowości w tym i innych scenariuszach, więc nie musisz implementować własnej synchronizacji stanu. Aby dowiedzieć się, jak prawidłowo wdrożyć wskaźnik postępu odtwarzania multimediów za pomocą interfejsów API, zapoznaj się z przykładową aplikacją CastVideos-chrome.

Wymagania dotyczące CORS

W przypadku adaptacyjnego przesyłania strumieniowego multimediów Google Cast wymaga obecności nagłówków CORS, ale nawet proste strumienie multimediów mp4 wymagają CORS, jeśli zawierają ścieżki. Jeśli chcesz włączyć ścieżki dla dowolnych multimediów, musisz włączyć CORS zarówno w przypadku strumieni ścieżek, jak i strumieni multimediów. Jeśli więc na serwerze nie masz dostępnych nagłówków CORS dla prostego pliku multimedialnego mp4, a następnie dodasz prostą ścieżkę napisów, nie będziesz w stanie przesyłać strumieniowo multimediów, dopóki nie zaktualizujesz serwera, aby uwzględniał odpowiednie nagłówki CORS.

Wymagane są te nagłówki: Content-Type, Accept-Encoding i Range. Pamiętaj, że ostatnie 2 nagłówki, Accept-Encoding i Range, to dodatkowe nagłówki, które wcześniej nie były potrzebne.

W nagłówku Access-Control-Allow-Origin nie można używać symboli wieloznacznych „*”. Jeśli strona zawiera chronione treści multimedialne, musi używać domeny zamiast symbolu wieloznacznego.

Wznawianie sesji bez ponownego ładowania strony

Aby wznowić istniejącą sesję CastSession, użyj requestSessionById(sessionId) z sessionId sesji, do której chcesz dołączyć.

sessionId znajdziesz na aktywnej karcie CastSession, korzystając z getSessionId() po nawiązaniu połączenia loadMedia().

Zalecane podejście:

  1. ZadzwońloadMedia(), aby rozpocząć sesję
  2. Przechowuj sessionId lokalnie
  3. W razie potrzeby ponownie dołącz do sesji, korzystając z ikony 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();
  }
});

Dalsze kroki

To wszystkie funkcje, które możesz dodać do aplikacji nadawcy internetowego. Możesz teraz utworzyć aplikację nadawcy na inną platformę (Android lub iOS) albo utworzyć aplikację odbiorcy.

Wstecz
Zintegruj przesyłanie