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

SDK Trình gửi web hỗ trợ Đ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 của trình thu nhậ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 điểm chèn quảng cáo cho cả trình gửi và trình nhận, nhưng bạn nên chỉ định các điểm chèn trên Web receiver và Android TV receiver để duy trì hoạt động 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 một 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 kênh phát hành

Bản nhạc có thể là đối tượng văn bản (phụ đề) hoặc đối tượng luồng âm thanh hoặc video. API Track 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ột 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 nhạc; 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ế (dành cho các ngôn ngữ khác nhau).

MediaInfo là lớp mô hình hoá một mục nội dung đa phương tiện. Để liên kế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 thu 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ể đặt các kênh đang hoạt động trong yêu cầu activeTrackIds nội dung đa phương tiện.

Sau khi tải nội dung nghe nhìn, 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 nghe nhìn bằng cách gọi EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) và chuyển mã nhận dạng của các kênh cần kích hoạt trong opt_activeTrackIds. Xin lưu ý rằng cả hai thông số này đều không bắt buộc và bạn có thể chọn loại kênh hoặc kiểu đang hoạt động để đặt theo ý mình. Ví dụ: dưới đây là cách kích hoạt phụ đề 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ả văn bản 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. Lưu ý rằng bạn không cần tải lại nội dung nghe nhìn để tắt phụ đề văn bản (track.hidden). Thao tác gửi một mảng activeTracksId không chứa trackId đã bật trước đó sẽ tắt bản nhạc văn bản.

Tạo kiểu cho đoạn 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 đố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 đang phát bằng cách gọi phương thức editTrackInfo 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 dựa trên kết quả của các lệnh gọi lại (thành công hay lỗi) và cập nhật người gửi ban đầu cho phù hợp.

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

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

  • Màu và độ mờ của nền trước (văn bản)
  • Màu nền và độ mờ nền
  • Loại viền
  • Màu viền
  • Thang 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ể dùng RemotePlayer và RemotePlayerController để đặt âm lượng của receiver.

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

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

  • Ứng dụng của người gửi phải đồng bộ hoá với thiết bị 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 thiết bị 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 trình gửi. Hãy xem phần Thông tin cập nhật về trạng thái để biết thêm thông tin.
  • Ứng dụng gửi không được đặt mức âm lượng ở mức cụ thể, xác định trước, hoặc đặt mức âm lượng thành âm lượng nhạc chuông/nội dung nghe nhìn của thiết bị gửi khi ứng dụng tải trên đầu thu.

Xem phần Chế độ kiểm soát âm lượng của người gửi trong Danh sách kiểm tra thiết kế.

Gửi tin nhắn đa phương tiện cho người nhận

Media Messages có thể được gửi từ người gửi đến trình 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 trình gửi được kết nối với cùng một trình gửi, điều quan trọng là mỗi người gửi phải nhận biết được các thay đổi ở trình gửi đó ngay cả khi những thay đổi đó 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ả cá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ả trình 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 phát 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 bộ nhận không xác minh xem kiểu mới có khác với kiểu trước đó hay không, đồng thời thông báo cho tất cả trình gửi được kết nối.

Chỉ báo tiến trình

Việc hiển thị vị trí phát cùng với chỉ báo tiến trình trên trình gửi là yêu cầu đối với hầu hết các ứng dụng. Cast API (API Truyền) 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 API, hãy xem ứng dụng mẫu CastVideos-chrome.

Yêu cầu về CORS

Để truyền trực tuyến nội dung nghe nhìn thích ứng, Google Cast yêu cầu phải có tiêu đề CORS, nhưng ngay cả các luồng nội dung nghe nhìn mp4 đơn giản cũng yêu cầu CORS nếu chúng có chứa Bản nhạc. Nếu muốn bật tính năng Theo dõi cho mọi nội dung nghe nhìn, bạn phải bật CORS cho cả luồng nội dung nghe nhìn và luồng nội dung nghe nhìn của mình. 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ủ của mình và sau đó thêm một bản phụ đề đơn giản, bạn sẽ không thể truyền trực tuyến nội dung nghe nhìn của mình trừ khi bạn cập nhật máy chủ để bao gồm các tiêu đề CORS thích hợp.

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

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

Tiếp tục một 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().

Bạn nên áp dụng phương pháp sau:

  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

Đến đây, bạn đã kết thúc đượ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 gửi cho một nền tảng khác (Android hoặc iOS) hoặc tạo ứng dụng trình nhận.

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