Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamy

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

Przeczytaj omówienie przerw na reklamy w odbiorniku internetowym, aby dowiedzieć się więcej o tym, jak działają przerwy na reklamy.

Chociaż przerwy można określić zarówno u nadawcy, jak i u odbiorcy, zalecamy to jednak zrobić w odbiorniku internetowym i odbiorniku Android TV, aby zachować spójność działania na różnych platformach.

Jeśli korzystasz z przeglądarki, określ przerwy na reklamy 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żką może być obiekt tekstowy (napisy lub napisy) albo obiekt strumienia audio lub wideo. Interfejsy Tracks API umożliwiają pracę z tymi obiektami w aplikacji.

Obiekt Track reprezentuje ścieżkę w pakiecie SDK. Możesz skonfigurować ścieżkę i przypisać do niej unikalny identyfikator:

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żdy dla innego języka) lub kilka alternatywnych strumieni audio (dla różnych języków).

MediaInfo to klasa, która modeluje element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, zaktualizuj jego właściwość tracks. Takie powiązanie należy utworzyć przed załadowaniem multimediów do odbiornika:

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żna ustawić w żądaniu multimediów activeTrackIds.

Po załadowaniu multimediów możesz też aktywować jedną lub więcej ścieżek powiązanych z elementem multimedialnym, wywołując metodę EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywowania w opt_activeTrackIds. Pamiętaj, że oba parametry są opcjonalne i możesz wybrać aktywne ścieżki lub style, które chcesz ustawić. Tak na przykład pokazujemy, jak włączyć francuskie napisy (2) i francuską ścieżkę dźwiękową (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 multimediów, ustaw mediaInfo.tracks=null (pustą tablicę) i załaduj ponownie multimedia.

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

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

Określanie stylu ś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 wraz z wynikami wywołań zwrotnych (powodzenie lub błąd) i odpowiednio aktualizować nadawcę.

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

Możesz stylizować następujące elementy ś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 z przezroczystością 75% w następujący sposób:

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

Sterowanie głośnością

Za pomocą RemotePlayer i RemotePlayerController możesz ustawić głośność odbiornika.

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

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

  • Aplikacja nadawcy musi zsynchronizować się z odbiornikiem, aby interfejs nadawcy zawsze wyświetlał głośność dla każdego odbiorcy. Użyj wywołania zwrotnego RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby utrzymać głośność nadawcy. 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 ustawiać poziomu głośności na dzwonek/multimedia urządzenia nadawcy, gdy aplikacja wczytuje się na odbiorniku.

Zapoznaj się z sekcją Sterowanie głośnością nadawcy na liście kontrolnej projektowania.

Wysyłanie wiadomości multimedialnych do odbiorcy

Pole Media Messages może być wysyłane 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 z tym samym odbiorcą jest połączonych wielu nadawców, każdy z nich powinien wiedzieć o zmianach u odbiorcy, nawet jeśli zmiany te zostały zainicjowane przez innych nadawców.

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

Wskaźnik postępu

W większości aplikacji wymagane jest wyświetlenie miejsca odtwarzania ze wskaźnikiem postępu w nadawcy. Interfejsy Cast API używają protokołu Cast, który optymalizuje wykorzystanie przepustowości w tym i innych scenariuszach, dzięki czemu nie musisz implementować własnej synchronizacji stanu. Prawidłową implementację wskaźnika postępu odtwarzania multimediów przy użyciu interfejsów API znajdziesz w przykładowej aplikacji CastVideo-chrome.

Wymagania CORS

Aby korzystać z adaptacyjnego strumieniowego przesyłania multimediów, Google Cast wymaga obecności nagłówków CORS, ale nawet proste strumienie 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 ma dostępnych nagłówków CORS dla prostych multimediów w formacie MP4, a dopiero potem dodasz prostą ścieżkę z napisami, nie będziesz mieć możliwości strumieniowania multimediów, dopóki nie zaktualizujesz serwera tak, aby zawierał odpowiednie nagłówki CORS.

Potrzebujesz tych nagłówków: Content-Type, Accept-Encoding i Range. Uwaga: ostatnie 2 nagłówki, Accept-Encoding i Range, to dodatkowe nagłówki, których wcześniej nie potrzebujesz.

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

Wznawianie sesji bez ponownego załadowania strony internetowej

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

Obiekt sessionId można znaleźć na aktywnym elemencie CastSession za pomocą getSessionId() po wywołaniu loadMedia().

Zalecamy:

  1. Wywołaj loadMedia(), aby rozpocząć sesję
  2. Przechowuj sessionId lokalnie
  3. W razie potrzeby dołącz ponownie do sesji za pomocą polecenia 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ż wszystkie funkcje, które możesz dodać do aplikacji Web Sender. Teraz możesz utworzyć aplikację nadawcy na inną platformę (Android lub iOS) albo aplikację odbiornika.

Wstecz
Zintegruj przesyłanie