สร้างเว็บรีซีฟเวอร์ที่กำหนดเอง

1. ภาพรวม

Codelab นี้จะสอนวิธีสร้างแอป Custom Web Receiver เพื่อเล่นเนื้อหาในอุปกรณ์ที่พร้อมใช้งาน Cast

Google Cast คืออะไร

Google Cast ช่วยให้ผู้ใช้แคสต์เนื้อหาจากอุปกรณ์เคลื่อนที่ไปยังทีวีได้ จากนั้นผู้ใช้จะใช้อุปกรณ์เคลื่อนที่หรือเบราว์เซอร์ Chrome บนเดสก์ท็อปเป็นรีโมตคอนโทรลในการเล่นสื่อบนทีวีได้

Google Cast SDK ช่วยให้แอปของคุณควบคุมอุปกรณ์ที่พร้อมใช้งาน Google Cast ได้ (เช่น ทีวีหรือระบบเสียง) Cast SDK มีคอมโพเนนต์ UI ที่จำเป็นให้คุณตามรายการตรวจสอบการออกแบบของ Google Cast

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

เรากำลังจะสร้างอะไร

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

สิ่งที่คุณจะได้เรียนรู้

• วิธีตั้งค่าสำหรับการพัฒนาผู้รับ
• พื้นฐานของเครื่องรับที่พร้อมใช้งาน Cast โดยอิงตามเฟรมเวิร์กแอปพลิเคชัน Cast
• วิธีรับวิดีโอที่แคสต์
• วิธีผสานรวมตัวบันทึกการแก้ไขข้อบกพร่อง
• วิธีเพิ่มประสิทธิภาพตัวรับสำหรับ Smart Display

สิ่งที่ต้องมี

• เบราว์เซอร์ Google Chrome เวอร์ชันล่าสุด
• บริการโฮสติ้ง HTTPS เช่น โฮสติ้งของ Firebase หรือ ngrok
• อุปกรณ์ Google Cast เช่น Chromecast หรือ Android TV ที่กำหนดค่าด้วยการเข้าถึงอินเทอร์เน็ต
• ทีวีหรือจอภาพที่มีอินพุต HDMI

ประสบการณ์การใช้งาน

• คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
• คุณต้องมีความรู้เรื่องการดูทีวีมาก่อนด้วย :)

หากพบปัญหาเกี่ยวกับเครือข่าย

หากอยู่ในสถานที่ที่เครือข่าย Wi-Fi ไม่เสถียร คุณสามารถใช้อะแดปเตอร์อีเทอร์เน็ตสำหรับ Chromecast หรือสำหรับ Chromecast พร้อม Google TV เพื่อต่อสายอุปกรณ์ Chromecast

แคสต์เอกสารประกอบไหม

เรามีเอกสารประกอบที่ครอบคลุมสำหรับผู้ส่ง, iOS, Android และ Chrome

คุณจะใช้บทแนะนำนี้อย่างไร

อ่านเท่านั้น อ่านและทำแบบฝึกหัด

คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร

ผู้ฝึกหัด ระดับกลาง ผู้ชำนาญ

คุณจะให้คะแนนประสบการณ์ในการดูทีวีอย่างไร

ผู้ฝึกหัด ระดับกลาง ผู้ชำนาญ

2. รับโค้ดตัวอย่าง

คุณสามารถดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์...

ดาวน์โหลดต้นฉบับ

และคลายการบีบอัดไฟล์ ZIP ที่ดาวน์โหลด

ที่เก็บโค้ดรีซีฟเวอร์มีโปรเจ็กต์ตัวอย่าง 2 โปรเจ็กต์ ได้แก่

• app-start - โค้ดเริ่มต้นที่คุณจะสร้างขึ้นใน Codelab นี้
• app-done - โค้ดที่สมบูรณ์สำหรับแอปวิดีโอตัวอย่างที่ทำเสร็จแล้ว

3. ทำให้ตัวรับใช้งานได้ภายในเครื่อง

หากต้องการใช้เว็บรีซีฟเวอร์กับอุปกรณ์แคสต์ คุณจะต้องโฮสต์เครื่องรับสัญญาณไว้ในที่ที่อุปกรณ์แคสต์เข้าถึงได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจด URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป

หากไม่มีเซิร์ฟเวอร์ที่พร้อมให้บริการ ให้ใช้โฮสติ้งของ Firebase หรือ ngrok

เรียกใช้เซิร์ฟเวอร์

เมื่อตั้งค่าบริการที่เลือกแล้ว ให้ไปที่ app-start แล้วเริ่มต้นเซิร์ฟเวอร์

ให้จด URL ของผู้รับที่โฮสต์ไว้ คุณจะได้นำไปใช้ในส่วนถัดไป

4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console

หากไม่มีบัญชีนักพัฒนาแอป Cast

ลงชื่อสมัครใช้บัญชีในแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK และชำระค่าลงทะเบียน

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

คลิก "เพิ่มแอปพลิเคชันใหม่"

เลือก "ตัวรับสัญญาณที่กำหนดเอง" ซึ่งเป็นสิ่งที่เรากำลังสร้าง

ป้อนรายละเอียดของผู้รับใหม่ อย่าลืมใช้ URL ที่คุณลงท้ายด้วย

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

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

คลิก "เพิ่มอุปกรณ์ใหม่"

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

ตัวรับสัญญาณและอุปกรณ์จะพร้อมสำหรับการทดสอบอาจใช้เวลา 5-15 นาที หลังจากรอ 5-15 นาที คุณต้องรีบูตอุปกรณ์แคสต์

5. เรียกใช้แอปตัวอย่าง

ระหว่างที่เรารอให้แอปพลิเคชันฝั่งผู้รับใหม่พร้อมใช้งานสำหรับการทดสอบ มาดูกันว่าตัวอย่างแอปตัวรับที่เสร็จสมบูรณ์จะเป็นอย่างไร รีซีฟเวอร์ที่เราจะสร้างจะสามารถเล่นสื่อโดยใช้การสตรีมแบบปรับอัตราบิตได้ (เราจะใช้เนื้อหาตัวอย่างที่เข้ารหัสสำหรับการสตรีมแบบปรับอัตโนมัติผ่าน HTTP (DASH))

เปิดเครื่องมือ Command and Control (CaC) ในเบราว์เซอร์

1. คุณควรเห็นเครื่องมือ CaC ของเรา
2. ใช้รหัสตัวรับตัวอย่าง "CC1AD845" เริ่มต้น แล้วคลิกปุ่ม "ตั้งค่ารหัสแอป"
3. คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ Google Cast

4. ไปที่แท็บ "โหลดสื่อ" ที่ด้านบน

5. คลิกปุ่ม "โหลดตามเนื้อหา" เพื่อเล่นวิดีโอตัวอย่าง
6. วิดีโอจะเริ่มเล่นบนอุปกรณ์ Google Cast เพื่อแสดงฟังก์ชันการทำงานพื้นฐานของอุปกรณ์รับสัญญาณเมื่อใช้ตัวรับสัญญาณเริ่มต้น

6. เตรียมการเริ่มโปรเจ็กต์

เราต้องเพิ่มการรองรับ Google Cast ให้กับแอปเริ่มต้นที่คุณดาวน์โหลดมา ต่อไปนี้คือคำศัพท์ของ Google Cast ที่เราจะใช้ใน Codelab

• แอปของผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
• แอปตัวรับจะทำงานในอุปกรณ์ Google Cast

ตอนนี้คุณพร้อมที่จะสร้างโครงการเริ่มต้นเพิ่มเติมโดยใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบแล้ว:

1. เลือกไดเรกทอรี app-start จากการดาวน์โหลดโค้ดตัวอย่าง
2. เปิด js/receiver.js และ index.html

โปรดทราบว่าขณะที่คุณใช้ Codelab นี้ http-server ควรดำเนินการตามการเปลี่ยนแปลงที่คุณทำ หากไม่เห็น ให้ลองปิดและรีสตาร์ท http-server

การออกแบบแอป

แอปผู้รับจะเริ่มต้นเซสชันการแคสต์และจะสแตนด์บายจนกว่าคำขอ LOAD (คือคำสั่งให้เล่นสื่อ) จากผู้ส่งมาถึง

แอปประกอบด้วยมุมมองหลัก 1 มุมมอง ซึ่งกำหนดไว้ใน index.html และไฟล์ JavaScript 1 ไฟล์ที่เรียกว่า js/receiver.js ที่มีตรรกะทั้งหมดเพื่อทำให้ตัวรับทำงานของเราทำงานได้

index.html

ไฟล์ HTML นี้จะมี UI สำหรับแอปตัวรับสัญญาณของเรา ตอนนี้ไฟล์นี้ยังว่างอยู่และเราจะเพิ่ม UI ไว้ในห้องทดลองโค้ด

receiver.js

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

7. อุปกรณ์รับการแคสต์พื้นฐาน

หากต้องการทราบข้อมูลทั้งหมดที่ต้องการ

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

เครื่องรับการแคสต์พื้นฐานจะเริ่มต้นเซสชันการแคสต์เมื่อเริ่มต้นใช้งาน ซึ่งเป็นสิ่งจำเป็นในการแจ้งให้แอปพลิเคชันของผู้ส่งที่เชื่อมต่ออยู่ทั้งหมดทราบว่าการเรียกใช้ผู้รับสำเร็จแล้ว นอกจากนี้ SDK ใหม่ยังกำหนดค่าไว้ล่วงหน้าเพื่อจัดการสื่อสตรีมมิงแบบอัตราบิตที่ปรับเปลี่ยนได้ (โดยใช้ DASH, HLS และ Smooth Streaming) และไฟล์ MP4 แบบธรรมดาพร้อมใช้งานได้ในตัว มาลองกันเลย

การเริ่มต้น

เพิ่มโค้ดต่อไปนี้ลงใน index.html ในส่วนหัว

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

เพิ่มโค้ดต่อไปนี้ลงใน index.html <body> ก่อน <footer> กำลังโหลดreceiver.js, เพื่อให้ SDK ของตัวรับมีพื้นที่สำหรับเรียก UI ของผู้รับเริ่มต้นซึ่งจัดส่งด้วยสคริปต์ที่คุณเพิ่งเพิ่ม

<cast-media-player></cast-media-player>

ในตอนนี้เราต้องเริ่มต้น SDK ใน js/receiver.js ซึ่งประกอบด้วย

• การรับการอ้างอิงไปยัง CastReceiverContext ซึ่งเป็นจุดแรกเข้าหลักไปยัง SDK ตัวรับทั้งหมด
• การจัดเก็บการอ้างอิงไปยัง PlayerManager ซึ่งเป็นการจัดการการเล่นและการให้ฮุกทั้งหมดที่จำเป็นสำหรับคุณในการเสียบตรรกะที่คุณกำหนดเอง
• กำลังเริ่มต้น SDK โดยการเรียกใช้ start() ใน CastReceiverContext

เพิ่มรายการต่อไปนี้ลงใน js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

8. การแคสต์เนื้อหาวิดีโอ "พื้นฐาน"

สำหรับ Codelab นี้ ให้ใช้เครื่องมือ CaC เพื่อลองใช้รีซีฟเวอร์ใหม่

ชี้เว็บเบราว์เซอร์ไปที่เครื่องมือ Command and Control (CaC)

อย่าลืมแทนที่รหัสแอปของคุณเองตามที่ลงทะเบียนไว้ก่อนหน้านี้ในช่องและคลิก "ตั้งค่ารหัสแอป" วิธีนี้จะสั่งให้เครื่องมือใช้ตัวรับสัญญาณเมื่อเริ่มเซสชันการแคสต์

กำลังแคสต์สื่อ

หากต้องการเล่นสื่อในอุปกรณ์แคสต์ในระดับสูง จะต้องมีสิ่งต่อไปนี้เกิดขึ้น

1. ผู้ส่งสร้างออบเจ็กต์ MediaInfo JSON จาก Cast SDK ที่จำลองรายการสื่อ
2. ผู้ส่งจะเชื่อมต่อกับอุปกรณ์แคสต์เพื่อเปิดแอปพลิเคชันตัวรับสัญญาณ
3. รีซีฟเวอร์โหลดออบเจ็กต์ MediaInfo ผ่านคำขอ LOAD เพื่อเล่นเนื้อหา
4. ผู้รับจะตรวจสอบและติดตามสถานะสื่อ
5. ผู้ส่งจะส่งคำสั่งเล่นไปยังผู้รับเพื่อควบคุมการเล่นตามการโต้ตอบของผู้ใช้กับแอปของผู้ส่ง

ในความพยายามเบื้องต้นครั้งแรก เราจะเติม MediaInfo ด้วย URL ของเนื้อหาที่เล่นได้ (เก็บไว้ใน MediaInfo.contentUrl)

ผู้ส่งจริงใช้ตัวระบุสื่อเฉพาะแอปพลิเคชันใน MediaInfo.contentId ผู้รับจะใช้ contentId เป็นตัวระบุในการเรียก API แบ็กเอนด์ที่เหมาะสมเพื่อแก้ไข URL ของเนื้อหาจริงและตั้งค่าเป็น MediaInfo.contentUrl. นอกจากนี้ ผู้รับจะจัดการงานต่างๆ เช่น การขอรับใบอนุญาต DRM หรือการแทรกข้อมูลเกี่ยวกับช่วงพักโฆษณาด้วย

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

ไปที่แท็บ "โหลดสื่อ" แล้วคลิกปุ่ม "โหลดตามเนื้อหา" ผู้รับควรเริ่มเล่นเนื้อหาตัวอย่าง

SDK รีซีฟเวอร์จะจัดการดังนี้

• กำลังเริ่มต้นเซสชันการแคสต์
• จัดการคำขอ LOAD ที่เข้ามาใหม่จากผู้ส่งซึ่งมีเนื้อหาที่เล่นได้
• จัดเตรียม UI โปรแกรมเล่นพื้นฐานที่พร้อมแสดงในหน้าจอขนาดใหญ่

ลองสำรวจเครื่องมือ CaC และโค้ดของเครื่องมือก่อนไปต่อในส่วนถัดไป ซึ่งเราจะขยายตัวรับด้วยการพูดคุยกับ API ตัวอย่างง่ายๆ เพื่อดำเนินการตามคำขอขาเข้า LOAD จากผู้ส่ง

9. ผสานรวมกับ API ภายนอก

เราจะแก้ไขรีซีฟเวอร์ให้จัดการคำขอ LOAD ที่อ้างอิงเนื้อหาสื่อที่ต้องการด้วยคีย์ API แทนการส่ง URL เนื้อหาที่เล่นได้ เพื่อให้เป็นไปตามวิธีที่นักพัฒนาซอฟต์แวร์ส่วนใหญ่โต้ตอบกับเครื่องรับการแคสต์ในแอปพลิเคชันการใช้งานจริง

แอปพลิเคชันมักดำเนินการเช่นนี้เนื่องจากสาเหตุต่อไปนี้

• โดยผู้ส่งอาจไม่ทราบ URL ของเนื้อหา
• แอปพลิเคชัน Cast ออกแบบมาเพื่อจัดการการตรวจสอบสิทธิ์ ตรรกะทางธุรกิจอื่นๆ หรือการเรียก API โดยตรงบนเครื่องรับ

ฟังก์ชันนี้มีการใช้งานในเมธอด PlayerManager setMessageInterceptor() เป็นหลัก วิธีนี้ช่วยให้คุณดักจับข้อความขาเข้าตามประเภทและแก้ไขก่อนที่จะส่งถึงเครื่องจัดการข้อความภายในของ SDK ได้ ในส่วนนี้เราจะจัดการกับคำขอ LOAD รายการ โดยจะดำเนินการดังต่อไปนี้

• อ่านคำขอ LOAD ที่เข้ามาและ contentId ที่กำหนดเองของคำขอ
• โปรดเรียก GET ไปยัง API ของเราเพื่อค้นหาเนื้อหาที่สตรีมได้ภายในวันที่ contentId
• แก้ไขคำขอ LOAD ด้วย URL ของสตรีม
• แก้ไขออบเจ็กต์ MediaInformation เพื่อตั้งค่าพารามิเตอร์ประเภทสตรีม
• ส่งคำขอไปยัง SDK เพื่อเล่น หรือปฏิเสธคำขอหากเราค้นหาสื่อที่ขอไม่ได้

ตัวอย่าง API ที่ให้ไว้จะแสดงฮุกของ SDK สำหรับการปรับแต่งงานตัวรับสัญญาณทั่วไป ในขณะเดียวกันก็ยังคงอาศัยประสบการณ์การใช้งานที่พร้อมใช้งานทันที

API ตัวอย่าง

เปิดเบราว์เซอร์แล้วไปที่ https://storage.googleapis.com/cpe-sample-media/content.json และดูตัวอย่างแคตตาล็อกวิดีโอของเรา เนื้อหาจะมี URL สำหรับภาพโปสเตอร์ในรูปแบบ png รวมถึงสตรีม DASH และ HLS สตรีม DASH และ HLS จะชี้ไปยังแหล่งที่มาของวิดีโอและเสียงภายนอกซึ่งจัดเก็บไว้ในคอนเทนเนอร์ mp4 แบบแยกส่วน

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

ในขั้นตอนถัดไป เราจะจับคู่คีย์ของแต่ละรายการ (เช่น bbb, fbb_ad ) กับ URL ของสตรีมหลังจากเรียกผู้รับด้วยคำขอ LOAD

สกัดกั้นคำขอ LOAD

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

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js ก่อนโทรหา context.start()

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

ส่วนถัดไปจะสรุปวิธีกำหนดค่าพร็อพเพอร์ตี้ media ของคำขอโหลดสำหรับเนื้อหา DASH

การใช้เนื้อหา DASH ตัวอย่างสำหรับ API

ตอนนี้เราได้เตรียมตัวตรวจจับการโหลดแล้ว เราจะระบุประเภทเนื้อหาไปยังผู้รับ ข้อมูลนี้จะมอบ URL ของเพลย์ลิสต์หลักและประเภท MIME ของสตรีมให้กับผู้รับ เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js ใน Promise() ของตัวสกัดกั้น LOAD

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

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

การใช้เนื้อหา HLS ของ API ตัวอย่าง

API ตัวอย่างประกอบด้วยเนื้อหา HLS และ DASH นอกเหนือจากการตั้งค่า contentType เหมือนที่เราทำในขั้นตอนก่อนหน้าแล้ว คำขอโหลดจะต้องมีพร็อพเพอร์ตี้เพิ่มเติมบางอย่างเพื่อใช้ URL HLS ของ API ตัวอย่าง เมื่อกำหนดค่าให้ตัวรับเล่นสตรีม HLS ประเภทคอนเทนเนอร์เริ่มต้นที่คาดไว้คือ Transport Stream (TS) ดังนั้น ผู้รับจะพยายามเปิดสตรีม MP4 ตัวอย่างในรูปแบบ TS หากมีการแก้ไขเพียงพร็อพเพอร์ตี้ contentUrl เท่านั้น ในคำขอโหลด ควรแก้ไขออบเจ็กต์ MediaInformation ด้วยพร็อพเพอร์ตี้เพิ่มเติมเพื่อให้ผู้รับรู้ว่าเนื้อหาเป็นประเภท MP4 ไม่ใช่ TS เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js ในตัวตรวจจับการโหลดเพื่อแก้ไขพร็อพเพอร์ตี้ contentUrl และ contentType นอกจากนี้ให้เพิ่มพร็อพเพอร์ตี้ HlsSegmentFormat และ HlsVideoSegmentFormat ด้วย

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

ทดสอบเลย

เปิด Command and Control (CaC) Tool อีกครั้ง แล้วตั้งค่า App ID เป็น App ID ของผู้รับ เลือกอุปกรณ์โดยใช้ปุ่ม "แคสต์"

ไปที่แท็บ "โหลดสื่อ" ครั้งนี้ให้ ลบ ข้อความในช่อง "URL เนื้อหา" ข้างปุ่ม "โหลดตามเนื้อหา" ที่จะบังคับให้แอปพลิเคชันของเราส่งคำขอ LOAD ที่มีเฉพาะการอ้างอิง contentId ไปยังสื่อของเรา

สมมติว่าทุกอย่างแก้ไขตัวรับได้อย่างราบรื่น ผู้สกัดกั้นควรปรับแต่งออบเจ็กต์ MediaInfo ให้อยู่ในรูปแบบที่ SDK เล่นบนหน้าจอได้

คลิกปุ่ม "โหลดตามเนื้อหา" เพื่อดูว่าสื่อของคุณเล่นอย่างถูกต้องหรือไม่ คุณจะเปลี่ยน Content ID เป็นรหัสอื่นในไฟล์ content.json ได้

10. การเพิ่มประสิทธิภาพเพื่อจออัจฉริยะ

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

ส่วนนี้จะอธิบายวิธีเพิ่มประสิทธิภาพแอปพลิเคชันตัวรับสัญญาณเมื่อเปิดในจออัจฉริยะ และวิธีปรับแต่งตัวควบคุมโปรแกรมเล่น

การปรับแต่งนี้ใช้องค์ประกอบ <cast-media-player> ของ UI โปรแกรมเล่นที่มีอยู่ใน CAF หากไม่ได้ใช้องค์ประกอบนี้ การติดตามสถานะ UI, การสร้างแบรนด์ และการปรับแต่งอื่นๆ ต้องดำเนินการด้วยตนเอง

หากคุณใช้อุปกรณ์แคสต์ใหม่ที่เปิดใช้งานระบบสัมผัส อย่าลืมลงทะเบียนอุปกรณ์ในคอนโซลของนักพัฒนาซอฟต์แวร์ Cast SDK คุณสามารถทําตามขั้นตอนที่ระบุไว้ในส่วนที่ 3 ของ Codelab นี้เพื่อการอ้างอิง

การเข้าถึงการควบคุม UI

เข้าถึงออบเจ็กต์การควบคุม UI สำหรับจออัจฉริยะได้โดยใช้ cast.framework.ui.Controls.GetInstance() เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js เหนือ context.start()

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

หากไม่ได้ใช้องค์ประกอบ <cast-media-player> คุณจะต้องตั้งค่า touchScreenOptimizedApp ใน CastReceiverOptions ใน Codelab นี้ เราจะใช้องค์ประกอบ <cast-media-player>

context.start({ touchScreenOptimizedApp: true });

มีการกำหนดปุ่มควบคุมเริ่มต้นให้กับช่องโฆษณาแต่ละช่องตาม MetadataType และ MediaStatus.supportedMediaCommands

การควบคุมวิดีโอ

สำหรับ MetadataType.MOVIE, MetadataType.TV_SHOW และ MetadataType.GENERIC ออบเจ็กต์การควบคุม UI สำหรับจออัจฉริยะจะแสดงตามตัวอย่างด้านล่าง

1. --playback-logo-image
2. MediaMetadata.subtitle
3. MediaMetadata.title
4. MediaStatus.currentTime
5. MediaInformation.duration
6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
8. PLAY/PAUSE
9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

การควบคุมเสียง

สำหรับ MetadataType.MUSIC_TRACK ออบเจ็กต์การควบคุม UI สำหรับจออัจฉริยะจะแสดงดังนี้

1. --playback-logo-image
2. MusicTrackMediaMetadata.albumName
3. MusicTrackMediaMetadata.title
4. MusicTrackMediaMetadata.albumArtist
5. MusicTrackMediaMetadata.images[0]
6. MediaStatus.currentTime
7. MediaInformation.duration
8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
10. PLAY/PAUSE
11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

กำลังอัปเดตคำสั่งสื่อที่รองรับ

ออบเจ็กต์ตัวควบคุม UI จะกำหนดด้วยว่า ControlsButton จะแสดงหรือไม่อิงตาม MediaStatus.supportedMediaCommands

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อค่าของ supportedMediaCommands เท่ากับ PAUSE | QUEUE_PREV | QUEUE_NEXT เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อมีแทร็กข้อความ ปุ่มคำบรรยายจะปรากฏที่ SLOT_1 เสมอ

หากต้องการเปลี่ยนค่า supportedMediaCommands แบบไดนามิกหลังจากเริ่มบริบทผู้รับ คุณสามารถเรียกใช้ PlayerManager.setSupportedMediaCommands เพื่อลบล้างค่าได้ นอกจากนี้ คุณยังเพิ่มคำสั่งใหม่ได้โดยใช้ addSupportedMediaCommands หรือนําคำสั่งที่มีอยู่ออกโดยใช้ removeSupportedMediaCommands

การปรับแต่งปุ่มควบคุม

คุณปรับแต่งการควบคุมได้โดยใช้ PlayerDataBinder เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js ใต้ touchControls เพื่อตั้งค่าช่องโฆษณาอันดับแรกของการควบคุม:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

11. การใช้การเรียกดูสื่อบนจออัจฉริยะ

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

BrowseContent

ด้านล่างนี้เป็นตัวอย่าง UI ของ BrowseContent และพร็อพเพอร์ตี้

1. BrowseContent.title
2. BrowseContent.items

สัดส่วนภาพ

ใช้ targetAspectRatio property เพื่อเลือกสัดส่วนภาพที่ดีที่สุดสําหรับชิ้นงานรูปภาพ SDK ตัวรับสัญญาณของ CAF รองรับสัดส่วนภาพ 3 แบบ ได้แก่ SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9

BrowseItem

ใช้ BrowseItem เพื่อแสดงชื่อ ชื่อรอง ระยะเวลา และรูปภาพสำหรับแต่ละรายการ

1. BrowseItem.image
2. BrowseItem.duration
3. BrowseItem.title
4. BrowseItem.subtitle

ตั้งค่าข้อมูลการเรียกดูสื่อ

คุณระบุรายการเนื้อหาสื่อสำหรับการเรียกดูได้โดยเรียกใช้ setBrowseContent เพิ่มโค้ดต่อไปนี้ลงในไฟล์ js/receiver.js ใต้ playerDataBinder และใน Listener เหตุการณ์ MEDIA_CHANGED เพื่อตั้งค่ารายการเรียกดูที่มีชื่อเป็น "รายการถัดไป"

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

การคลิกที่รายการเรียกดูสื่อจะทริกเกอร์ตัวตรวจจับ LOAD เพิ่มโค้ดต่อไปนี้ลงในตัวตรวจจับ LOAD เพื่อจับคู่ request.media.contentId กับ request.media.entity จากรายการเรียกดูสื่อ

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

คุณยังตั้งค่าออบเจ็กต์ BrowseContent เป็น null เพื่อนำ UI การเรียกดูสื่อออกได้ด้วย

12. การแก้ไขข้อบกพร่องของแอปตัวรับสัญญาณ

SDK ของตัวรับการแคสต์มอบอีกตัวเลือกหนึ่งให้นักพัฒนาซอฟต์แวร์ในการแก้ไขข้อบกพร่องของแอปตัวรับได้อย่างง่ายดาย โดยใช้ CastDebugLogger API และเครื่องมือ Command and Control (CaC) ร่วมในการเก็บบันทึก

★ หมายเหตุ:

หากต้องการใช้ Cast Debug Logger API คุณต้องลงทะเบียนอุปกรณ์แคสต์บนแผงควบคุมสำหรับนักพัฒนาซอฟต์แวร์ Google Cast SDK และใช้เฟิร์มแวร์ของอุปกรณ์เวอร์ชัน 1.44 ขึ้นไป

การเริ่มต้น

หากต้องการผนวก API ให้เพิ่มสคริปต์แหล่งที่มา CastDebugLogger ในไฟล์ index.html ของคุณ ควรประกาศแหล่งที่มาในแท็ก <head> หลังการประกาศ SDK ของเครื่องรับการแคสต์

<head>
  ...
  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
  <!-- Cast Debug Logger -->
  <script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>

ใน js/receiver.js ที่ด้านบนของไฟล์และใต้ playerManager ให้เพิ่มโค้ดต่อไปนี้เพื่อเรียกข้อมูลอินสแตนซ์ CastDebugLogger และเปิดใช้ตัวบันทึก:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

คำเตือน: อย่าลืมเปลี่ยน setEnabled เป็น "เท็จ" สำหรับตัวรับสัญญาณที่ใช้งานจริง

เมื่อเปิดใช้ตัวบันทึกการแก้ไขข้อบกพร่อง การวางซ้อนที่แสดง DEBUG MODE จะปรากฏในตัวรับ

เหตุการณ์ของเครื่องเล่นบันทึก

การใช้ CastDebugLogger ช่วยให้คุณบันทึกเหตุการณ์ของโปรแกรมเล่นที่ SDK ตัวรับสัญญาณ CAF เริ่มทำงานได้อย่างง่ายดาย และใช้ตัวบันทึกระดับต่างๆ เพื่อบันทึกข้อมูลเหตุการณ์ การกำหนดค่า loggerLevelByEvents ใช้ cast.framework.events.EventType และ cast.framework.events.category เพื่อระบุเหตุการณ์ที่จะบันทึก

เพิ่มโค้ดต่อไปนี้ใต้การประกาศ castDebugLogger เพื่อบันทึกเมื่อมีการทริกเกอร์เหตุการณ์ CORE ของผู้เล่นหรือการเปลี่ยนแปลง mediaStatus ออกอากาศ

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      castDebugLogger.setEnabled(true);
  }
});

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

ข้อความในบันทึกและแท็กที่กำหนดเอง

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

• castDebugLogger.error(custom_tag, message);
• castDebugLogger.warn(custom_tag, message);
• castDebugLogger.info(custom_tag, message);
• castDebugLogger.debug(custom_tag, message);

สำหรับวิธีบันทึกแต่ละวิธี พารามิเตอร์แรกคือแท็กที่กำหนดเอง ซึ่งอาจเป็นสตริงระบุตัวใดๆ ก็ตามที่มีความหมายสำหรับคุณ CastDebugLogger ใช้แท็กเพื่อกรองบันทึก การใช้แท็กจะมีการอธิบายรายละเอียดเพิ่มเติมด้านล่าง พารามิเตอร์ที่ 2 คือข้อความบันทึก

หากต้องการแสดงการทำงานของบันทึก ให้เพิ่มบันทึกไปยังตัวตรวจจับ LOAD

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

คุณควบคุมข้อความที่จะปรากฏในการวางซ้อนการแก้ไขข้อบกพร่องได้โดยตั้งค่าระดับการบันทึกใน loggerLevelByTags สำหรับแท็กที่กำหนดเองแต่ละรายการ ตัวอย่างเช่น การเปิดใช้แท็กที่กําหนดเองซึ่งมีระดับการบันทึก cast.framework.LoggerLevel.DEBUG จะแสดงข้อความทั้งหมดที่เพิ่มพร้อมข้อผิดพลาด คําเตือน ข้อมูล และข้อความบันทึกการแก้ไขข้อบกพร่อง การเปิดใช้แท็กที่กำหนดเองด้วยระดับ WARNING จะแสดงเฉพาะข้อความแสดงข้อผิดพลาดและคำเตือนข้อความบันทึก

การกำหนดค่า loggerLevelByTags เป็นตัวเลือกที่ไม่บังคับ หากไม่ได้กำหนดค่าแท็กที่กำหนดเองสำหรับระดับตัวบันทึก ข้อความบันทึกทั้งหมดจะแสดงบนการวางซ้อนการแก้ไขข้อบกพร่อง

เพิ่มโค้ดต่อไปนี้ใต้บันทึกเหตุการณ์ CORE

// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
  'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
  'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

การวางซ้อนการแก้ไขข้อบกพร่อง

ตัวบันทึกการแก้ไขข้อบกพร่องของแคสต์จะมีการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับเพื่อแสดงข้อความบันทึกที่กำหนดเองในอุปกรณ์แคสต์ ใช้ showDebugLogs เพื่อเปิดหรือปิดการวางซ้อนการแก้ไขข้อบกพร่อง และใช้ clearDebugLogs เพื่อล้างข้อความบันทึกในการวางซ้อน

เพิ่มโค้ดต่อไปนี้เพื่อดูตัวอย่างการวางซ้อนการแก้ไขข้อบกพร่องบนตัวรับ

context.addEventListener(cast.framework.system.EventType.READY, () => {
  if (!castDebugLogger.debugOverlayElement_) {
      // Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
      castDebugLogger.setEnabled(true);

      // Show debug overlay
      castDebugLogger.showDebugLogs(true);

      // Clear log messages on debug overlay
      castDebugLogger.clearDebugLogs();
  }
});

13. ขอแสดงความยินดี

ตอนนี้คุณรู้วิธีสร้างแอปพลิเคชันเว็บรีซีฟเวอร์ที่กำหนดเองโดยใช้ SDK ของ Cast Web Receiver แล้ว

โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์รับเว็บ

หากต้องการแคสต์เพิ่มเติม

ลองดูห้องทดลองอื่นๆ ของ Cast และแอปตัวอย่างของเราบน GitHub