<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. 利用 TestNG 并行执行用例

    原文地址https://testerhome.com/topics/1639 一.测试类*注1 package com.testerhome; import io.appium.java_client ...

  2. c/c++值传递和引用传递

    今天看数据结构的时候,因为是c语言版的,刚开始学的时候就对指针搞的焦头烂额,今天,发现参数传递的时候,&符号也莫名其妙,搜了一篇好文,转载下来. 一. 函数参数传递机制的基本理论 函数参数传递 ...

  3. make clean 与 make distclean 的区别

    make clean仅仅是清除之前编译的可执行文件及配置文件. 而make distclean要清除所有生成的文件. Makefile 在符合GNU Makefiel惯例的Makefile中,包含了一 ...

  4. 《Clean Code》一书回顾

    <Clean Code>一书从翻开至今,已经差不多两个月的时间了,尽管刨去其中的假期,算下来实在是读得有点慢.阅读期间,断断续续的做了不少笔记.之前,每每在读完了一本技术书籍之后,其中的诸 ...

  5. Python:笔记(7)——yield关键字

    Python:笔记(7)——yield关键字 yield与生成器 所谓生成器是一个函数,它可以生成一个值的序列,以便在迭代中使用.函数使用yield关键字可以定义生成器对象. 一个例子 我们调用该函数 ...

  6. 【转载】Java动态代理之JDK实现和CGlib实现(简单易懂)

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6542259.html 一:代理模式(静态代理) 代理模式是常用设计模式的一种,我们在软件设计时常用的代理一般是 ...

  7. Python3.x获取网页源码

    Python3.x获取网页源码 1,获取网页的头部信息以确定网页的编码方式: import urllib.request res = urllib.request.urlopen('http://ww ...

  8. mdio rgmii mac phy简单了解

    MDIO(Management Data Input/Output),对G比特以太网而言,串行通信总线称为管理数据输入输出 (MDIO). 该总线由IEEE通过以太网标准IEEE 802.3的若干条款 ...

  9. git clone时,提示warning: remote HEAD refers to nonexistent ref, unable to checkout

    一.环境 发行版:Ubuntu 18.04.1 LTS 代号:bionic 内核版本:4.15.0-30-generic 二.背景 git clone https://source.codeauror ...

  10. CentOS6安装Pyhon3

    一,从官方下载Python3.6 [root@linux-node1 src]# pwd /usr/local/src [root@linux-node1 src]# wget https://www ...