เพิ่มฟีเจอร์ขั้นสูงลงในแอป 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 ผู้ส่งรายงานระดับเสียงต่อผู้รับเสมอ ใช้ Callback 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 ไปยังผู้ส่งใน Callback ในกรณีนี้ 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();
  }
});

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

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

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