Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamy

Pakiet Web Sender SDK zapewnia obsługę przerw na reklamę i reklam towarzyszących w danym strumieniu multimediów.

Więcej informacji o tym, jak działają przerwy na reklamy, znajdziesz w artykule o przerwach na reklamy w odbiorniku internetowym.

Przerwy można określić zarówno w przypadku nadawcy, jak i odbiorcy, ale zaleca się, aby były one określone w odbiorniku internetowym i odbiorniku Android TV. Pozwoli to zachować spójność działania na różnych platformach.

Na stronie internetowej przerwy na reklamy określ w poleceniu wczytywania za pomocą parametró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 (napisem) lub obiektem strumienia audio lub wideo. Interfejsy Tracks API umożliwiają pracę z tymi obiektami w aplikacji.

Uwaga: odbiorniki stylowe i domyślne umożliwiają używanie tylko ścieżek tekstowych w interfejsie API. Aby pracować ze ścieżkami audio i wideo, musisz utworzyć odbiornik niestandardowy.

Obiekt Track reprezentuje ścieżkę w pakiecie SDK. Możesz skonfigurować ścieżkę 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, na przykład może mieć wiele napisów (każdy z nich w innym języku) lub wiele alternatywnych strumieni audio (w różnych językach).

MediaInfo to klasa modelująca element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, musisz zaktualizować jej właściwość tracks. To powiązanie należy utworzyć, zanim multimedia zostaną wczytane do odbiorcy:

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 multimediów activeTrackIds.

Po wczytaniu multimediów możesz też aktywować co najmniej jedną ścieżkę powiązaną z elementem multimedialnym, wywołując metodę EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywacji w usłudze opt_activeTrackIds. Pamiętaj, że oba parametry są opcjonalne i możesz według własnego uznania wybrać, które z nich chcesz ustawić: aktywne ścieżki lub style. Na przykład w ten sposób możesz włączyć napisy w języku francuskim (2) i dźwięk 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 nośnika, ustaw pustą tablicę mediaInfo.tracks=null i załaduj ponownie multimedia.

Aby usunąć wszystkie ścieżki tekstowe z bieżącego multimediów (na przykład wyłączyć napisy), wykonaj jedną z tych czynności:

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

Style ścieżek tekstowych

TextTrackStyle to obiekt zawierający informacje o stylu ścieżki tekstowej. Po utworzeniu lub zaktualizowaniu istniejącego obiektu TextTrackStyle możesz zastosować go do odtwarzanego elementu multimedialnego, wywołując jego metodę editTrackInfo w ten sposób:

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

Możesz śledzić stan żądania z wynikami wywołań zwrotnych (sukces lub błąd i odpowiednio zaktualizować pierwotnego nadawcę).

Aplikacje powinny umożliwiać użytkownikom aktualizowanie stylu ścieżek tekstowych za pomocą ustawień dostępnych w systemie lub przez samą aplikację.

Możesz określić styl tych elementów 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 czerwony kolor tekstu i nieprzezroczystość ustawioną na 75%:

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

Sterowanie głośnością

Głośność odbiornika możesz ustawić za pomocą przycisków RemotePlayer i RemotePlayerController.

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

Aplikacja nadawcy powinna przestrzegać tych wskazówek dotyczących regulacji głośności:

• Aplikacja nadawcy musi zostać zsynchronizowana z odbiorcą, aby interfejs nadawcy zawsze raportował ilość według odbiorcy. Aby utrzymać liczbę odbiorców u nadawcy, użyj wywołań zwrotnych RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.
• Aplikacje nadawcy nie mogą ustawiać poziomu głośności na określonym, wstępnie zdefiniowanym poziomie ani ustawić poziomu głośności na poziom głośności dzwonka lub multimediów na urządzeniu nadawcy, gdy aplikacja wczytuje się na odbiorniku.

Przeczytaj sekcję Regulacja głośności nadawcy na liście kontrolnej projektu.

Wysyłanie wiadomości multimedialnych do odbiorcy

Wartość Media Messages można wysyłać od nadawcy do odbiorcy. Aby na przykład wysłać wiadomość w usłudze 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 z tym samym odbiorcą jest połączonych wielu nadawców, każdy z nich musi wiedzieć o zmianach u odbiorcy, nawet jeśli zmiany te zainicjowali inni nadawcy.

Uwaga: jest to ważne w przypadku wszystkich aplikacji, nie tylko tych, które jawnie obsługują wielu nadawców, ponieważ niektóre urządzenia przesyłające mają wejścia sterujące (piloty, przyciski), które działają jak wirtualni nadawcy, co wpływa na stan odbiorcy.

W tym celu aplikacja powinna rejestrować wszystkie niezbędne detektory w RemotePlayerController. Jeśli TextTrackStyle bieżących multimediów zmieni się, wszyscy połączeni nadawcy zostaną powiadomieni, a odpowiednie właściwości z bieżącej sesji multimediów, takie jak activeTrackIds i textTrackStyle z pola MediaInfo, zostaną wysłane do nadawców w wywołaniach zwrotnych. W tym przypadku pakiet SDK odbiorcy nie sprawdza, czy nowy styl różni się od poprzedniego, i powiadamia wszystkich połączonych nadawców niezależnie.

Uwaga: listy ścieżek powiązanych z aktualnie wczytanymi multimediami nie można zmienić. W razie potrzeby musisz zaktualizować informacje o ścieżkach w obiekcie MediaInfo i ponownie załadować multimedia.

Wskaźnik postępu

W większości aplikacji wymagane jest pokazanie miejsca odtwarzania ze wskaźnikiem postępu u nadawcy. Interfejsy Cast API używają protokołu multimedialnego Cast, który optymalizuje wykorzystanie przepustowości w tym i innych sytuacjach, dzięki czemu nie trzeba implementować własnej synchronizacji stanu. Informacje o prawidłowej implementacji wskaźnika postępu odtwarzania multimediów przez interfejsy API znajdziesz w przykładowej aplikacji CastFilmy-chrome.

Wymagania CORS

Do adaptacyjnego strumieniowego przesyłania multimediów Google Cast wymaga nagłówków CORS. Nawet proste strumienie multimedialne mp4 wymagają CORS, jeśli zawierają ścieżki. Aby 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 nie masz na serwerze nagłówków CORS dla prostych multimediów mp4, a następnie dodasz prostą ścieżkę napisów, strumieniowe przesyłanie multimediów nie będzie możliwe, dopóki nie zaktualizujesz serwera tak, aby zawierał odpowiednie nagłówki CORS.

Potrzebujesz tych nagłówków: Content-Type,Accept-Encoding i Range. Ostatnie 2 nagłówki – Accept-Encoding i Range – to dodatkowe nagłówki, które być może wcześniej nie były Ci 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 wczytywania strony internetowej

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

sessionId można znaleźć w aktywnej CastSession przy użyciu getSessionId() po wywołaniu danych loadMedia().

Zalecana metoda:

1. Zadzwoń pod numer loadMedia(), aby rozpocząć sesję
2. Zapisz sessionId lokalnie
3. W razie potrzeby dołącz ponownie do sesji za pomocą 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 już koniec funkcji, które możesz dodać do aplikacji Web Sender. Teraz możesz utworzyć aplikację nadawcy na inną platformę (Android lub iOS) albo aplikację odbierającą.