Thêm các tính năng nâng cao vào ứng dụng Web Sender

Điểm chèn quảng cáo

Web Sender SDK hỗ trợ tính năng Điểm chèn quảng cáo và quảng cáo đồng hành trong một luồng nội dung nghe nhìn nhất định.

Hãy xem phần Tổng quan về điểm chèn quảng cáo trên trình nhận trên web để biết thêm thông tin về cách hoạt động của điểm chèn quảng cáo.

Mặc dù có thể chỉ định thời điểm ngắt quảng cáo trên cả người gửi và người nhận, nhưng bạn nên chỉ định các điểm chèn quảng cáo này trên Trình thu thập dữ liệu trên web và Bộ thu của Android TV để duy trì hành vi nhất quán trên các nền tảng.

Trên web, hãy chỉ định Điểm chèn quảng cáo trong lệnh tải bằng cách sử dụng BreakClip và 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)

Sử dụng API theo dõi

Một bản âm thanh có thể là một đối tượng văn bản (phụ đề) hoặc một đối tượng âm thanh hoặc luồng video. Track API (API Tuyến đường) cho phép bạn làm việc với các đối tượng này trong ứng dụng của mình.

Đối tượng Track đại diện cho một kênh trong SDK. Bạn có thể định cấu hình một kênh và gán mã nhận dạng duy nhất cho kênh đó như sau:

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;

Một mục nội dung đa phương tiện có thể có nhiều bản âm thanh; ví dụ: mục đó có thể có nhiều phụ đề (mỗi phụ đề cho một ngôn ngữ khác nhau) hoặc nhiều luồng âm thanh thay thế (cho nhiều ngôn ngữ).

MediaInfo là lớp mô hình hoá một mục nội dung đa phương tiện. Để liên kết một tập hợp các đối tượng Track với một mục nội dung đa phương tiện, bạn cần cập nhật thuộc tính tracks của mục đó. Bạn cần thực hiện mối liên kết này trước khi tải nội dung nghe nhìn đến trình nhận:

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;

Bạn có thể thiết lập các kênh đang hoạt động trong yêu cầu nội dung đa phương tiện activeTrackIds.

Bạn cũng có thể kích hoạt một hoặc nhiều bản nhạc đã liên kết với mục nội dung đa phương tiện sau khi nội dung đa phương tiện được tải, bằng cách gọi EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) và truyền mã nhận dạng của các bản nhạc sẽ được kích hoạt trong opt_activeTrackIds. Lưu ý: cả hai tham số đều không bắt buộc và bạn có thể tuỳ ý đặt kênh hoặc kiểu đang hoạt động. Ví dụ: dưới đây là cách kích hoạt phụ đề bằng tiếng Pháp (2) và âm thanh tiếng Pháp (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Để xoá tất cả bản âm thanh hoặc video khỏi nội dung nghe nhìn hiện tại, bạn chỉ cần đặt mediaInfo.tracks=null (một mảng trống) rồi tải lại nội dung nghe nhìn đó.

Để xoá tất cả phụ đề khỏi nội dung nghe nhìn hiện tại (ví dụ: tắt phụ đề), hãy làm theo một trong những cách sau:

  • Cập nhật var activeTrackIds = [2, 3]; (hiển thị trước đó) để chỉ bao gồm [3] bản âm thanh.
  • Đặt mediaInfo.tracks=null. Xin lưu ý rằng bạn không cần phải tải lại nội dung nghe nhìn để tắt phụ đề văn bản (track.hidden). Việc gửi một mảng activeTracksId không chứa trackId đã bật trước đó sẽ vô hiệu hoá bản văn bản.

Tạo kiểu cho nhóm văn bản

TextTrackStyle là đối tượng đóng gói thông tin định kiểu của đoạn văn bản. Sau khi tạo hoặc cập nhật một đối tượng TextTrackStyle hiện có, bạn có thể áp dụng đối tượng đó cho mục nội dung đa phương tiện hiện đang phát bằng cách gọi phương thức editTrackInfo của mục đó, như sau:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Bạn có thể theo dõi trạng thái của yêu cầu với kết quả của lệnh gọi lại (thành công hay lỗi) và cập nhật người gửi ban đầu sao cho phù hợp.

Ứng dụng phải cho phép người dùng cập nhật kiểu cho các bản văn bản, bằng cách sử dụng chế độ cài đặt do hệ thống cung cấp hoặc do chính ứng dụng cung cấp.

Bạn có thể tạo kiểu cho các phần tử kiểu theo dõi văn bản sau đây:

  • Màu và độ mờ (văn bản) nền trước
  • Màu nền và độ mờ nền
  • Loại viền
  • Màu viền
  • Tỷ lệ phông chữ
  • Họ phông chữ
  • Kiểu phông chữ

Ví dụ: đặt màu văn bản thành màu đỏ với độ mờ 75% như sau:

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

Chỉnh âm lượng

Bạn có thể sử dụng RemotePlayer và RemotePlayerController để đặt âm lượng của trình nhận.

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

Ứng dụng người gửi phải tuân thủ các nguyên tắc sau để kiểm soát âm lượng:

  • Ứng dụng của người gửi phải đồng bộ hoá với trình nhận để giao diện người dùng của người gửi luôn báo cáo âm lượng trên mỗi trình nhận. Sử dụng lệnh gọi lại RemotePlayerEventType.VOLUME_LEVEL_CHANGED và RemotePlayerEventType.IS_MUTED_CHANGED để duy trì âm lượng trên người gửi. Hãy xem phần Cập nhật trạng thái để biết thêm thông tin.
  • Ứng dụng người gửi không được đặt mức âm lượng ở một mức cụ thể, được xác định trước hoặc đặt mức âm lượng thành âm lượng chuông/nội dung nghe nhìn của thiết bị gửi khi ứng dụng tải trên thiết bị nhận.

Xem Các tuỳ chọn kiểm soát số lượng người gửi trong Danh sách kiểm tra thiết kế.

Đang gửi tin nhắn đa phương tiện đến người nhận

Media Messages có thể được gửi từ người gửi tới người nhận. Ví dụ: để gửi thông báo SKIP_AD cho người nhận:

// 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
    });
  }
});

Tin cập nhật trạng thái

Khi nhiều người gửi được kết nối với cùng một trình nhận, mỗi người gửi cần phải biết về những thay đổi trên thiết bị nhận ngay cả khi những thay đổi đó là do những người gửi khác thực hiện.

Để đạt được mục tiêu này, ứng dụng của bạn phải đăng ký tất cả trình nghe cần thiết trên RemotePlayerController. Nếu TextTrackStyle của nội dung nghe nhìn hiện tại thay đổi, thì tất cả người gửi đã kết nối sẽ được thông báo và các thuộc tính tương ứng của phiên nội dung nghe nhìn hiện tại, chẳng hạn như activeTrackIds và textTrackStyle của trường MediaInfo sẽ được gửi đến người gửi trong lệnh gọi lại. Trong trường hợp này, SDK của receiver không xác minh liệu kiểu mới có khác với kiểu trước hay không và thông báo cho tất cả người gửi được kết nối bất kể kiểu mới.

Chỉ báo tiến trình

Hiển thị vị trí phát bằng chỉ báo tiến trình trên thiết bị gửi là yêu cầu bắt buộc đối với hầu hết các ứng dụng. API Cast sử dụng giao thức đa phương tiện Cast để tối ưu hoá mức tiêu thụ băng thông cho trường hợp này và các trường hợp khác, vì vậy, bạn không cần triển khai tính năng đồng bộ hoá trạng thái của riêng mình. Để triển khai đúng cách chỉ báo tiến trình phát nội dung nghe nhìn bằng các API, hãy xem ứng dụng mẫu CastVideos-chrome.

Yêu cầu về CORS

Đối với tính năng phát trực tuyến nội dung nghe nhìn thích ứng, Google Cast đòi hỏi phải có tiêu đề CORS, nhưng ngay cả các luồng nội dung đa phương tiện mp4 đơn giản cũng cần có CORS nếu các luồng đó bao gồm cả Tuyến đường. Nếu muốn bật Kênh cho bất kỳ nội dung nghe nhìn nào, bạn phải bật CORS cho cả luồng bản nhạc và luồng nội dung nghe nhìn. Vì vậy, nếu bạn không có tiêu đề CORS cho nội dung nghe nhìn mp4 đơn giản trên máy chủ và sau đó thêm một bản phụ đề đơn giản, bạn sẽ không thể phát trực tuyến nội dung nghe nhìn trừ phi bạn cập nhật máy chủ để thêm các tiêu đề CORS thích hợp.

Bạn cần có các tiêu đề sau: Content-Type, Accept-Encoding và Range. Lưu ý rằng 2 tiêu đề cuối cùng, Accept-Encoding và Range, là các tiêu đề bổ sung mà có thể bạn chưa cần đến trước đây.

Không thể sử dụng ký tự đại diện "*" cho tiêu đề Access-Control-Allow-Origin. Nếu trang có nội dung nghe nhìn được bảo vệ, thì trang đó phải sử dụng miền thay vì ký tự đại diện.

Tiếp tục phiên mà không cần tải lại trang web

Để tiếp tục CastSession hiện có, hãy sử dụng requestSessionById(sessionId) với sessionId của phiên mà bạn đang muốn tham gia.

Bạn có thể tìm thấy sessionId trên CastSession đang hoạt động bằng cách sử dụng getSessionId() sau khi gọi loadMedia().

Phương pháp đề xuất là:

  1. Gọi loadMedia() để bắt đầu phiên
  2. Lưu trữ sessionId cục bộ
  3. Tham gia lại phiên bằng cách sử dụng requestSessionById(sessionId) khi cần
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();
  }
});

Các bước tiếp theo

Bài viết này kết thúc các tính năng mà bạn có thể thêm vào ứng dụng Web Sender của mình. Giờ đây, bạn có thể tạo ứng dụng người gửi cho một nền tảng khác (Android hoặc iOS) hoặc tạo ứng dụng nhận.

Trước
Tích hợp tính năng Truyền