HTML `capture` 属性_html-js-css

概述file 类型的 <input> 除了调起系统的文件选择框外，还可通过指定 capture 属性来现场拍照或录制。配合 accept 属性，可实现更加便捷的文件获取。比如想要录制一段视频，可以这么写： <input type="file" accept="video/*" capture /> 点击之后直接打开摄像头进行拍摄，而不是d起文件选择。 `capture` 属性演示如果没有这个 ca

file 类型的 <input> 除了调起系统的文件选择框外，还可通过指定 capture 属性来现场拍照或录制。配合 accept 属性，可实现更加便捷的文件获取。

比如想要录制一段视频，可以这么写：

<input type="file" accept="vIDeo/*" capture />

点击之后直接打开摄像头进行拍摄，而不是d起文件选择。

`capture` 属性演示

如果没有这个 capture 属性，则需要先借助 Media?Devices?.get?User?Media() 获取用户的相机权限，然后再通过 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/*" 也是调起视频录制，而不是录音。

相关资源 w3c/html-media-capture W3C - HTML Media Capture Can I Use - HTML Media Capture Capturing Audio & Video in HTML5 HTML file input control with capture and accept attributes works wrong?

总结

以上是内存溢出为你收集整理的HTML `capture` 属性全部内容，希望文章能够帮你解决HTML `capture` 属性所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1071716.html