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
ประสบการณ์การใช้งาน
- คุณจะต้องมีความรู้ด้านการพัฒนาเว็บมาก่อน
- คุณต้องมีความรู้เรื่องการดูทีวีมาก่อนด้วย :)
คุณจะใช้บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การสร้างเว็บแอปอย่างไร
คุณจะให้คะแนนประสบการณ์ในการดูทีวีอย่างไร
2. รับโค้ดตัวอย่าง
คุณสามารถดาวน์โหลดโค้ดตัวอย่างทั้งหมดลงในคอมพิวเตอร์...
และคลายการบีบอัดไฟล์ ZIP ที่ดาวน์โหลด
3. ทำให้ตัวรับใช้งานได้ภายในเครื่อง
หากต้องการใช้เว็บรีซีฟเวอร์กับอุปกรณ์แคสต์ คุณจะต้องโฮสต์เครื่องรับสัญญาณไว้ในที่ที่อุปกรณ์แคสต์เข้าถึงได้ หากคุณมีเซิร์ฟเวอร์ที่รองรับ https อยู่แล้ว ให้ข้ามวิธีการต่อไปนี้และจด URL ไว้ เนื่องจากคุณจะต้องใช้ในส่วนถัดไป
หากไม่มีเซิร์ฟเวอร์ที่พร้อมให้บริการ ให้ใช้โฮสติ้งของ Firebase หรือ ngrok
เรียกใช้เซิร์ฟเวอร์
เมื่อตั้งค่าบริการที่เลือกแล้ว ให้ไปที่ app-start
แล้วเริ่มต้นเซิร์ฟเวอร์
ให้จด URL ของผู้รับที่โฮสต์ไว้ คุณจะได้นำไปใช้ในส่วนถัดไป
4. ลงทะเบียนแอปพลิเคชันใน Cast Developer Console
คุณต้องลงทะเบียนแอปพลิเคชันเพื่อให้สามารถใช้เครื่องรับที่กำหนดเองตามที่อยู่ใน 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) ในเบราว์เซอร์
- คุณควรเห็นเครื่องมือ CaC ของเรา
- ใช้รหัสตัวรับตัวอย่าง "CC1AD845" เริ่มต้น แล้วคลิกปุ่ม "ตั้งค่ารหัสแอป"
- คลิกปุ่ม "แคสต์" ที่ด้านซ้ายบน แล้วเลือกอุปกรณ์ Google Cast
- ไปที่แท็บ "โหลดสื่อ" ที่ด้านบน
- คลิกปุ่ม "โหลดตามเนื้อหา" เพื่อเล่นวิดีโอตัวอย่าง
- วิดีโอจะเริ่มเล่นบนอุปกรณ์ Google Cast เพื่อแสดงฟังก์ชันการทำงานพื้นฐานของอุปกรณ์รับสัญญาณเมื่อใช้ตัวรับสัญญาณเริ่มต้น
6. เตรียมการเริ่มโปรเจ็กต์
เราต้องเพิ่มการรองรับ Google Cast ให้กับแอปเริ่มต้นที่คุณดาวน์โหลดมา ต่อไปนี้คือคำศัพท์ของ Google Cast ที่เราจะใช้ใน Codelab
- แอปของผู้ส่งทำงานบนอุปกรณ์เคลื่อนที่หรือแล็ปท็อป
- แอปตัวรับจะทำงานในอุปกรณ์ Google Cast
ตอนนี้คุณพร้อมที่จะสร้างโครงการเริ่มต้นเพิ่มเติมโดยใช้โปรแกรมแก้ไขข้อความที่คุณชื่นชอบแล้ว:
- เลือกไดเรกทอรี
app-start
จากการดาวน์โหลดโค้ดตัวอย่าง - เปิด
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. อุปกรณ์รับการแคสต์พื้นฐาน
เครื่องรับการแคสต์พื้นฐานจะเริ่มต้นเซสชันการแคสต์เมื่อเริ่มต้นใช้งาน ซึ่งเป็นสิ่งจำเป็นในการแจ้งให้แอปพลิเคชันของผู้ส่งที่เชื่อมต่ออยู่ทั้งหมดทราบว่าการเรียกใช้ผู้รับสำเร็จแล้ว นอกจากนี้ 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)
อย่าลืมแทนที่รหัสแอปของคุณเองตามที่ลงทะเบียนไว้ก่อนหน้านี้ในช่องและคลิก "ตั้งค่ารหัสแอป" วิธีนี้จะสั่งให้เครื่องมือใช้ตัวรับสัญญาณเมื่อเริ่มเซสชันการแคสต์
กำลังแคสต์สื่อ
หากต้องการเล่นสื่อในอุปกรณ์แคสต์ในระดับสูง จะต้องมีสิ่งต่อไปนี้เกิดขึ้น
- ผู้ส่งสร้างออบเจ็กต์
MediaInfo
JSON
จาก Cast SDK ที่จำลองรายการสื่อ - ผู้ส่งจะเชื่อมต่อกับอุปกรณ์แคสต์เพื่อเปิดแอปพลิเคชันตัวรับสัญญาณ
- รีซีฟเวอร์โหลดออบเจ็กต์
MediaInfo
ผ่านคำขอLOAD
เพื่อเล่นเนื้อหา - ผู้รับจะตรวจสอบและติดตามสถานะสื่อ
- ผู้ส่งจะส่งคำสั่งเล่นไปยังผู้รับเพื่อควบคุมการเล่นตามการโต้ตอบของผู้ใช้กับแอปของผู้ส่ง
ในความพยายามเบื้องต้นครั้งแรก เราจะเติม 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. การเพิ่มประสิทธิภาพเพื่อจออัจฉริยะ
จออัจฉริยะเป็นอุปกรณ์ที่มีฟังก์ชันการแตะซึ่งช่วยให้แอปพลิเคชันตัวรับสัญญาณรองรับการควบคุมที่เปิดใช้ระบบสัมผัส
ส่วนนี้จะอธิบายวิธีเพิ่มประสิทธิภาพแอปพลิเคชันตัวรับสัญญาณเมื่อเปิดในจออัจฉริยะ และวิธีปรับแต่งตัวควบคุมโปรแกรมเล่น
การเข้าถึงการควบคุม 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 สำหรับจออัจฉริยะจะแสดงตามตัวอย่างด้านล่าง
--playback-logo-image
MediaMetadata.subtitle
MediaMetadata.title
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.QUEUE_PREV
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.SEEK_BACKWARD_30
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.SEEK_FORWARD_30
ControlsSlot.SLOT_SECONDARY_2
:ControlsButton.QUEUE_NEXT
การควบคุมเสียง
สำหรับ MetadataType.MUSIC_TRACK
ออบเจ็กต์การควบคุม UI สำหรับจออัจฉริยะจะแสดงดังนี้
--playback-logo-image
MusicTrackMediaMetadata.albumName
MusicTrackMediaMetadata.title
MusicTrackMediaMetadata.albumArtist
MusicTrackMediaMetadata.images[0]
MediaStatus.currentTime
MediaInformation.duration
ControlsSlot.SLOT_SECONDARY_1
:ControlsButton.NO_BUTTON
ControlsSlot.SLOT_PRIMARY_1
:ControlsButton.QUEUE_PREV
PLAY/PAUSE
ControlsSlot.SLOT_PRIMARY_2
:ControlsButton.QUEUE_NEXT
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
และพร็อพเพอร์ตี้
BrowseContent.title
BrowseContent.items
สัดส่วนภาพ
ใช้ targetAspectRatio property
เพื่อเลือกสัดส่วนภาพที่ดีที่สุดสําหรับชิ้นงานรูปภาพ SDK ตัวรับสัญญาณของ CAF รองรับสัดส่วนภาพ 3 แบบ ได้แก่ SQUARE_1_TO_1
, PORTRAIT_2_TO_3
, LANDSCAPE_16_TO_9
BrowseItem
ใช้ BrowseItem
เพื่อแสดงชื่อ ชื่อรอง ระยะเวลา และรูปภาพสำหรับแต่ละรายการ
BrowseItem.image
BrowseItem.duration
BrowseItem.title
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) ร่วมในการเก็บบันทึก
การเริ่มต้น
หากต้องการผนวก 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);
}
});
เมื่อเปิดใช้ตัวบันทึกการแก้ไขข้อบกพร่อง การวางซ้อนที่แสดง 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 แล้ว
โปรดดูรายละเอียดเพิ่มเติมในคู่มือนักพัฒนาซอฟต์แวร์รับเว็บ