Google Cast สำหรับ Chrome บน Android

แซม ดัตตัน

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

Chrome รุ่นล่าสุดบน Android อนุญาตให้เว็บไซต์นำเสนอไปยังอุปกรณ์ Google Cast โดยใช้ SDK ของเว็บแคสต์ ซึ่งหมายความว่าคุณสามารถสร้างแอปของผู้ส่ง Cast โดยใช้ Web SDK กับ Chrome บน Android หรือ iOS (หรือบนเดสก์ท็อปที่มีส่วนขยาย) รวมถึงสร้างแอปที่ใช้ Cast SDK แบบดั้งเดิมสำหรับ Android และ iOS ได้ด้วย (ก่อนหน้านี้ แอปพลิเคชันผู้ส่ง Google Cast ต้องการส่วนขยาย Google Cast ใน Chrome ดังนั้นใน Android จึงสามารถโต้ตอบกับอุปกรณ์แคสต์จากแอปที่มาพร้อมเครื่องเท่านั้น)

ด้านล่างคือคำแนะนำสั้นๆ เกี่ยวกับการสร้างแอปตัวส่งการแคสต์โดยใช้ SDK ของเว็บ ดูข้อมูลที่ครอบคลุมมากขึ้นได้จากคู่มือการพัฒนาแอปผู้ส่ง Chrome

ทุกหน้าที่ใช้ Cast ต้องมีไลบรารี Cast ดังนี้

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

เพิ่มโค้ดเรียกกลับเพื่อจัดการความพร้อมใช้งานของ API และเริ่มต้นเซสชันการแคสต์ (อย่าลืมเพิ่มเครื่องจัดการก่อนที่ API จะโหลด):

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

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

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

โค้ดเรียกกลับ receiverListener ข้างต้นจะทำงานเมื่อมีอุปกรณ์อย่างน้อย 1 เครื่องพร้อมใช้งาน:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

เปิดเซสชัน Cast เมื่อผู้ใช้คลิกไอคอน "แคสต์" ตามที่ระบุไว้ในหลักเกณฑ์ด้านประสบการณ์ของผู้ใช้

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

ผู้ใช้จะเห็นเครื่องมือเลือกอุปกรณ์ ดังนี้

กล่องโต้ตอบการเลือกอุปกรณ์แคสต์

กล่องโต้ตอบรายละเอียดเส้นทางจะแสดงเมื่อมีการเชื่อมต่อหน้าเว็บแล้วและเรียกใช้ requestSession():

กล่องโต้ตอบรายละเอียดเส้นทางการแคสต์

เมื่อมีเซสชันการแคสต์แล้ว คุณสามารถโหลดสื่อสำหรับอุปกรณ์แคสต์ที่เลือก และเพิ่ม Listener สำหรับเหตุการณ์การเล่นสื่อได้โดยทำดังนี้

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

ตัวแปร currentMedia ในที่นี้คือออบเจ็กต์ chrome.cast.media.Media ซึ่งใช้ในการควบคุมการเล่นได้

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

การแจ้งเตือนการเล่น/หยุดชั่วคราวจะแสดงเมื่อสื่อกำลังเล่นอยู่:

การแจ้งเตือน &quot;แคสต์เล่น/หยุดชั่วคราว&quot;

หากไม่มีการเล่นสื่อ การแจ้งเตือนจะมีเฉพาะปุ่มหยุดเพื่อหยุดแคสต์ ดังนี้

การแจ้งเตือนการหยุดแคสต์

โค้ดเรียกกลับ sessionListener สำหรับ chrome.cast.ApiConfig() (ดูด้านบน) ทำให้แอปของคุณเข้าร่วมหรือจัดการเซสชันการแคสต์ที่มีอยู่ได้

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

หาก Chrome ใน Android อนุญาตให้แคสต์สื่อจากเว็บไซต์ แต่คุณต้องการปิดใช้ฟีเจอร์นี้เพื่อให้ UI การแคสต์เริ่มต้นไม่รบกวนการทำงานของคุณเอง ให้ใช้แอตทริบิวต์ disableRemotePlayback ที่มีอยู่ใน Chrome 49 ขึ้นไป ดังนี้

<video disableRemotePlayback src="..."></video>

อุปกรณ์ Alt Sender และตัวรับสัญญาณ

คู่มือ SDK ของเว็บ Cast มีลิงก์ไปยังตัวอย่างแอปและข้อมูลเกี่ยวกับฟีเจอร์ต่างๆ ของ Cast เช่น การจัดการเซสชัน แทร็กข้อความ (สำหรับคำบรรยายและคำบรรยาย) และการอัปเดตสถานะ

ปัจจุบันคุณสามารถนำเสนอไปยังแอปพลิเคชันตัวรับสัญญาณ Cast ที่ใช้ Cast Web SDK ได้เท่านั้น แต่เรากำลังอยู่ระหว่างดำเนินการให้สามารถใช้ Presentation API โดยไม่ต้องใช้ Cast SDK (บนเดสก์ท็อปและ Android) เพื่อนำเสนอหน้าเว็บใดๆ ไปยังอุปกรณ์แคสต์โดยไม่ต้องลงทะเบียนกับ Google การใช้ API มาตรฐานจะทำให้หน้าเว็บสามารถทำงานร่วมกับ User Agent และอุปกรณ์อื่นๆ ที่รองรับ API นี้ได้ ซึ่งแตกต่างจาก Cast SDK สำหรับ Chrome เท่านั้น

งานนำเสนอ API พร้อมด้วย API การเล่นระยะไกล เป็นส่วนหนึ่งของกลุ่มการทำงานหน้าจอที่ 2 เพื่อให้หน้าเว็บใช้หน้าจอที่ 2 เพื่อแสดงเนื้อหาเว็บได้

API เหล่านี้ใช้ประโยชน์จากอุปกรณ์มากมายที่ออนไลน์ ซึ่งรวมถึงจอแสดงผลที่เชื่อมต่อซึ่งเรียกใช้ User Agent เพื่อเปิดใช้แอปพลิเคชันที่หลากหลายโดยใช้อุปกรณ์ "ควบคุม" และอุปกรณ์ "จอแสดงผล"

เราจะแจ้งให้ทราบเกี่ยวกับความคืบหน้าในการใช้งาน

ในระหว่างนี้ โปรดแจ้งให้เราทราบ หากคุณพบข้อบกพร่องหรือมีคำขอฟีเจอร์: crbug.com/new

ดูข้อมูลเพิ่มเติม