<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. MessageBox.show显示窗口在最上层

    C#中使用MessageBox.Show();有时候会被主窗口挡住而看不到.使用如下语句则可以使其显示在最上层. MessageBox.Show("MessageBox显示窗口在最上层了吗? ...

  2. cocos代码研究(21)Widget子类TextField学习笔记

    基础理论 一个接受用户输入的widget. 输入文本的渲染基于TextFieldTTF. 如果你想用系统控制行为,请使用EditBox来替代.继承自 Widget. 代码实践 //与占位符有关void ...

  3. sql2008 express 实现自动备份

    在一个项目中用到的数据库是sqlserver 2008 r2 express .可没想到express版本的功能有些限制,此前一直都不知道啊.百度百科可以看到它的限制: “1.数据库的大小限制:SQL ...

  4. 使用 Laravel 数据填充功能生成中文测试数据

    今晚……不对,是昨晚,折腾一个的小项目,发现自动填充的中文数据显示起来总不太美观,于是开始琢磨如何填充中文数据进行测试. 然而一番搜索后惊奇的发现,官方.以及一些非官方的文档均未提及这一功能.期间看到 ...

  5. SNMP学习笔记之SNMPWALK 命令

    SNMPWALK是一个通过SNMP GET-NEXT类型PDU,实现对目标AGENT的某指定MIB分支信息进行完整提取输出的命令工作. 命令行: snmpwalk [选项] agent [oid] 选 ...

  6. Spark 任务提交脚本

    说明 该脚本是根据输入起始日期-结束日期,执行从数据库拉取日期间隔数据到HDFS.日期间隔中的日期就是每一年的自然日. 日期格式可以是以下几种:2018-01-01 2018-12-31 [-][/] ...

  7. 20145326 《Java程序设计》第4周学习总结

    20145326 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 一.何谓继承 1.继承共同行为 面向对象中,子类继承父类,避免重复的行为定义.不过并非为了避免重复定义行为就 ...

  8. Linux系统网络设备启动和禁止“ifconfig eth0 up/down”命令的跟踪

    前面文章讲了Linux系统的ethtool框架的一些东西,是从用户空间可以直观认识到的地方入手.同样,本文从Linux系统绝大部分人都熟悉的“ifconfig eth0 up”命令来跟踪一下此命令在内 ...

  9. 一些常用的JavaScript正则表达式

    1.正数,最多n位小数 /^(([1-9]\d*(\.\d{1,n})?)|(0\.\d{1,n}))$/ 2.手机号码 /^1[34578]\d{9}$/

  10. IDEA使用Git管理项目

    今天将项目使用Git管理了,IDEA. 第一步: 第二步: