Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 Web Sender 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ù bạn có thể chỉ định điểm chèn quảng cáo trên cả người gửi và người nhận, nhưng bạn nên chỉ định điểm chèn quảng cáo trên Web Receiver và Android TV Receiver để 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 bản nhạc

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

Đối tượng Track đại diện cho một bản nhạc trong SDK. Bạn có thể định cấu hình một bản nhạc và chỉ định một mã nhận dạng duy nhất cho bản nhạc đó 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 nghe nhìn có thể có nhiều bản nhạc; ví dụ: mục này 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 các ngôn ngữ khác nhau).

MediaInfo là lớp mô hình hoá một mục nội dung nghe nhì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 nghe nhì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 nội dung nghe nhìn được tải vào thiết bị 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 bản nhạc đang hoạt động trong yêu cầu nội dung nghe nhìn activeTrackIds.

Bạn cũng có thể kích hoạt một hoặc nhiều bản nhạc được liên kết với mục nội dung nghe nhìn sau khi nội dung nghe nhì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 cần 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ể chọn đặt bản nhạc hoặc kiểu đang hoạt động theo ý mình. Ví dụ: Sau đâ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ả bản nhạ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]; (đã trình bày 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ẽ tắt bản nhạc văn bản.

Tạo kiểu cho bản chép lời

TextTrackStyle là đối tượng đóng gói thông tin về kiểu của một bản âm thanh 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 nghe nhì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 bằng kết quả của lệnh gọi lại (thành công hoặc lỗi) và cập nhật cho 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 các bản nhạc 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 bản âm thanh văn bản sau:

Màu và độ mờ của nền trước (văn bản)
Màu nền và độ 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';

Điều chỉnh âm lượng

Bạn có thể sử dụng RemotePlayer và RemotePlayerController để đặt âm lượng của thiết bị thu.

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

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

Ứng dụng của người gửi phải đồng bộ hoá với ứng dụng của người nhận để giao diện người dùng của người gửi luôn báo cáo âm lượng theo ứng dụng của người 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 thiết bị gửi. 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 của 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 phần Điều khiển âm lượng của người gửi trong Danh sách kiểm tra thiết kế.

Gửi thông báo đa phương tiện đến thiết bị thu

Người gửi có thể gửi Media Messages đến người nhận. Ví dụ: để gửi thông báo SKIP_AD đến thiết bị thu:

// 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 người nhận, điều quan trọng là mỗi người gửi phải biết được các thay đổi trên người nhận, ngay cả khi những thay đổi đó được bắt đầu từ những người gửi khác.

Để làm được điề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 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 của thiết 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 và thông báo cho tất cả các thiết bị gửi đã kết nối bất kể kiểu mới có khác hay không.

Chỉ báo tiến trình

Hầu hết các ứng dụng đều cần hiển thị vị trí phát bằng chỉ báo tiến trình trên thiết bị gửi. Các API Truyền sử dụng giao thức truyền nội dung nghe nhìn, giúp 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

Đối với tính năng 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 có chứa Bản nhạc. Nếu muốn bật Bản nhạc 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 không có tiêu đề CORS cho nội dung nghe nhìn mp4 đơn giản trên máy chủ, sau đó bạn thêm một bản phụ đề đơn giản, thì bạn sẽ không thể truyền trực tuyến nội dung nghe nhìn trừ phi 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. Xin lưu ý rằng hai tiêu đề cuối cùng, Accept-Encoding và Range, là các tiêu đề bổ sung mà có thể trước đây bạn không cần đến.

Bạn 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 một 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 một CastSession hiện có, hãy sử dụng requestSessionById(sessionId) với sessionId của phiên mà bạn đang cố gắng 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:

Gọi loadMedia() để bắt đầu phiên
Lưu trữ sessionId trên thiết bị
Tham gia lại phiên bằ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

Phần 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. 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.

Tích hợp tính năng Truyền