เพิ่มฟีเจอร์ขั้นสูงลงในแอป Web Sender

ช่วงพักโฆษณา

SDK ของผู้ส่งเว็บให้การสนับสนุนช่วงพักโฆษณาและโฆษณาที่แสดงร่วมภายในสตรีมสื่อที่ระบุ

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทํางานของช่วงพักโฆษณาได้ในภาพรวมช่วงพักโฆษณาของโปรแกรมรับข้อมูลเว็บ

แม้ว่าจะระบุช่วงพักโฆษณาทั้งในผู้ส่งและผู้รับได้ แต่เราขอแนะนําให้คุณระบุช่วงพักในตัวรับสัญญาณของเว็บและตัวรับสัญญาณ Android TV เพื่อคงลักษณะการทํางานที่สอดคล้องกันในทุกแพลตฟอร์ม

ในเว็บ ให้ระบุช่วงพักโฆษณาในคําสั่งโหลดโดยใช้ BreakClip และ 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)

การใช้ API การติดตาม

แทร็กอาจเป็นออบเจ็กต์ข้อความ (คําบรรยายหรือคําอธิบายภาพ) หรือออบเจ็กต์สตรีมเสียงหรือสตรีมก็ได้ API การติดตามช่วยให้คุณทํางานกับวัตถุเหล่านี้ในแอปพลิเคชันของคุณ

ออบเจ็กต์ Track แสดงถึงแทร็กใน SDK คุณกําหนดค่าแทร็กและกําหนดรหัสที่ไม่ซ้ํากันให้กับแทร็กได้ ดังนี้

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;

รายการสื่ออาจมีหลายแทร็ก เช่น อาจมีคําบรรยายหลายแทร็ก (แต่ละรายการสําหรับภาษาต่างๆ) หรือสตรีมเสียงทางเลือกหลายรายการ (สําหรับภาษาต่างๆ)

MediaInfo คือคลาสที่จําลองรายการสื่อ หากต้องการเชื่อมโยงคอลเล็กชันของออบเจ็กต์ Track กับรายการสื่อ คุณจะต้องอัปเดตพร็อพเพอร์ตี้ของ tracks การเชื่อมโยงนี้จําเป็นก่อนที่จะโหลดสื่อไปยังเครื่องรับ

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;

คุณตั้งค่าแทร็กที่มีการใช้งานในคําขอสื่อ activeTrackIds ได้

นอกจากนี้คุณยังเปิดใช้งานแทร็กอย่างน้อย 1 รายการที่เชื่อมโยงกับรายการสื่อหลังจากที่โหลดสื่อแล้วได้โดยการเรียกใช้ EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) และส่งรหัสของแทร็กที่จะมีการเปิดใช้งานใน opt_activeTrackIds หมายเหตุ ทั้ง 2 พารามิเตอร์นี้เป็นพารามิเตอร์ที่ไม่บังคับ ซึ่งคุณจะเลือกได้ว่าต้องการตั้งค่าอย่างไรสําหรับแทร็กหรือสไตล์ที่ใช้งานอยู่ โดยขึ้นอยู่กับเงื่อนไขที่คุณกําหนด ตัวอย่างเช่น วิธีการเปิดใช้งานคําบรรยายภาษาฝรั่งเศส (2) และเสียงภาษาฝรั่งเศส (3) มีดังนี้

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

ในการนําแทร็กเสียงหรือวิดีโอทั้งหมดออกจากสื่อปัจจุบัน เพียงตั้งค่า mediaInfo.tracks=null (อาร์เรย์ที่ว่างเปล่า) แล้วโหลดสื่อซ้ํา

หากต้องการนําแทร็กข้อความทั้งหมดออกจากสื่อปัจจุบัน (เช่น ปิดคําบรรยาย) ให้ทําอย่างใดอย่างหนึ่งต่อไปนี้

  • อัปเดต var activeTrackIds = [2, 3]; (ตามที่แสดงก่อนหน้า) เพื่อให้มีแทร็กเสียงเท่านั้น [3]
  • ตั้งค่า mediaInfo.tracks=null โปรดทราบว่าไม่จําเป็นต้องโหลดสื่อซ้ําเพื่อปิดคําอธิบายภาพข้อความ (track.hidden) การส่งอาร์เรย์ activeTracksId ที่ไม่มี trackId ที่เปิดใช้ไว้ก่อนหน้านี้จะปิดใช้งานแทร็กข้อความ

การจัดรูปแบบข้อความ

TextTrackStyle เป็นออบเจ็กต์ที่สรุปข้อมูลการจัดรูปแบบของแทร็กข้อความ หลังจากสร้างหรืออัปเดตออบเจ็กต์ TextTrackStyle ที่มีอยู่ คุณจะนํารายการดังกล่าวไปใช้กับรายการสื่อที่เล่นอยู่ในปัจจุบันได้โดยเรียกใช้เมธอด editTrackInfo ดังนี้

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

คุณสามารถติดตามสถานะคําขอที่มีการเรียกกลับ ไม่ว่าจะเป็นสําเร็จหรือข้อผิดพลาด และอัปเดตผู้ส่งต้นทางให้สอดคล้องกัน

แอปพลิเคชันควรอนุญาตให้ผู้ใช้อัปเดตรูปแบบของแทร็กข้อความ โดยใช้การตั้งค่าที่กําหนดโดยระบบหรือโดยแอปพลิเคชัน

คุณจัดรูปแบบองค์ประกอบรูปแบบแทร็กข้อความต่อไปนี้ได้

  • สีและความทึบแสงของพื้นหน้า (ข้อความ)
  • สีและความโปร่งแสงของพื้นหลัง
  • ชนิดขอบ
  • สีขอบ
  • ขนาดอักษร
  • ชุดแบบอักษร
  • รูปแบบตัวอักษร

ตัวอย่างเช่น ตั้งค่าสีของข้อความเป็นสีแดงโดยมีความทึบแสง 75% ดังนี้

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

การควบคุมระดับเสียง

คุณใช้ RemotePlayer และ RemotePlayerController เพื่อตั้งระดับเสียงของผู้รับได้

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

แอปผู้ส่งควรปฏิบัติตามหลักเกณฑ์ต่อไปนี้เพื่อควบคุมระดับเสียง

  • แอปพลิเคชันของผู้ส่งต้องซิงค์กับผู้รับ เพื่อให้ UI ของผู้ส่งรายงานระดับเสียงตามผู้รับเสมอ ใช้การเรียกกลับ RemotePlayerEventType.VOLUME_LEVEL_CHANGED และ RemotePlayerEventType.IS_MUTED_CHANGED เพื่อรักษาระดับเสียงของผู้ส่ง ดูการอัปเดตสถานะสําหรับข้อมูลเพิ่มเติม
  • แอปของผู้ส่งต้องไม่ตั้งค่าระดับเสียงที่ระดับที่กําหนดไว้ล่วงหน้า หรือตั้งค่าระดับเสียงเป็นระดับเสียงเรียกเข้า/เสียงของอุปกรณ์ของผู้ส่งเมื่อ แอปโหลดในอุปกรณ์รับสัญญาณ

ดูการควบคุมระดับเสียงของผู้ส่งในรายการตรวจสอบการออกแบบ

การส่งข้อความสื่อไปยังผู้รับ

Media Messages สามารถส่งจากผู้ส่งไปยังผู้รับได้ ตัวอย่างเช่น หากต้องการส่งข้อความ SKIP_AD ไปยังผู้รับ ให้ทําดังนี้

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

การอัปเดตสถานะ

เมื่อผู้ส่งหลายรายเชื่อมต่อกับผู้รับเดียวกัน ผู้ส่งแต่ละรายจะต้องรับรู้ถึงการเปลี่ยนแปลงของผู้รับ แม้ว่าการเปลี่ยนแปลงเหล่านั้นจะเริ่มจากผู้ส่งรายอื่น

ในกรณีนี้ แอปพลิเคชันควรลงทะเบียน Listener ที่จําเป็นทั้งหมดใน RemotePlayerController หาก TextTrackStyle ของสื่อปัจจุบันมีการเปลี่ยนแปลง ระบบจะส่งผู้ส่งที่เชื่อมต่อทั้งหมด และพร็อพเพอร์ตี้ที่เกี่ยวข้องของเซสชันสื่อปัจจุบัน เช่น activeTrackIds และ textTrackStyle ของช่อง MediaInfo ไปยังผู้ส่งในการเรียกกลับ ในกรณีนี้ SDK ของตัวรับจะไม่ยืนยันว่ารูปแบบใหม่ต่างจากรูปแบบเดิมหรือไม่ และจะแจ้งให้ผู้ส่งที่เชื่อมต่อทั้งหมดทราบ

สัญญาณบอกสถานะความคืบหน้า

แอปส่วนใหญ่ต้องมีตําแหน่งการเล่นพร้อมสัญญาณบอกสถานะความคืบหน้าที่ผู้ส่ง Cast API ใช้โปรโตคอลสื่อของ Cast ซึ่งเพิ่มประสิทธิภาพการใช้แบนด์วิดท์สําหรับสถานการณ์นี้และสถานการณ์อื่นๆ คุณจึงไม่ต้องใช้การซิงค์ข้อมูลสถานะของคุณเอง สําหรับการแสดงตัวบ่งชี้ความคืบหน้าที่เหมาะสมสําหรับการเล่นสื่อโดยใช้ API โปรดดูแอปตัวอย่าง CastVideos-chrome

ข้อกําหนดของ CORS

สําหรับการสตรีมสื่อแบบปรับอัตโนมัติ Google Cast จําเป็นต้องมีส่วนหัว CORS แต่แม้แต่สตรีมสื่อ mp4 แบบง่ายก็ยังต้องมี CORS หากมีแทร็ก หากต้องการเปิดใช้แทร็กสําหรับสื่อใดก็ตาม คุณต้องเปิดใช้ CORS สําหรับทั้งสตรีมแทร็กและสตรีมสื่อ ดังนั้น หากคุณไม่มีส่วนหัว CORS ที่ใช้ได้กับสื่อ mp4 แบบง่ายในเซิร์ฟเวอร์ของคุณ แล้วเพิ่มแทร็กคําบรรยายแบบง่ายๆ คุณจะไม่สามารถสตรีมสื่อได้ นอกจากคุณจะอัปเดตเซิร์ฟเวอร์ให้มีส่วนหัว CORS ที่เหมาะสม

คุณต้องมีส่วนหัวต่อไปนี้ Content-Type,Accept-Encoding และ Range โปรดทราบว่าส่วนหัว 2 รายการสุดท้ายคือ Accept-Encoding และ Range คือส่วนหัวเพิ่มเติมที่คุณอาจไม่เคยใช้มาก่อน

ใช้ไวลด์การ์ด "*" สําหรับส่วนหัว Access-Control-Allow-Origin ไม่ได้ หากหน้ามีเนื้อหาสื่อที่มีการป้องกัน หน้าจะต้องใช้โดเมนแทนสัญลักษณ์แทน

ดําเนินการเซสชันต่อโดยไม่โหลดหน้าเว็บซ้ํา

หากต้องการให้ CastSession กลับมาทํางานอีกครั้ง ให้ใช้ requestSessionById(sessionId) กับ sessionId ของเซสชันที่คุณพยายามจะเข้าร่วม

พบ sessionId ได้ใน CastSession ที่ใช้งานอยู่โดยใช้ getSessionId() หลังจากโทร loadMedia()

วิธีการที่แนะนํามีดังนี้

  1. โทรหา loadMedia() เพื่อเริ่มเซสชัน
  2. จัดเก็บ sessionId ไว้ในเครื่อง
  3. เข้าร่วมเซสชันอีกครั้งโดยใช้ requestSessionById(sessionId) เมื่อจําเป็น
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();
  }
});

ขั้นตอนถัดไป

การดําเนินการนี้จะสรุปฟีเจอร์ต่างๆ ที่คุณเพิ่มลงในแอป Web Sender ได้ ในตอนนี้คุณสามารถสร้างแอปผู้ส่งสําหรับแพลตฟอร์มอื่น (Android หรือ iOS) หรือสร้างแอปตัวรับ

ก่อนหน้า
ผสานรวมการแคสต์