每当按下“投射”按钮时,系统都会显示“投射”对话框。借助 Cast 对话框,用户可以与 Web 接收器连接、控制和断开连接。
如果您要开发自定义实现或构建适用于 iOS 或 Chrome 的应用,则必须以一致的方式实现此对话框,以便用户识别并信任它能够在各种设备、应用和平台上以一致的方式运行。如需查看示例,请参阅参考应用。
投放对话框,未连接(有接收器可用)
必需(
Android MediaRouter 的默认行为):
A 当发送方应用未连接到 Cast 接收器时,
点按“投放”按钮即会显示“投放”对话框
B “投射”对话框标题会显示“投放到”
C “投放”对话框会显示可用网络接收器的列表
“投放 D”
注意多用户场景:
- 当其他用户连接到当前从同一应用和帐号进行投放的接收者时,发送方应用会提供投放内容的控件。
- 当其他用户连接到当前从未投射的应用投射的接收器时,之前的发送器应用会断开连接,而新的发送器应用会连接。
Android
投放对话框,未连接
![投放对话框,未连接的图片](https://developers.google.cn/static/cast/images/a/sender-cast-menu-available1_a.png?authuser=4&hl=zh-cn)
投放主屏幕
![投放主屏幕图片](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=4&hl=zh-cn)
iOS
投放对话框,未连接
![投放对话框未连接的图片](https://developers.google.cn/static/cast/images/i/sender-cast-menu-available1_a.png?authuser=4&hl=zh-cn)
投放主屏幕
![投放主屏幕图片](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=4&hl=zh-cn)
Chrome
投放对话框,未连接
![投放对话框未连接的图片](https://developers.google.cn/static/cast/images/w/sender-cast-menu-available1_a.jpg?authuser=4&hl=zh-cn)
投放主屏幕
![投放主屏幕图片](https://developers.google.cn/static/cast/images/r/receiver-home2.png?authuser=4&hl=zh-cn)
投放对话框,未连接(仅限 iOS)
对于 iOS,首次投放时,用户必须同意允许投放设备的本地网络访问权限 (LNA)。系统向用户显示一个插页信息屏幕,说明需要此权限的原因,然后显示标准 Apple LNA 权限对话框。
首次投放后,如果在用户连接到 Wi-Fi 网络的情况下点按“投放”按钮时找不到任何设备,系统会显示一个帮助屏幕,说明 Web 接收器可能无法使用的原因(例如,本地网络访问权限已停用或 Wi-Fi 网络存在问题)。
必需:
A 首次投放:首次点按“投放”按钮后,必须显示插页式广告,以向用户说明他们为何应允许应用访问本地网络设备。插页应说明为何需要本地网络访问权限,以提高用户接受本地权限访问权限的可能性。
B 接收端不可用:点按“投放”按钮会显示一个帮助屏幕,其中说明了用户找不到 Web 接收器的可能原因,以及指向“设置”的链接(用于修复 LNA 权限问题)。
首次投放 (iOS)
首次投放:插页式广告和本地网络访问权限
![投放本地网络访问权限接受流程](https://developers.google.cn/static/cast/images/ios14/iOS14-Enable_LNA_flow1.png?authuser=4&hl=zh-cn)
接收器不可用
接收器不可用
![投放流程,本地网络访问权限已关闭](https://developers.google.cn/static/cast/images/ios14/iOS14-Enable_LNA_flow2-devicesunavail.png?authuser=4&hl=zh-cn)
投放对话框,已连接但未投放
必需
A 当发送设备应用连接到网络接收器后,点按“投射”按钮会显示投射对话框
B 投射对话框标题为“接收器名称”会显示
C 投射对话框会显示一个用于停止投射的按钮,并带有“停止投射”按钮(如需详细了解如何断开连接,请参阅停止投射)
Android
投放对话框,已连接但未投放
![](https://developers.google.cn/static/cast/images/a/sender-cast-menu-connected1_a.png?authuser=4&hl=zh-cn)
接收器应用已加载 / 空闲
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=4&hl=zh-cn)
iOS
投放对话框,已连接但未投放
![](https://developers.google.cn/static/cast/images/i/sender-cast-menu-connected1_a.png?authuser=4&hl=zh-cn)
接收器应用已加载 / 空闲
![](https://developers.google.cn/static/cast/images/r/receiver-ui-idle1.png?authuser=4&hl=zh-cn)
在投放期间投放对话框
必需
A 显示投射对话框标题“Receiver-Name”
B 当前正在投射的接收器或内容显示在标题下方
C 投射对话框会显示用于停止投射的“停止投放”按钮(如需了解详情,请参阅发送器停止投射)
最佳实践
- 为了提供最佳用户体验,除了 Cast 对话框中的控件之外,还应提供持久性控件。
Android
在投放期间投放对话框
![](https://developers.google.cn/static/cast/images/a/sender-cast-menu-active1_a.png?authuser=4&hl=zh-cn)
正在播放内容的接收器
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=4&hl=zh-cn)
iOS
在投放期间投放对话框
![](https://developers.google.cn/static/cast/images/i/sender-cast-menu-active1_a.png?authuser=4&hl=zh-cn)
正在播放内容的接收器
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=4&hl=zh-cn)
Chrome
在投放期间投放对话框
![在投放期间投放对话框](https://developers.google.cn/static/cast/images/w/sender-cast-menu-active1_a.png?authuser=4&hl=zh-cn)
正在播放内容的接收器
![](https://developers.google.cn/static/cast/images/r/receiver-content-playing1.png?authuser=4&hl=zh-cn)
本设计指南中使用的图片由 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) 版权所有 2008,Blender Foundation / www.bigbuckbunny.org