Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamy

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 Przegląd przerw na reklamę w odbiorniku internetowym.

Przerwy można określić zarówno po stronie nadawcy, jak i odbiornika, ale zalecamy, aby były one określone w odbiorniku internetowym i odbiorniku Android TV, aby zachować spójne działanie na różnych platformach.

W internecie określ przerwy na reklamę w poleceniu wczytywania, używając 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 napisy rozszerzone) albo 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 mieć wiele ścieżek, np. kilka ścieżek napisów (każda w innym języku) lub kilka alternatywnych strumieni audio (w różnych językach).

MediaInfo to klasa, która modeluje element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, zaktualizuj jego właściwość tracks. To powiązanie należy utworzyć przed wczytaniem 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żesz ustawić w żądaniu multimediów activeTrackIds.

Możesz też aktywować co najmniej 1 ścieżkę powiązaną z elementem multimedialnym po jego wczytaniu, wywołując metodę EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywacji w parametrze opt_activeTrackIds. Pamiętaj, że oba parametry są opcjonalne i możesz wybrać, które aktywne ścieżki aktywności lub style chcesz ustawić według własnego uznania. Oto przykład, jak aktywować napisy w języku francuskim (2) i ścieżkę audio 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żących multimediów, po prostu ustaw mediaInfo.tracks=null (pustą tablicę) i ponownie załaduj 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), tak aby zawierał 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łączonej ścieżki 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 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, sprawdzając wynik wywołań zwrotnych (powodzenie lub błąd), i odpowiednio aktualizować nadawcę.

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

Możesz stylizować 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

Możesz na przykład ustawić kolor tekstu na czerwony z 75% przezroczystością:

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

Sterowanie głośnością

Aby ustawić głośność odbiornika, możesz użyć RemotePlayer i RemotePlayerController.

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

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

Aplikacja nadawcy musi synchronizować się z odbiorcą, aby interfejs nadawcy zawsze podawał głośność zgodnie z odbiorcą. Użyj wywołań zwrotnych RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby zachować głośność na urządzeniu nadawczym. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.
Aplikacje nadawcze nie mogą ustawiać głośności na określonym, wstępnie zdefiniowanym poziomie ani ustawiać głośności na poziomie dzwonka lub multimediów urządzenia nadawczego, gdy aplikacja jest ładowana na odbiorniku.

Zobacz Elementy sterujące głośnością nadawcy na liście kontrolnej projektowania.

Wysyłanie wiadomości multimedialnych do odbiorcy

Media Messages można wysłać od nadawcy do odbiorcy. Aby na przykład wysłać do odbiorcy wiadomość 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
    });
  }
});

Aktualności

Gdy do tego samego odbiornika jest podłączonych kilka nadajników, ważne jest, aby każdy nadajnik był świadomy zmian w odbiorniku, nawet jeśli zostały one zainicjowane przez inne nadajniki.

W tym celu aplikacja powinna zarejestrować wszystkie niezbędne detektory w RemotePlayerController. Jeśli zmieni się TextTrackStyle bieżących multimediów, wszyscy połączeni nadawcy zostaną powiadomieni, 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 wszystkich połączonych nadawców.

Wskaźnik postępu

Wyświetlanie lokalizacji odtwarzania ze wskaźnikiem postępu na urządzeniu nadawcy jest wymagane w przypadku większości aplikacji. Interfejsy Cast API używają protokołu Cast Media, który optymalizuje wykorzystanie przepustowości w tym i innych scenariuszach, więc nie musisz wdrażać własnej synchronizacji stanu. Przykładową implementację wskaźnika postępu odtwarzania multimediów za pomocą interfejsów API znajdziesz w przykładowej aplikacji CastVideos-chrome.

Wymagania dotyczące CORS

W przypadku adaptacyjnego strumieniowego 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ć ścieżki dla dowolnych multimediów, musisz włączyć CORS zarówno dla strumieni ścieżek, jak i strumieni multimediów. Jeśli więc nie masz nagłówków CORS dostępnych dla prostych multimediów MP4 na serwerze, a następnie dodasz prostą ścieżkę napisów, nie będziesz mieć możliwości strumieniowego przesyłania multimediów, dopóki nie zaktualizujesz serwera, aby zawierał odpowiednie nagłówki CORS.

Potrzebujesz tych nagłówków: Content-Type, Accept-Encoding i Range. Zwróć uwagę, że 2 ostatnie nagłówki, Accept-Encoding i Range, to dodatkowe nagłówki, które wcześniej mogły 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, musi używać domeny, a nie symbolu wieloznacznego.

wznawianie sesji bez ponownego ładowania strony internetowej,

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

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

Zalecane działania:

Aby rozpocząć sesję, zadzwoń pod numer loadMedia()
Przechowuj sessionId lokalnie
W razie potrzeby dołącz ponownie do sesji, używając 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 nadawczej na potrzeby internetu. Możesz teraz utworzyć aplikację nadawczą na inną platformę (Android lub iOS) albo aplikację odbiorczą.

Wstecz

Zintegruj przesyłanie