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

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

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

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

`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/*" 也是调起视频录制，而不是录音。

相关资源

HTML `capture` 属性的更多相关文章

  1. 在webapp上使用input:file, 指定capture属性调用默许相机，摄像，录音功能

    ## 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用inputz之file,很有用 <input type=& ...

  2. H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...

  3. ## 在webapp上使用input:file, 指定capture属性调用默认相机，摄像，录音功能

    在iOS6下开发webapp,使用inputz之file,很有用 <input type="file" accept="image/*" capture= ...

  4. winFrom 常用控件属性及方法介绍

    目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichTextBox控件 5.NumericUpDown控件 6.Button(按钮)控件 7.Gro ...

  5. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  6. Winform 各种属性、方法、控件

    窗体是程序与用户交互的可视界面,窗体也是对象,窗体类定义了生成窗体的模版,实例化一个窗体类就产生了一个窗体. .NET框架类库的System.Windows.Forms命名空间中定义的Form类是所有 ...

  7. C#控件事件属性大全

    C#控件及常用设计整 1.窗体... 1 2.Label 控件... 3 3.TextBox 控件... 4 4.RichTextBox控件... 5 5.NumericUpDown 控件... 7 ...

  8. C# 常用控件属性及方法介绍

      C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox ...

  9. C#控件方法及属性大全，望补充

    C#控件及常用设计整理 1.窗体 常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗体的窗口状态 ...

随机推荐

  1. android studio 0.8.1使用和遇到问题解决

    谷歌6月底公布了五大系统,而且android studio同步升级到了android studio 0.8.1.升级了的android studio确实有一些新的变化.执行速度变快,而且还能够选择开发 ...

  2. C语言之基本算法25—牛顿迭代法求方程近似根

    //牛顿迭代法! /* ============================================================ 题目:用牛顿迭代法求解3*x*x*x-2*x*x-16 ...

  3. REST技术第二步 获取URL中的參数

    获取请求的參数.rest技术相对于servlet来说要方便很多. Servlet我们要获取请求的參数,非常麻烦啊.须要request.getParameter("").假设我们要的 ...

  4. 关于appcompat_v7的说明

    http://blog.csdn.net/crazykbc/article/details/21553699 问题描述: 使用eclipse创建一个Android项目时,发现project列表中会多创 ...

  5. POJ3675 Telescope 圆和多边形的交

    POJ3675 用三角剖分可以轻松搞定,数据也小 随便AC. #include<iostream> #include<stdio.h> #include<stdlib.h ...

  6. 洛谷 P1966 火柴排队 —— 思路

    题目:https://www.luogu.org/problemnew/show/P1966 首先,一个排列相邻交换变成另一个排列的交换次数就是逆序对数: 随便画一画,感觉应该是排个序,大的对应大的, ...

  7. MySQL5.7修改字符集

    本人安装的mysql版本是5.7.20,安装好mysql后就要对字符集进行修改了,于是照着网上的大部分教程说的去安装目录找一个my-default.ini文件,然后重命名为my.ini,再对其进修改字 ...

  8. 函数bsxfun，两个数组间元素逐个计算的二值操作

    转自http://www.cnblogs.com/rong86/p/3559616.html 函数功能:两个数组间元素逐个计算的二值操作 使用方法:C=bsxfun(fun,A,B) 两个数组A合B间 ...

  9. 使用Advanced Installer14.3 简单打包windows窗体应用程序

    1.新建项目工程(我使用的是企业版) 2.完善产品细节 3.应用程序文件夹 a.自动同步文件夹(也可以右键添加文件或文件夹) b.新建卸载快捷方式 c.卸载清理 4.安装参数 5.媒介配置 6.生成或 ...

  10. bzoj 1596: [Usaco2008 Jan]电话网络【贪心】

    dfs,如果一个点的儿子.本身.父亲都没有塔,就在父亲上建一个 原理不明-- #include<iostream> #include<cstdio> using namespa ...