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

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

Web Sender SDK รองรับช่วงพักโฆษณาและโฆษณาที่แสดงร่วมภายในสตรีมสื่อหนึ่งๆ

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

แม้ว่าคุณจะระบุช่วงพักได้ทั้งฝั่งผู้ส่งและผู้รับ แต่เราขอแนะนำให้ระบุช่วงพักโฆษณาในเว็บรีซีฟเวอร์และตัวรับสัญญาณ 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) หรือสร้างแอปตัวรับได้แล้ว

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