HTML `capture` 属性
HTML capture
属性
file
类型的 <input>
除了调起系统的文件选择框外,还可通过指定 capture
属性来现场拍照或录制。配合 accept
属性,可实现更加便捷的文件获取。
比如想要录制一段视频,可以这么写:
<input type="file" accept="video/*" capture />
点击之后直接打开摄像头进行拍摄,而不是弹起文件选择。
`capture` 属性演示
如果没有这个 capture
属性,则需要先借助 MediaDevices.getUserMedia()
获取用户的相机权限,然后再通过 MediaRecorder API 进行录制,处理得到的文件。
同样,对于拍照的情况也非常方便了,可以这么写:
<input type="file" accept="image/*" capture="camera" />
<!-- or -->
<input type="file" accept="image/*;capture=camera"/>
更多示例可参见 W3C 文档中示例部分。
浏览器兼容性
从 Can I Use - HTML Media Capture 的统计来看,支持得还不是很好。但尝试后发现 iOS 只能录制视频,即使指定 accept="audio/*"
也是调起视频录制,而不是录音。