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

Sam Dutton

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

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

ด้านล่างนี้คือข้อมูลเบื้องต้นเกี่ยวกับการสร้างแอปตัวส่ง Cast โดยใช้ Web SDK ดูข้อมูลโดยละเอียดเพิ่มเติมได้ที่คู่มือการพัฒนาแอป Chrome Sender

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

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

เพิ่มการเรียกกลับเพื่อจัดการความพร้อมใช้งานของ API และเริ่มต้นเซสชัน Cast (อย่าลืมเพิ่มตัวแฮนเดิลก่อนที่ระบบจะโหลด 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);
}

หากคุณใช้แอปพลิเคชัน Styled Media Receiver เริ่มต้น ไม่ใช่แอปพลิเคชัน Custom Receiver ที่ลงทะเบียนเอง คุณสามารถสร้าง 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
  }
}

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

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);
}


    // ...

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

การแจ้งเตือนการเล่น/หยุดชั่วคราวของ Cast

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

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

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

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

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

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

อุปกรณ์ส่งและรับสัญญาณสำรอง

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

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

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

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

เราจะคอยแจ้งความคืบหน้าในการติดตั้งใช้งานให้คุณทราบ

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

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