Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamy

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

Zobacz Omówienie przerw na reklamy w odbiorniku internetowym, aby dowiedzieć się więcej jak działają przerwy na reklamę.

Chociaż przerwy można określić zarówno u nadawcy, jak i u odbiorcy, zalecamy, aby były one określone na odbiorniku internetowym oraz Odbiornik Android TV, aby zachować spójność zachowania użytkowników na różnych platformach.

W przeglądarce internetowej ustaw Przerwy na reklamy w poleceniu wczytywania za pomocą polecenia 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 napisami) bądź strumieniem audio lub wideo. obiektu. Interfejsy Tracks API umożliwiają pracę z tymi obiektami w aplikacji.

Uwaga: kolumny Styl i Domyślne odbiorniki umożliwiają korzystanie za pomocą interfejsu API wyłącznie ze ścieżek tekstowych. Aby pracować z dźwiękiem ścieżek wideo, musisz opracować Odbiornik niestandardowy.

Obiekt Track reprezentuje ścieżkę w pakiecie SDK. Możesz skonfigurować ścieżkę i przypisać unikalny identyfikator w następujący 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 napisy (każdy w innym języku) lub kilka alternatywnych strumieni audio. (dla różnych języków).

MediaInfo to klasa, która modeluje element multimedialny. Aby powiązać kolekcję Track obiektów z elementem multimedialnym, aktualizujesz jego tracks usłudze. Takie powiązanie należy utworzyć, zanim media załadowane 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 multimediach activeTrackIds użytkownika.

Możesz też aktywować jedną lub więcej ścieżek powiązanych z multimediami po załadowaniu multimediów, wywołując EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazywania identyfikatorów ścieżek do aktywacji w opt_activeTrackIds. Uwaga: Oba parametry są opcjonalne. Możesz wybrać aktywne ścieżki lub style, którą ustawić według własnego uznania. Dowiedz się, jak aktywować francuskie napisy (2) i dźwięk francuski (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 (pusta tablica) i załaduj ponownie multimedia.

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

• Zaktualizuj kolumnę var activeTrackIds = [2, 3]; (pokazaną wcześniej), tak aby była obejmuje tylko ścieżkę audio [3].
• Ustaw mediaInfo.tracks=null. Pamiętaj, że nie musisz wykonywać załaduj ponownie multimedia, aby wyłączyć napisy (track.hidden). Wysyłanie tablicy activeTracksId, która nie zawiera wcześniej włączona funkcja trackId wyłącza ścieżkę tekstową.

Określanie stylu ścieżek tekstowych

TextTrackStyle jest obiektem zawierającym informacje o stylu ścieżki tekstowej. Po tworząc lub aktualizując istniejący obiekt TextTrackStyle, możesz to zastosować do obecnie odtwarzany element multimedialny, wywołując jego editTrackInfo. :

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: i odpowiednio zaktualizuj nadawcę.

Aplikacje powinny pozwalać użytkownikom na aktualizowanie stylu ścieżek tekstowych, zarówno za pomocą ustawień w systemie lub w samej aplikacji.

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 aby 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 podaje głośność według odbiornika. Użyj RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED wywołanie zwrotne, aby zachować w nadawcy. Sprawdź aktualizacje stanu. .
• Aplikacje nadawcy nie mogą ustawiać poziomu głośności na określonym, wstępnie zdefiniowanym poziomie lub ustaw głośność dzwonka/multimediów na urządzeniu nadawcy, gdy aplikacja wczytuje się na odbiorniku.

Zobacz Sterowanie 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ć 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 odbiornikiem jest połączonych wielu nadawców, ważne jest, aby nadawcy, aby wiedzieć o zmianach u odbiorcy, nawet jeśli te zmiany zostały zainicjowane od innych nadawców.

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

W tym celu aplikacja powinna zarejestrować wszystkie niezbędne detektory RemotePlayerController Jeśli TextTrackStyle o bieżących zmianach w multimediach, wszyscy połączeni nadawcy otrzymają powiadomienie i odpowiednie właściwości bieżącej sesji multimedialnej, takie jak activeTrackIds i textTrackStyle MediaInfo. będzie wysyłane do nadawców w wywołaniach zwrotnych. W takim przypadku pakiet SDK odbierający nie sprawdza, czy nowy styl różni się od poprzedniego oraz zawsze powiadamia o nich wszystkich połączonych nadawców.

Uwaga: lista ścieżek powiązanych z aktualnie wczytanymi Nie można zmienić multimediów. W razie potrzeby zaktualizuj informacje o utworach na MediaInfo i załaduj ponownie multimedia.

Wskaźnik postępu

Pokazywanie lokalizacji odtwarzania ze wskaźnikiem postępu na nadawcy to są wymagane dla większości aplikacji. Interfejsy Cast API wykorzystują protokół multimediów Cast, który optymalizuje wykorzystanie przepustowości w tym i innych scenariuszach, dzięki czemu nie jest wdrożyć własną synchronizację stanu. Prawidłowe wdrożenie wskaźnika postępu odtwarzania multimediów przy użyciu interfejsów API, zapoznaj się z Przykładowa aplikacja 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ą utwory. Jeśli Jeśli chcesz włączyć ścieżki dla dowolnych multimediów, musisz włączyć CORS dla obu strumienie i multimedia. Jeśli więc nie masz dostępnych nagłówków CORS do prostego formatu mp4 na serwerze, a następnie dodać proste napisy śledź, nie będzie można przesyłać strumieniowo multimediów, dopóki nie zaktualizujesz serwera , aby uwzględnić odpowiednie nagłówki CORS.

Potrzebujesz tych nagłówków: Content-Type, Accept-Encoding i Range. Zwróć uwagę, że ostatnie 2 nagłówki, Accept-Encoding i Range, są dodatkowe które wcześniej mogły nie być potrzebne.

Symbole wieloznaczne „*” nie można użyć w nagłówku Access-Control-Allow-Origin. Jeśli strona zawiera chronione treści multimedialne, należy użyć domeny zamiast symbol zastępczy.

Wznawianie sesji bez ponownego załadowania strony internetowej

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

Obiekt sessionId można znaleźć w aktywnej jednostce CastSession za pomocą getSessionId(). po rozmowie loadMedia()

Zalecamy:

1. Zadzwoń do nas loadMedia() aby rozpocząć sesję
2. Przechowuj sessionId lokalnie
3. Dołącz ponownie do sesji za pomocą requestSessionById(sessionId) w razie potrzeby

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 dla innej platformy (Android lub iOS) albo stworzyć aplikację odbiornika.