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. Java语言中extend和implement的区别

    Java语言并不支持多重继承,而只能继承一个类,不过我们可以使用implements来实现多个接口. extends继承的父类:不能声明为final或者定义为abstract: implements实 ...

  2. [LeetCode][Java] Jump Game II

    题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...

  3. 利用runtime检測这个对象是否存在某属性?

    假定有实例对象-instance,我们怎样知道该实例对象是否存在属性-propertyName? 利用runtime,我们能够获取到它的属性列表 1)属性列表 unsigned int outCoun ...

  4. javascript下将字符类型转换成布尔值

    办不到!孙子,我告诉你,这办不到! 比如说, var sb = "false"; alert(!!sb);//结果显示true! 事前是想得很美的: sb == "fal ...

  5. YTU 2640: 编程题：运算符重载---矩阵求和

    2640: 编程题:运算符重载---矩阵求和 时间限制: 1 Sec  内存限制: 128 MB 提交: 484  解决: 190 题目描述 /* 有两个矩阵a和b,均为2行3列.求两个矩阵之和. 重 ...

  6. zabbix 监控zookeeper

    1.监控脚本如下:check_zookeeper.sh 1 2 #!/bin/bash echo mntr | nc 127.0.0.1 2182 | grep "$1" |awk ...

  7. BZOJ_3171_[Tjoi2013]循环格_最小费用最大流

    BZOJ_3171_[Tjoi2013]循环格_最小费用最大流 Description 一个循环格就是一个矩阵,其中所有元素为箭头,指向相邻四个格子.每个元素有一个坐标(行,列),其中左上角元素坐标为 ...

  8. Vue.js 项目接口管理

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 本文使用vue-cli生成的项目举例. 第一步.在src目录下新建一个文件夹http,在http目录下建 ...

  9. E20171225-hm

    abstract  adj. 抽象的,理论上的; 难解的; 抽象派的; 茫然的;

  10. LoadRunner监控Linux配置教程

    LoadRunner监控Linux资源时弹出如下错误: Monitor name :UNIX Resources. Cannot initialize the monitoring on 192.16 ...