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 reklamę

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

Więcej informacji o działaniu przerw na reklamy znajdziesz w tym artykule.

Przerwy można określać 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 reklamy 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 API ścieżek 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, która modeluje element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, zaktualizuj jego właściwość tracks. To powiązanie musi zostać utworzone 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ż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 lub 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, 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):

Zaktualizuj var activeTrackIds = [2, 3]; (wcześniej wyświetlany), 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);

Możesz śledzić stan żądania na podstawie 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 określić styl tych elementów ś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ą w ten sposób:

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 nadawcy powinna przestrzegać tych wytycznych dotyczących sterowania głośnością:

Aplikacja nadawcy musi synchronizować się z odbiornikiem, aby interfejs nadawcy zawsze raportował głośność odbiornika. Użyj wywołania zwrotnego RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby utrzymać głośność u nadawcy. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.
Aplikacje wysyłające nie mogą ustawiać poziomu głośności na określony, predefiniowany poziom ani ustawiać poziomu głośności na głośność dzwonka lub multimediów urządzenia wysyłającego, gdy aplikacja jest wczytywana na odbiorniku.

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

Wysyłanie wiadomości z multimediami do odbiorcy

Media Messages może być wysyłany 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 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 obiekcie RemotePlayerController. Jeśli zmieni się TextTrackStyle bieżącego medium, wszystkie połączone urządzenia wysyłające otrzymają powiadomienie, a odpowiednie właściwości bieżącej sesji multimedialnej, takie jak activeTrackIds i textTrackStyle pola MediaInfo, zostaną wysłane do urządzeń wysyłających w wywołaniach zwrotnych. W takim przypadku pakiet SDK odbiornika nie sprawdza, czy nowy styl różni się od poprzedniego, i powiadamia o tym wszystkich połączonych nadawców.

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. Informacje o prawidłowym wdrożeniu 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 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 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.

Potrzebujesz tych nagłówków: 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 internetowej

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

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

Zalecamy:

Zadzwoń loadMedia() aby rozpocząć sesję
Przechowuj sessionId lokalnie
W razie potrzeby ponownie dołącz do sesji, korzystając z 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 w internecie. Możesz teraz utworzyć aplikację nadawcy na inną platformę (Android lub iOS) albo utworzyć aplikację odbiorcy.

Wstecz

Zintegruj przesyłanie