<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. python3 捕捉代码行出错的小程序

    下面主要使用的是: try .. except .. else .. finally ...,用的是 traceback 这个第三方模块. import traceback #捕捉哪行代码报错 def ...

  2. win10用键盘控制鼠标

    打开控制面板 进入轻松使用 更改鼠标的工作方式 勾选启用鼠标键 点击设置鼠标键 应用确定 ctrl+shift+numlock开启鼠标键 小键盘8426上下左右,5类似鼠标单击 ctrl+小键盘加速, ...

  3. 分页组件vue和jsp版本

    vue版本 <template> <div class="com-vscroll"> <slot name="mcontent"& ...

  4. VS2010/MFC编程入门之二十五(常用控件:组合框控件Combo Box)

    上一节鸡啄米讲了列表框控件ListBox的使用,本节主要讲解组合框控件Combo Box.组合框同样相当常见,例如,在Windows系统的控制面板上设置语言或位置时,有很多选项,用来进行选择的控件就是 ...

  5. Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project

    本文转自:http://www.phperz.com/article/14/1205/39544.html 本文向大家讲解了Myeclipse错误:Errors occurred during the ...

  6. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  7. DB开发之postgresql

    1.环境变量配置: PGLIB=/usr/local/pgsql/lib PGDATA=$HOME/data PATH=$PATH:/usr/local/pgsql/bin MANPATH=$MANP ...

  8. http://www.cvvision.cn/2888.html

    图像处理(一)图像变形(1)矩形全景图像还原-Siggraph 2014 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:cvvision链接:http://www.cvvi ...

  9. 20145322何志威《网络对抗》逆向及Bof基础

    20145322何志威<网络对抗>逆向及Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任 ...

  10. When should I use OWIN Katana?

    When should I use OWIN Katana? 解答1 In asp.net WebApi v2, the OWIN pipeline becomes the default. It i ...