html5自带的 input file=”” ,纯html5,并且不涉及到js ,就可以实现。代码如下:

<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">

capture表示,可以捕获到系统默认的设备,比如:camera–照相机;camcorder–摄像机;microphone–录音。 
accept表示,直接打开系统文件目录。

多选:

其实html5的input:file标签还支持一个multiple属性,表示可以支持多选,如:

<input type="file" accept="image/*" multiple>

加上这个multiple后,capture就没啥用了, 
因为multiple是专门用来支持多选的。

html5调用手机摄像头(图片可多选 限pc)的更多相关文章

  1. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  2. 怎样让HTML5调用手机摄像头拍照——实践就是一切

    原文:怎样让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家.学编程最重要的是实践,我这尽管有完好的代码,可是希望大家都能够自己写出属于自己的代码 HTML5 Th ...

  3. HTML5调用手机摄像头,仅仅支持OPPOHD浏览器

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  5. html5调用手机摄像头

    <input type="file" accept="image/*" capture="camera"><input t ...

  6. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  7. 亲测可用)html5 file调用手机摄像头

    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 in ...

  8. html5调取手机摄像头或相册

    html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面,所以在此我隐藏input,自定义样式,这个样式就在<a>中自己定义,这里我就不 ...

  9. 利用html5调用本地摄像头拍照上传图片[转]

    利用html5调用本地摄像头拍照上传图片   html5概念啥的就不废话了,不知道的 百度, 谷歌一堆..今天学了学html5中的Canvas结合新增的<video>标签来获取本地摄像头, ...

随机推荐

  1. 使用chrome远程调试设备及调试模拟器设备

    使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统 ...

  2. UVA1607-Gates(思维+二分)

    Problem UVA1607-Gates Accept: 111  Submit: 767Time Limit: 3000 mSec Problem Description Input The fi ...

  3. 【转】FFmpeg获取DirectShow设备数据(摄像头,录屏)

    这两天研究了FFmpeg获取DirectShow设备数据的方法,在此简单记录一下以作备忘.本文所述的方法主要是对应Windows平台的. 1.       列设备 ffmpeg -list_devic ...

  4. apt-get update 更新 ubuntu时出现Hash sum mismatch的原因及解决方法

    $ sudo apt-get update ...... Hit http://mirrors.163.com trusty/main Sources                          ...

  5. automake - 使用 autotools 工具集

    一般而言,对于小项目或玩具程序,手动编写 Makefile 即可.但对于大型项目,手动编写维护 Makefile 成为一件费时费力的无聊工作. 本文介绍 autotools 工具集自动生成符合 Lin ...

  6. Spring(1)_Bean初始化_逻辑图

  7. CF1083E The Fair Nut and Rectangles

    CF1083E The Fair Nut and Rectangles 给定 \(n\) 个平面直角坐标系中左下角为坐标原点,右上角为 \((x_i,\ y_i)\) 的互不包含的矩形,每一个矩形拥有 ...

  8. IDEA+TestNG

    1.常用注解 2.手把手教你掌握必备测试框架testNG:http://www.51testing.com/zhuanti/TestNG.htm [testNG常用注解] 1 @Test:标记一个类或 ...

  9. 初学Python——面向对象(二)

    一.抽象类.接口类和抽象接口 转自博客园魏恒https://www.cnblogs.com/weihengblog/p/8528967.html (一)接口类 什么是接口类?在继承中,我们可以声明某个 ...

  10. AI numpy

    nan:not a number inf:infinate arange(start, stop, step):[start, stop),step是步长的数组 sin:正弦函数 cos:余弦函数