Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamę

Pakiet SDK Web Sender obsługuje przerwy na reklamę i reklamy towarzyszące w danym strumieniu multimediów.

Więcej informacji o tym, jak działają przerwy na reklamę, znajdziesz w artykule Omówienie przerw na reklamę w Web Receiver.

Przerwy można określać zarówno w nadajniku, jak i odbiorniku, ale zalecamy ich określanie w odbiorniku internetowym i odbiorniku Androida TV, aby zachować spójność działania na różnych platformach.

W internecie określ przerwy na reklamy w poleceniu wczytywania za pomocą wartości 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 dotyczących ścieżek

Ścieżka może być obiektem tekstowym (napis lub 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. 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 zawierać wiele ścieżek, na przykład wiele napisów (każdy w innym języku) lub wiele alternatywnych ścieżek audio (w różnych językach).

MediaInfoto klasa modelująca element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, zaktualizuj właściwości tracks tego elementu. Musisz to zrobić, zanim zaczniesz przesyłać treści 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;

Możesz ustawić aktywne ścieżki w żądaniu dotyczącego multimediów activeTrackIds.

Po załadowaniu multimediów możesz też aktywować co najmniej 1 ścieżkę, która została powiązana z elementem multimedialnym, wywołując funkcję EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywowania w funkcji opt_activeTrackIds. Oba parametry są opcjonalne i możesz wybrać, które aktywne ścieżki lub style chcesz ustawić. Oto przykład aktywowania napisów (2) i ścieżki audio (3) w języku francuskim:

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żących multimediów, po prostu ustaw mediaInfo.tracks=null (pusty tablicowy) i ponownie załaduj multimedia.

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

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

Stylizacja ścieżek tekstowych

TextTrackStyle to obiekt, który zawiera informacje o stylizacji ścieżki tekstowej. Po utworzeniu lub zaktualizowaniu obiektu TextTrackStyle możesz go zastosować do aktualnie odtwarzanego elementu multimedialnego, wywołując 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 za pomocą wyników wywołań zwrotnych (sukces lub błąd) i odpowiednio aktualizować pierwotnego nadawcę.

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

Możesz nadać styl tym elementom ś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 przezroczystością 75% w ten sposób:

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

Sterowanie głośnością

Do ustawienia głośności odbiornika możesz użyć przycisków RemotePlayer i RemotePlayerController.

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

Aplikacja nadawcy powinna być zgodna z tymi wytycznymi dotyczącymi kontroli głośności:

  • Aplikacja nadawcy musi być zsynchronizowana z odbiornikiem, aby interfejs użytkownika nadawcy zawsze podawał głośność dla odbiornika. Użyj wywołania zwrotnego RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby utrzymać głośność na urządzeniu nadawczym. Więcej informacji znajdziesz w aktualizacjach stanu.
  • Aplikacje nadawcy nie mogą ustawiać poziomu głośności na określonym, wstępnie zdefiniowanym poziomie lub ustawiać poziomu głośności na głośność dzwonka/multimediów urządzenia nadawcy, gdy aplikacja jest wczytywana na urządzeniu odbiorczym.

Informacje o ustawieniach głośności nadawcy znajdziesz na liście kontrolnej dotyczącej projektowania.

Wysyłanie wiadomości multimedialnych do odbiorcy

Media Messages może być wysyłany 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 z nich wiedział o zmianach wprowadzonych przez innych nadawców.

W tym celu aplikacja powinna zarejestrować wszystkich niezbędnych słuchaczy w RemotePlayerController. Jeśli TextTrackStyle zmieni się w przypadku bieżących multimediów, wszyscy połączeni nadawcy zostaną o tym powiadomieni, a odpowiednie właściwości bieżącej sesji multimediów, takie jak activeTrackIds i textTrackStyle pola MediaInfo zostaną wysłane do nadawców w wywołaniu zwrotnym. W takim przypadku odbiorczy SDK nie sprawdza, czy nowy styl różni się od poprzedniego, i niezależnie od tego powiadamia wszystkich połączonych nadawców.

Wskaźnik postępu

Wyświetlanie lokalizacji odtwarzania z wskaźnikiem postępu na urządzeniu nadawcy jest wymagane w przypadku większości aplikacji. Interfejsy Cast API korzystają z protokołu Cast media, 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 zaimplementować wskaźnik postępu odtwarzania multimediów za pomocą interfejsów API, zapoznaj się z aplikacją CastVideos-chrome.

Wymagania dotyczące CORS

W przypadku strumieniowego przesyłania danych w ramach adaptywnego przesyłania 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ć utwory w przypadku dowolnych multimediów, musisz włączyć CORS zarówno dla ścieżek, jak i strumieni multimediów. Jeśli na serwerze nie masz dostępnych nagłówków CORS dla prostych multimediów mp4, a następnie dodasz prosty ścieżkę z napisami, nie będzie można przesyłać multimediów strumieniowo, dopóki nie zaktualizujesz serwera, aby zawierał odpowiednie nagłówki CORS.

Potrzebujesz tych nagłówków: Content-Type, Accept-Encoding i Range. Pamiętaj, że 2 ostatnie nagłówki, Accept-Encoding i Range, to dodatkowe nagłówki, których wcześniej mogło Ci nie być potrzebne.

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 ładowania strony

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

sessionId można znaleźć na aktywnym CastSession, używając getSessionId() po wywołaniu loadMedia().

Zalecane podejście:

  1. Zadzwoń pod numer loadMedia(), aby rozpocząć sesję.
  2. Przechowuj 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ż wszystkie funkcje, które możesz dodać do aplikacji przesyłacza internetowego. Możesz teraz utworzyć aplikację przesyłacza na inną platformę (Android lub iOS) albo aplikację odbiorcy.

Wstecz
Zintegruj przesyłanie