เพิ่มฟีเจอร์ขั้นสูงลงในแอป 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 ของแทร็ก

แทร็กอาจเป็นวัตถุข้อความ (คำบรรยายหรือคำบรรยายวิดีโอ) หรือออบเจ็กต์สตรีมเสียงหรือวิดีโอ Track 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) หรือสร้างแอปเครื่องรับก็ได้