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. Ajax使用JSON数据格式

    1: •JSON(JavaScriptObject  Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不须 ...

  2. HttpUtils 发送http请求工具类

    import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URISyntaxEx ...

  3. JavaScript基础 -- 定时器

     js 定时器有以下两个方法: setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. set ...

  4. URL 字段简析

    URL:统一资源定位符:URL是uri的一个子集,另外一个子集是URN. URL语法:(来自HTTP权威指南中文版P29) 组件 描述 默认值 方案 访问服务器以获取资源时要使用哪种协议 无 用户 某 ...

  5. Minimizing Maximizer

    题意: 最少需要多少个区间能完全覆盖整个区间[1,n] 分析: dp[i]表示覆盖[1,i]最少需要的区间数,对于区间[a,b],dp[b]=min(dp[a...b-1])+1;用线段树来维护区间最 ...

  6. [Codeforces 1037D] Valid BFS？

    [题目链接] http://codeforces.com/problemset/problem/1037/D [算法] 首先求出每个点的父节点 , 每棵子树的大小 然后判断BFS序是否合法即可 时间复 ...

  7. [Codeforces Round 486A] Fair

    [题目链接] https://codeforces.com/contest/986/problem/A [算法] 用dist(i,j)表示第i种食物运到第j个城市需要的最小代价 将所有特产为第i中食物 ...

  8. 【152】C# 操作 Excel 杂记

    前面写了一篇博文是关于 C# 操作 Excel 的文章,但是里面有些中规中矩,搞的我不知道怎么写了,所以另开一帖.. 注意:基本应用如下所示! //首先是引用 using Excel = Micros ...

  9. 佛祖保佑 永无bug 代码注释

    // // _oo0oo_ // o8888888o // 88" . "88 // (| -_- |) // 0\ = /0 // ___/`---'\___ // .' \\| ...

  10. MySQL5.7 windows二进制安装

    200 ? "200px" : this.width)!important;} --> 介绍 1.下载解压 下载地址:http://dev.mysql.com/get/Dow ...