<label>照相机</label>
<input type="file" id='image' accept="image/*" capture='camera'>
<br>
<label>摄像机</label>
<input type="file" id='video' accept="video/*" capture='camcorder'>
多选:
<input type="file" id="file" multiple>

在各个机型都可以点击 file 调用相册 和 摄像头拍照 
1. 在老版本的安卓中,必须加上capture,否则只能调用相册 
2. 在IOS中 加了capture,就只能调用摄像头不能调用相册 判断ios,如果是ios就去掉capture属性.
let info=navigator.userAgent.toLowerCases();
if(info.match(/iPhone\sOS/i)){

  dom.removeAttribute("capture")  

  }

读取图片(fileChoose即为input)

fileChoose.change=()=>{

  let file=fileChoose.files[0],

  reader=new FileReader();

  reader.onLoad=()=>{

    img.src=reader.result

  };

  reader.readAsDataURL(file)

}

移动端H5调用摄像头(选择上传图片)的更多相关文章

  1. 摄像头调用,h5调用摄像头进行扫一扫插件备份

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. JS调用摄像头并上传图片到服务器

    本功能只能把图片转成base64码上传,如何上传图片还没有修改出来,有兴趣的朋友弄出来了,请给我留下言,谢谢了! 直接上代码,需要的朋友直接复制就可以使用了. <!DOCTYPE html> ...

  3. H5 调用摄像头

    WebRTC(Web Real-Time Communication,网页实时通信),是一个支持网页浏览器进行实时语音对话或视频对话的API. 1.getUserMedia 要播放摄像头的影像,首先需 ...

  4. h5调用摄像头

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  5. JavaScripts调用摄像头【MediaDevices.getUserMedia()】

    h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...

  6. 移动端H5页面上传图片或多张图片

    传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要 ...

  7. h5端呼起摄像头扫描二维码并解析

    2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...

  8. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  9. 移动端H5选择本地图片

    移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...

随机推荐

  1. zw版【转发·台湾nvp系列Delphi例程】HALCON SetIcon2

    zw版[转发·台湾nvp系列Delphi例程]HALCON SetIcon2 procedure TForm1.Button1Click(Sender: TObject);var img : HUnt ...

  2. Jsuop Whitelist

    Jsuop使用示例代码 使用jsoup HTML Cleaner 方法进行清除,但需要指定一个可配置的 Whitelist.http://jsoup.org/apidocs/org/jsoup/saf ...

  3. [one day one question] webpack 打包报错 Cannot assign to read only property 'exports' of object '#<Object>'

    问题描述: webpack 打包报错 Cannot assign to read only property 'exports' of object '#<Object>',这怎么破? 解 ...

  4. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  5. JS的 instanceof 方法

    http://www.cnblogs.com/jasonxuli/p/6769282.html 这是 2014-12-10 发在 iteye 上的文章 今天突然想起js的原型继承模型和相关的proto ...

  6. windows 10占用cpu和内存过高

    自从安装了windows 10,开机之后cpu和内存一直占用很高,尤其是system进程,一直占cpu在13%左右,上网查到一个解决方式,如下: cpu瞬间变为1%

  7. 20145122 《Java程序设计》第二周学习总结

    20145122 <Java程序设计>第2周学习总结 教材学习内容总结 在大一的时候我们学习了C语言,所以对第三章的知识不是很陌生,但有些新知识需要记忆. java常用的数据类型: byt ...

  8. 获取本机IP,返回字符串

    public static String GetLocalIp() { String[] Ips = GetLocalIpAddress(); foreach (String ip in Ips) i ...

  9. 从0开始学习 GITHUB 系列之「团队合作利器 BRANCH」【转】

    本文转载自:http://stormzhang.com/github/2016/07/09/learn-from-github-from-zero6/ 版权声明:本文为 stormzhang 原创文章 ...

  10. [CF580D]Kefa and Dishes

    题意翻译 kefa进入了一家餐厅,这家餐厅中有n个菜(0<n<=18),kefa对第i个菜的满意度为ai(0<=ai<=10^9),并且对于这n个菜有k个规则,如果kefa在吃 ...