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ợ cho Điểm chèn quảng cáo và quảng cáo đồng hành trong luồng phương tiện nhất định.

Xem Tổng quan về điểm chèn quảng cáo của trình thu nhận web để tìm hiểu 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ả người gửi và người nhận, nhưng bạn nên được chỉ định trên Web receiver và Bộ thu Android TV để duy trì sự 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 một 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.

Lưu ý: Thẻ Được tạo kiểu và Bộ thu nội dung nghe nhìn mặc định cho phép bạn chỉ sử dụng đoạn văn bản với API. Để xử lý âm thanh và bản video, bạn phải phát triển một Custom receiver (Bộ thu tuỳ chỉnh).

Đối tượng Track đại diện cho một kênh trong SDK. Bạn có thể định cấu hình kênh và chỉ định một mã nhận dạng duy nhất thành phần 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ụ: 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. Cách liên kết một bộ sưu tập Track đối tượng có một mục nội dung đa phương tiện, bạn có thể cập nhật tracks thuộc tính này. Cần thực hiện mối liên kết này trước khi nội dung nghe nhìn được được tải đế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ể đặt các bản nhạc đang hoạt động trong nội dung đa phương tiện activeTrackIds của bạ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 nội dung nghe nhìn sau khi tải nội dung nghe nhìn bằng cách gọi EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) và truyền mã nhận dạng của các kênh sẽ được kích hoạt trong opt_activeTrackIds. Xin lưu ý rằng cả hai thông số đều là 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ụ: 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);

Để xóa tất cả các bản âm thanh hoặc video khỏi phương tiệ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 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. Xin lưu ý rằng không cần thiết tải lại nội dung nghe nhìn để tắt phụ đề văn bản (track.hidden). Gửi một mảng activeTracksId không chứa trackId được bật trước đó sẽ tắt đoạn 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 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 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 hay gặp 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 do 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';

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

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

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 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 người nhận. Sử dụng RemotePlayerEventType.VOLUME_LEVEL_CHANGED và Lệnh gọi lại RemotePlayerEventType.IS_MUTED_CHANGED để duy trì âm lượng lên người gửi. Xem 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ể, được 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 trình nhận.

Xem Kiểm soát âm lượng 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

Có thể gửi Media Messages 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, điều quan trọng là mỗi người gửi cần biết về những thay đổi ở bên nhận ngay cả khi những thay đổi đó do những người gửi khác tạo.

Lưu ý: Điều này rất quan trọng đối với tất cả các ứng dụng, không chỉ những ứng dụng hỗ trợ rõ ràng nhiều trình gửi, vì một số thiết bị Truyền có đầu vào điều khiển (điều khiển từ xa, nút) hoạt động như người gửi ảo, ảnh hưởng đến trạng thái của dịch vụ nhậ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 thay đổi hiện tại đối với nội dung nghe nhìn, thì tất cả người gửi đã kết nối sẽ nhận đượ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 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 bộ nhận 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.

Lưu ý: Danh sách các bản nhạc liên kết với bản nhạc đang được tải không thể thay đổi phương tiện truyền thông. Nếu cần, bạn phải cập nhật thông tin kênh MediaInfo đối tượng rồi tải lại nội dung nghe nhìn.

Chỉ báo tiến trình

Hiển thị vị trí phát cùng với chỉ báo tiến trình trên người gửi là đối với hầu hết các ứng dụng. Cast API sử dụng giao thức truyền thông Cast tối ưu hoá việc tiêu thụ băng thông cho chế độ này và các tình huống khác, vì vậy bạn không cần triển khai quá trình đồng bộ hoá trạng thái của riêng bạn. Để triển khai đúng cách về chỉ báo tiến trình phát lại nội dung đa phương tiệ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 cần CORS nếu có Bản nhạc. Nếu bạn muốn bật Bản nhạc cho mọi nội dung nghe nhìn, bạn phải bật CORS cho cả hai bản nhạc của mình và luồng nội dung đa phương tiện của bạn. Vì vậy, nếu bạn không có sẵn tiêu đề CORS cho nội dung nghe nhìn mp4 đơn giản trên máy chủ của bạn, sau đó bạn thêm phụ đề đơn giản bản nhạc, 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ủ của mình để 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.

Ký tự đại diện "*" Không thể sử dụng cho tiêu đề Access-Control-Allow-Origin. Nếu trang có nội dung nghe nhìn được bảo vệ thì 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 một CastSession hiện có, hãy sử dụng requestSessionById(sessionId) bằng 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 điện 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 sẽ 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 receiver.