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

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

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 Callback เพื่อรักษา ในผู้ส่ง ดูการอัปเดตสถานะ เพื่อดูข้อมูลเพิ่มเติม
  • แอปผู้ส่งต้องไม่ตั้งระดับเสียงที่ระดับเสียงที่กำหนดไว้ล่วงหน้า หรือตั้งระดับเสียงให้เป็นระดับเสียงเรียกเข้า/ระดับเสียงของสื่อของผู้ส่งเมื่อ ที่แอปโหลดบนเครื่องรับ

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

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

ระบบสามารถส่ง 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();
  }
});

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

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

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