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. GSON学习笔记之初识GSON

    引用"JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,採用全然独立于语言的文本格式.为Web应用开发提供了一种理想的数据交换格式. " ...

  2. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...

  3. Message: SyntaxError: unterminated string literal

    #Message: SyntaxError: unterminated string literalmytxt = words.replace('\n','').replace('\r','') js ...

  4. H264--2--语法及结构[5]

    名词解释 场和帧 :    视频的一场或一帧可用来产生一个编码图像.在电视中,为减少大面积闪烁现象,把一帧分成两个隔行的场. 片:             每个图象中,若干宏块被排列成片的形式.片分为 ...

  5. [RK3288][Android6.0] 调试笔记 --- 录音音量从HAL到APP层会变小问题【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/72783843?locationNum=9&fps=1 Platform: Rockc ...

  6. how to modify vs2017

    https://docs.microsoft.com/en-us/visualstudio/install/modify-visual-studio 直接用everything搜索vs_install ...

  7. POJ 2728 Desert King (最优比例生成树)

    POJ2728 无向图中对每条边i 有两个权值wi 和vi 求一个生成树使得 (w1+w2+...wn-1)/(v1+v2+...+vn-1)最小. 采用二分答案mid的思想. 将边的权值改为 wi- ...

  8. 洛谷P2827 蚯蚓——思路题

    题目:https://www.luogu.org/problemnew/show/P2827 思路... 用优先队列模拟做的话,时间主要消耗在每次的排序上: 能不能不要每次排序呢? 关注先后被砍的两条 ...

  9. 在sql语句中使用关键字

    背景 开发过程中遇到了遇到了一句sql语句一直报错,看了一下字段名和表名都对应上了,但是还是一直报错 sql语句如下: update table set using = ""hh ...

  10. event.target 属性返回哪个 DOM 元素触发了事件。

    <ul> <li>list <strong>item 1</strong></li> <li><span>list ...