กล่องโต้ตอบ "แคสต์" จะแสดงขึ้นเมื่อใดก็ตามที่กดปุ่ม "แคสต์" กล่องโต้ตอบการแคสต์ช่วยให้ผู้ใช้ เชื่อมต่อ ควบคุม และยกเลิกการเชื่อมต่อกับเว็บรีซีฟเวอร์
หากคุณพัฒนาการติดตั้งที่กำหนดเอง หรือสร้างแอปสำหรับ iOS หรือ Chrome คุณต้อง ใช้กล่องโต้ตอบนี้ให้มีความสม่ำเสมอ เพื่อให้ผู้ใช้จดจำและเชื่อว่าให้ทำงานได้ อย่างสอดคล้องกันในอุปกรณ์ แอป และแพลตฟอร์มต่างๆ โปรดดู แอปอ้างอิงเพื่อดูตัวอย่าง
กล่องโต้ตอบการแคสต์ ไม่ได้เชื่อมต่อ (เครื่องรับพร้อมใช้งาน)
จำเป็น (ลักษณะการทำงานเริ่มต้นของ
Android MediaRouter)
A เมื่อแอปผู้ส่งไม่ได้เชื่อมต่อกับเครื่องรับการแคสต์
การแตะปุ่ม "แคสต์" จะทำให้กล่องโต้ตอบ "แคสต์" ปรากฏขึ้น
B ชื่อกล่องโต้ตอบการแคสต์ "แคสต์ไปยัง" ปรากฏ
C กล่องโต้ตอบ "แคสต์" จะแสดงรายการเว็บรีซีฟเวอร์ที่พร้อมใช้งาน
D ตัวรับสัญญาณแต่ละเครื่องที่กำลังแคสต์อยู่ควรแสดงข้อความ "กำลังแคสต์
ชื่อแอป"
โปรดทราบว่าสถานการณ์ที่มีผู้ใช้หลายคนมีดังนี้
- เมื่อผู้ใช้รายอื่นเชื่อมต่อกับตัวรับสัญญาณที่กำลังแคสต์อยู่ จากแอปและบัญชีเดียวกัน แอปผู้ส่งจะมีการควบคุม สำหรับการแคสต์
- เมื่อผู้ใช้รายอื่นเชื่อมต่อกับตัวรับสัญญาณที่กำลังแคสต์อยู่ จากแอปที่ไม่ได้แคสต์อยู่ แอปผู้ส่งก่อนหน้า ยกเลิกการเชื่อมต่อและแอปผู้ส่งใหม่จะเชื่อมต่อ
Android
ไม่ได้เชื่อมต่อกล่องโต้ตอบการแคสต์
![กล่องโต้ตอบแคสต์ ไม่ใช่รูปภาพที่เชื่อมต่อกัน](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-available1_a.png?authuser=5&hl=th)
แคสต์หน้าจอหลัก
![แคสต์รูปภาพหน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=th)
iOS
ไม่ได้เชื่อมต่อกล่องโต้ตอบการแคสต์
![รูปภาพไม่ได้เชื่อมต่อกล่องโต้ตอบการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-available1_a.png?authuser=5&hl=th)
แคสต์หน้าจอหลัก
![แคสต์รูปภาพหน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=th)
Chrome
ไม่ได้เชื่อมต่อกล่องโต้ตอบการแคสต์
![รูปภาพไม่ได้เชื่อมต่อกล่องโต้ตอบการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-menu-available1_a.jpg?authuser=5&hl=th)
แคสต์หน้าจอหลัก
![แคสต์รูปภาพหน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=5&hl=th)
กล่องโต้ตอบการแคสต์ ไม่ได้เชื่อมต่อ (iOS เท่านั้น)
สำหรับ iOS เมื่อแคสต์เป็นครั้งแรก ผู้ใช้ต้องให้ความยินยอมในการอนุญาตการเข้าถึงเครือข่ายภายใน (LNA) อุปกรณ์แคสต์ แสดงหน้าจอข้อมูลคั่นระหว่างหน้า แก่ผู้ใช้เพื่ออธิบายเหตุผลที่ต้องใช้สิทธิ์นี้ ตามด้วย Apple LNA มาตรฐาน กล่องโต้ตอบสิทธิ์
หลังจากแคสต์เป็นครั้งแรก หากไม่พบอุปกรณ์เมื่อแตะปุ่ม "แคสต์" ขณะที่ ผู้ใช้เชื่อมต่อ Wi-Fi อยู่ ระบบแสดงหน้าจอความช่วยเหลือ ซึ่งอธิบายสาเหตุที่เว็บรีซีฟเวอร์อาจใช้งานไม่ได้ (ตัวอย่างเช่น การเข้าถึงเครือข่าย LAN ปิดอยู่ หรือเครือข่าย Wi-Fi มีปัญหา)
จำเป็น:
A การแคสต์ครั้งแรก: หลังจากแตะปุ่ม "แคสต์"
เป็นครั้งแรก
คุณจะต้องแสดงโฆษณาคั่นระหว่างหน้าเพื่ออธิบายให้ผู้ใช้ทราบเหตุผลที่ควรอนุญาต
เข้าถึงอุปกรณ์เครือข่าย LAN โฆษณาคั่นระหว่างหน้าควรมีข้อมูลเกี่ยวกับ
ทำไมจึงต้องมีการเข้าถึงเครือข่าย LAN เพื่อเพิ่มแนวโน้มที่ผู้ใช้จะยอมรับ
การเข้าถึงสิทธิ์ภายในเครื่อง
B ตัวรับสัญญาณไม่พร้อมใช้งาน: แตะปุ่ม "แคสต์"
แสดงหน้าจอช่วยเหลือที่อธิบายสาเหตุที่เป็นไปได้ที่ผู้ใช้
ไม่พบ Web Receiver รวมถึงลิงก์ไปยังการตั้งค่าเพื่อแก้ปัญหาสิทธิ์ LNA
การแคสต์ครั้งแรก (iOS)
การแคสต์ครั้งแรก: สิทธิ์การเข้าถึงโฆษณาคั่นระหว่างหน้าและสิทธิ์การเข้าถึงเครือข่ายภายใน
![ขั้นตอนการยอมรับการเข้าถึงเครือข่ายภายในของ Cast](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/ios14/iOS14-Enable_LNA_flow1.png?authuser=5&hl=th)
ตัวรับไม่พร้อมใช้งาน
ตัวรับไม่พร้อมใช้งาน
![ขั้นตอนการแคสต์ การเข้าถึงเครือข่ายภายในปิดอยู่](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/ios14/iOS14-Enable_LNA_flow2-devicesunavail.png?authuser=5&hl=th)
กล่องโต้ตอบแคสต์ เชื่อมต่อแล้ว แต่ยังไม่ได้แคสต์
ต้องระบุ
A เมื่อแอปผู้ส่งเชื่อมต่อกับตัวรับเว็บแล้ว
การแตะปุ่ม "แคสต์" จะทำให้กล่องโต้ตอบ "แคสต์" ปรากฏขึ้น
B ชื่อกล่องโต้ตอบการแคสต์ "ชื่อผู้รับ" ปรากฏ
C กล่องโต้ตอบ "แคสต์" แสดงปุ่มเพื่อหยุดแคสต์
ที่มีป้ายกำกับว่า "หยุดแคสต์" (ดูข้อมูลเพิ่มเติมเกี่ยวกับการยกเลิกการเชื่อมต่อได้ที่
ผู้ส่งหยุดแคสต์)
Android
กล่องโต้ตอบการแคสต์เชื่อมต่ออยู่แต่ไม่ได้แคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1_a.png?authuser=5&hl=th)
โหลดแอปตัวรับสัญญาณแล้ว / ไม่ได้ใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=th)
iOS
กล่องโต้ตอบการแคสต์เชื่อมต่ออยู่แต่ไม่ได้แคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1_a.png?authuser=5&hl=th)
โหลดแอปตัวรับสัญญาณแล้ว / ไม่ได้ใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=5&hl=th)
กล่องโต้ตอบการแคสต์ขณะแคสต์
ต้องระบุ
A ชื่อกล่องโต้ตอบการแคสต์ "ชื่อผู้รับ" ปรากฏ
B เครื่องรับหรือเนื้อหาที่กำลังแคสต์จะแสดงที่ด้านล่าง
ชื่อ
C กล่องโต้ตอบการแคสต์แสดงข้อความ "หยุดแคสต์" ปุ่มหยุด
แคสต์ (สำหรับข้อมูลเพิ่มเติม โปรดดู
ผู้ส่งหยุดแคสต์)
แนวทางปฏิบัติแนะนำ
- ระบุเพื่อประสบการณ์ของผู้ใช้ที่ดีที่สุด การควบคุมแบบถาวร นอกเหนือจากตัวควบคุมในกล่องโต้ตอบแคสต์
Android
กล่องโต้ตอบการแคสต์ขณะแคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-active1_a.png?authuser=5&hl=th)
ตัวรับที่กำลังเล่นเนื้อหา
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=5&hl=th)
iOS
กล่องโต้ตอบการแคสต์ขณะแคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-active1_a.png?authuser=5&hl=th)
ตัวรับที่กำลังเล่นเนื้อหา
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=5&hl=th)
Chrome
กล่องโต้ตอบการแคสต์ขณะแคสต์
![กล่องโต้ตอบการแคสต์ขณะแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-menu-active1_a.png?authuser=5&hl=th)
ตัวรับที่กำลังเล่นเนื้อหา
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-playing1.png?authuser=5&hl=th)
รูปภาพที่ใช้ในคู่มือการออกแบบนี้ ได้รับความเอื้อเฟื้อจาก Blender Foundation ที่แชร์ภายใต้ลิขสิทธิ์หรือสัญญาอนุญาตครีเอทีฟคอมมอนส์
- Elephant's Dream: (c) ลิขสิทธิ์ 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (c) ลิขสิทธิ์ Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org