รูปภาพรอง

นักพัฒนาซอฟต์แวร์ Cast สามารถเพิ่มรูปภาพให้ข้อมูล (รอง) ลงใน UI สำหรับแอปพลิเคชันเสียงและวิดีโอ ดูรูปแบบรูปภาพที่รองรับเพื่อดูความเข้ากันได้

รูปภาพรองจะปรากฏที่ด้านขวาบนของจอแสดงผล และสามารถใช้เพื่อแสดงกราฟิกที่มีข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่กำลังเล่นอยู่ เช่น รูปแบบเนื้อหา สัญญาณเรียกขานของสถานีวิทยุ หรือการจัดประเภทรายการทีวี รูปภาพรองจะยังคงอยู่บนหน้าจอตราบใดที่ฟีเจอร์ดังกล่าวเปิดอยู่สำหรับเนื้อหาปัจจุบันและโปรแกรมเล่นไม่อยู่ในสถานะไม่มีการใช้งาน

ตารางที่ 1 แสดงประสบการณ์ของผู้ใช้เมื่อเปิดใช้ฟีเจอร์ในประเภทอุปกรณ์และการควบคุมที่เกี่ยวข้อง รายละเอียดการใช้งานและการผสานรวมแตกต่างกันเล็กน้อยระหว่างแอปเสียงและวิดีโอ ดูส่วนด้านล่างเพื่อผสานรวมฟีเจอร์นี้ในแอปเว็บรีซีฟเวอร์

ตารางที่ 1: UI ของรูปภาพรองแยกตามเนื้อหาและประเภทอุปกรณ์

ประเภทอุปกรณ์	เนื้อหาเสียง	เนื้อหาวิดีโอ
Chromecast
Chromecast พร้อม Google TV
จออัจฉริยะ
รีโมตคอนโทรลของจออัจฉริยะ		หมายเหตุ: ไม่รองรับรูปภาพรองบนรีโมตคอนโทรลสำหรับเนื้อหาวิดีโอ

เสียง

ภาพรวม

ส่วนรูปภาพที่รองของเนื้อหาเสียงนั้นขับเคลื่อนด้วยข้อมูลเมตาของเนื้อหาที่โหลด เมื่อโหลดรายการสื่อแล้ว การเปลี่ยนแปลงพร็อพเพอร์ตี้ secondaryImage ของข้อมูลเมตาในภายหลังจะแสดงใน UI

หากใช้ Smart Display เป็นรีโมตคอนโทรลสำหรับเสียง รูปภาพรองจะปรากฏใน UI ของจออัจฉริยะด้วยเมื่อตั้งค่าไว้

หมายเหตุ: เราขอแนะนำให้นักพัฒนาซอฟต์แวร์ของ Cast ใช้ UI เสียงเริ่มต้นที่ให้ไว้ผ่านองค์ประกอบ <cast-media-player> ของ Web Receiver การใช้ UI เริ่มต้นจะมอบประสบการณ์ของผู้ใช้ที่สอดคล้องกันทั้งใน Chromecast, Smart Display และ Chromecast พร้อม Google TV โดยมีค่าใช้จ่ายน้อยที่สุด ระบบไม่รองรับคุณลักษณะรูปภาพรอง สำหรับแอปที่ใช้ UI ที่กำหนดเอง การตั้งค่านี้ไม่มีผลกับรีโมตคอนโทรล เนื่องจากจะแสดงรูปภาพรองเสมอเมื่อตั้งค่า

การใช้งาน

หากต้องการตั้งค่า นำออก หรืออัปเดตรูปภาพรอง คุณต้องแก้ไขพร็อพเพอร์ตี้ secondaryImage ของ MusicTrackMediaMetadata พร็อพเพอร์ตี้จะดึงออบเจ็กต์ Image ขึ้นมาพร้อมกับ URL ซึ่งอธิบายตำแหน่งที่โฮสต์รูปภาพรอง

ในตัวอย่างด้านล่าง รูปภาพรองตั้งค่าในตัวตรวจจับ load เมื่อโปรแกรมเล่นโหลดเนื้อหาเสร็จแล้ว รูปภาพรองจะปรากฏขึ้น

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

หากต้องการอัปเดตรูปภาพรองระหว่างการเล่น แอปพลิเคชันควรใช้ PlayerManager เพื่อรับ MediaInformation โดยเรียกใช้ getMediaInformation จากนั้นแอปพลิเคชันควรแก้ไข metadata โดยการอัปเดตพร็อพเพอร์ตี้ secondaryImage เป็นค่าที่ต้องการ สุดท้าย การเรียกใช้ setMediaInformation ด้วยข้อมูลใหม่จะอัปเดต UI เมธอดนี้ใช้จัดการกับการเปลี่ยนแปลงข้อมูลเมตาที่ให้ไว้ผ่านการอัปเดต เช่น เหตุการณ์ EMSG หรือ ID3 ระหว่างการเล่นได้

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

หากต้องการยกเลิกการตั้งค่ารูปภาพรอง ให้ตั้งค่าพร็อพเพอร์ตี้ secondaryImage เป็น Null ในออบเจ็กต์ข้อมูลเมตา

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

วิดีโอ

ภาพรวม

สำหรับเนื้อหาวิดีโอ ระบบจะตั้งค่าและนำรูปภาพรองออกโดยใช้ UiManager รูปภาพรองจะแสดงโดยมีการวางซ้อนการควบคุมวิดีโอ

การใช้งาน

หากต้องการตั้งค่าอิมเมจรอง แอปพลิเคชันต้องได้รับอินสแตนซ์ UiManager และเรียกใช้ setSecondaryImage จะมีพารามิเตอร์ 2 ตัว ได้แก่ SecondaryImagePosition และ URL ของรูปภาพ การตั้งค่ารูปภาพรองนั้นทำได้ทุกเมื่อ แต่จะแสดงเฉพาะเมื่อผู้ใช้ทริกเกอร์การวางซ้อนที่เบื้องหน้า

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

การนำรูปภาพรองออกนั้นทำได้โดยตั้งค่า URL ของรูปภาพเป็น null หรือสตริงว่าง

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

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

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