通过设备传感器捕获媒体
通过设备传感器捕获媒体
借助HTML5,可以使用标准文件输入元素通过设备的传感器(包括相机和麦克风)捕获媒体。W3C提供了一份HTML媒体捕获文档,其中描述了如何捕获媒体。
PhotoUpload示例演示了如何使用相机来捕获图像。此示例的代码位于<Amazon Apps & Games Services SDKs>/Web/Cookbook/PhotoUpload/
。可以从SDK下载页面下载网页应用SDK。
文件输入属性
将accept
和capture
属性添加到标准文件输入元素中,用户就能使用设备的传感器来捕获媒体。
accept
属性接受一组以逗号分隔的标记,其值必须为与下列值之一匹配的ASCII形式(不区分大小写)。不允许出现重复标记。
标记 | 含义 |
---|---|
audio/* | 表示接受音频文件。 |
video/* | 表示接受视频文件。 |
image/* | 表示接受图像文件。 |
不带参数的有效MIME类型 | 表示接受指定类型的文件。 |
首字符是“.”(U+002E)的字符串 | 表示接受具有指定文件扩展名的文件。 |
capture
属性是一个存在或不存在都有可能的布尔值。注意: 部分符合《W3C HTML媒体捕获规范》2012年7月12日版的早期浏览器预期会为capture
分配以下值之一:
格式化的HTML:
`capture`属性的值 | 媒体捕获控制类型 |
---|---|
camera | 相机。 |
camcorder | 视频相机。 |
microphone | 声音记录器。 |
filesystem | 通用文件选取器。 |
设备捕获要求同时存在accept
和capture
属性。如果设备不支持accept
属性中提供的MIME类型,则将忽略capture
属性。
以下示例显示了主流浏览器中使用的这些属性:
<input type="file" name="image" accept="image/*" capture>
<input type="file" name="video" accept="video/*" capture>
<input type="file" name="sound" accept="audio/*" capture>
以下示例显示了早期浏览器中使用的这些属性:
<input type="file" name="image" accept="image/*" capture="camera">
<input type="file" name="video" accept="video/*" capture="camcorder">
<input type="file" name="sound" accept="audio/*" capture="microphone">