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

2023-10-26

在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头,找了很多资料,大都是 js调用api  然后怎样怎样,做了几个demo测试发现根本不行, 后来恍然大悟,用html5自带的 input file=""  ,纯html5,并且不涉及到js ,就可以实现。代码如下:


(亲测可用)html5调用手机摄像头




html 代码效果预览





123
    <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属性,表示可以支持多选,如:


html 代码效果预览





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






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


内容切图社区(qietu.cn) 首发,注明来源可转载。

http://www.qdfuns.com/notes/26716/2d4fea81a990f8532ce7fa43af286add.html



限制只能选择图片

[html]  view plain  copy
  1. <input type="file" accept="image/*">  


限制只能选择视频

[html]  view plain  copy
  1. <input type="file" accept="video/*">  


限制只能选择音频

[html]  view plain  copy
  1. <input type="file" accept="audio/*">  


直接打开摄像头拍照

[html]  view plain  copy
  1. <input type="file" accept="image/*" capture="camera">  


直接打开摄像头录像

[html]  view plain  copy
  1. <input type="file" accept="video/*" capture="camera">  



本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

(亲测可用)html5 file调用手机摄像头 的相关文章

  • 微信小程序开发实战第五讲之授权登录

    上一节 我们实现了简单的通过用户名和密码调用接口进行登录的实战 但是在小程序中 有个特殊的情况 就是很少有厂商去开发一个注册功能或者是通过用户名 密码来登录的逻辑 为什么 因为APP 小程序为了用户体验 是尽量多的避免用户多次输入交互 所以
  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • 前端基础之ES6

    1 前后端对比 2 ES6 ECMAScript6 0 以下简称ES6 ECMAScript是一种由Ecma国际通过ECMA 262标准化的脚本 是JavaScript语言的下一代标准 2015年6月正式发布 从ES6开始的版本号采用年号
  • CSS 浏览器缩小之后页面错乱 块不见问题

    问题1 浏览器正常100 显示的时候 今日推荐是看得见的 浏览器缩小 小于100 之后 今日推荐被挤不见了 今日推荐块的DIV的CSS原配置是 today recommend py container width 1200px margin
  • (一)软件架构概述

    1 系统结构 B S架构 Browser Server 浏览器 服务器的交互形式 Browser支持哪些语言 HTML CSS JavaScript 写HTML CSS JavaScript代码的这波人职位叫做 WEB 前端开发工程师 Ja
  • 基于vue-cli3模板的axios封装项目

    为了更便捷的使用项目框架 本模板为空白项目 但是已经为大家封装了axios方法和post get请求 内有基础案例 请大家按着自己项目需要进行修改使用 axios interceptors response use response gt
  • EduCoder_web实训作业--文本层次语义元素

    第一关 A D B B 第二关 strong 重要通知 strong
  • jquery attr()方法 添加,修改,获取对象的属性值

    转自 http hi baidu com 0701u item b8ec62c1daba973eef466524 jquery中用attr 方法来获取和设置元素属性 attr是attribute 属性 的缩写 在jQuery DOM操作中会
  • HTML 5 标签、属性、事件及浏览器兼容性速查表

    HTML 5 可以说是近十年来 Web 标准最巨大的飞跃 和以前的版本不同 HTML 5 并非仅仅用来表示 Web 内容 它的使命是将 Web 带入一个成熟的应用平台 在这个平台上 视频 音频 图象 动画 以及同电脑的交互都被标准化 尽管
  • 12.HTML5下一代的HTML标准介绍与初识尝试

    关注回复 学习交流群 加入 安全开发运维 答疑交流群 请朋友们 多多点击文中的广告 支持作者更新更多文章 目录 本文为作者原创文章 为尊重作者劳动成果禁止非授权转载 若需转载请在 全栈工程师修炼指南 公众号留言 或者发送邮件到 master
  • react(craco)移动端使用postcss-px-to-viewport自适应布局

    Craco 使用postcss px to viewport devDependencies craco craco 6 4 3 xianzhengquan postcss px 2 vw 0 0 1 postcss 8 3 0 peerD
  • 【H5】 svg画扇形饼图

    H5 svg画扇形饼图 效果图如下 封装代码如下 代码内有详细注解哦
  • 移动端适配-01-百分比宽度

    1 图片可以在parent中使用 1 line heigh和text align使水平和竖直居中 2 在img标签中加vertical align middle 2 3 background size 1 两个参数 background s
  • HTML 教程- (HTML5 标准)

    HTML 教程 HTML5 标准 超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用于创建网页的标准标记语言 您可以使用 HTML 来建立自己的 WEB 站点 HTML 运行在浏览器上 由浏览
  • 谷歌(Chrome)浏览器自定义插件

    准备 1 js文件 需要的功能逻辑 2 插件主入口及配置 manifest json 3 插件图标 目录结构 添加插件流程 选择插件文件夹 代码 manifest json name 百度 manifest version 2 versio
  • align-content 设置多行下的子元素排列方式 代码和图片展示

    align content 适用于 换行 多行 的情况下 单行无效 可以设置上对齐 居中拉伸和平均分配剩余空间等属性值 属性值 flex start 默认值 在侧轴头部开始排列 flex end 在侧轴尾部开始排列 center 在侧轴中间
  • JavaScript string中includes、startsWith和endsWith的使用

    文章目录 前言 一 includes 二 startsWith 三 endsWith 总结 前言 JavaScript string的这三个方法都是根据参数返回true或false 一 includes includes 方法判断一个字符串
  • html创建添加地图(超简单)

    1 打开百度地图创建平台 百度地图创建平台 2 根据个人需求改就行了 可加标注 3 点击获取代码 复制下来就可以用了 4 个人用的是HBulider 复制到里面可直接用了 如果有文字显示问题 把编码改成utf 8就行了 5 地图控件位置在网
  • React 笔记 jsx

    严格约定 React 组件必须以 大写字母开头 而 HTML 标签则必须是小写字母 React JSX JSX 是由 React 推广的 JavaScript 语法扩展 用于表达组件的 特殊语法的 js 函数 要求标签必须闭合 返回的组件必
  • 使用企业订货软件的担忧与考虑|网上APP订货系统

    使用企业订货软件的担忧与考虑 网上APP订货系统 网上订货系统担心出现的问题 1 如果在订货系统中定错 多 货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误 但是网上订货平台为大家提供了很多的解决方案 其中对于订单的修改

随机推荐

  • 多个空格的正则表达式

    一 借鉴别人 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
  • webpack5

    为什么有webpack web1 0阶段 还没有明确前端岗位 主要职责是编写静态页面 用Js来进行表单验证或动画效果 为了在页面上动态填充数据 后面也出现了php jsp这种开发模式 web2 0阶段 伴随ajax的诞生 不止负责展示界面
  • C# this.InvokeRequired

    C 为控件单独开辟了一个线程 当另外一个线程的方法需要修改控件或者调用控件的方法时 需要通过控件的InvokeRequired方法来进行 InvokeRequired
  • tp5如何跨数据库查询

    gt 当然前提是 这两个的数据库都在同一个服务器上才可以的 如果没有在同一个服务器上 gt 解决办法 mysql设置一下权限 a 可以对b进行select的操作权限 tp5使用原生查询 代码如下 admin Db query SELECT
  • orangepi5使用sata ssd启动系统

    使用sata ssd启动香橙派官方的Ubuntu系统 以Orangepi5 1 1 0 ubuntu jammy server linux5 10 110为例 因为烧录系统到外接的ssd需要另一个系统辅助所以我们还要烧录一个带桌面的系统到T
  • 解决 LINK : fatal error LNK1104: 无法打开文件“freeglutd.lib”问题

    最近跑程序 发现总有这样的错误 如下图 开始我以为是缺少了freeglutd lib这个文件 之后才发现压根没有这个文件 于是找到了解决办法 鼠标右键单击项目 选择属性 出现如下图 找到C C 预处理器 点开预处理器定义 点编辑 添加 ND
  • libevent源码学习(0):libevent库安装与简单使用

    目录 1 下载并解压libevent库 2 安装libevent库 3 简单使用libevent库 1 下载并解压libevent库 这里下载的是libevent 2 0 21 stable版本的 使用wget命令如下所示 下载地址可通过h
  • .git文件夹_Git入门细致讲解

    什么是 git 分布式的版本管理与协作系统 安装 Git 下载安装就不详说了 安装之后 右键会出现 Git bush here 在当前文件夹打开 bash 是一个小型的 linux shell 可以在上面进行关于 git 的操作 他自带 m
  • 妙用mov edi,edi和5个nop实现inline hook

    妙用mov edi edi和5个nop实现inline hook 2008年2月22日 分类 其它技术 标签 inline hook nop 这方法MJ很早时就说过了 简单重复下 大家应该发现大部分API的第一条指令都是mov edi ed
  • MySQL 5.7版本简介

    MySQL的优势 MySQL的主要优势如下 1 速度 运行速度快 2 价格 MySQL对多数个人来说是免费的 3 容易使用 与其他大型数据库的设置和管理相比 其复杂程度较低 易于学习 4 可移植性 能够工作在众多不同的系统平台上 例如 Wi
  • MySQL—SQL优化详解(上)

    作者 小刘在C站 个人主页 小刘主页 努力不一定有回报 但一定会有收获加油 一起努力 共赴美好人生 学习两年总结出的运维经验 以及思科模拟器全套网络实验教程 专栏 云计算技术 小刘私信可以随便问 只要会绝不吝啬 感谢CSDN让你我相遇 前言
  • 【vue】npm install -g @vue/cli出现错误

    进行到npm install g vue cli这一步出现错误 操作步骤如下 1 先下载node js 不知道有没有下载 可以在cmd输入 node v 出现版本号则电脑已经有了node js 没有的话去官网下一个 csdn有其他小伙伴给了
  • Spring Boot全后端实现验证码

    验证码通常是利用前端技术实现的 前端的验证码需要先在后端进行保存 再传到前端 再于前端传输的数据对比校验 一些前后端分离项目的工作量大大增加 而如果完全是由后端独立实现的 那么在代码量和复杂程度上就大大降低了 框架 Spring Boot
  • JavaWeb使用ajax实现定时自动保存草稿功能

    在Web程序开发中 难免有时候会遇到一些定时业务 如考试系统中的自动提交试卷 还有平时写博客时定时自动保存草稿的功能 在JavaWeb中也可以利用ajax技术来实现这定时自动保存草稿这一功能 index jsp关键代码 html代码 加载时
  • 编写QT程序时发现内存泄漏的解决方法

    最近项目结尾进行测试的时候 发现项目持续运行产生大量数据后内存的消耗会无休止的增加 当关闭该窗口时 内存却并没有如期释放 理论上QT中所有的子对象在窗口被销毁时都会一同销毁 最终发现是我在这篇博客上写的添加长按的效果导致的 https bl
  • ipynb 格式文件

    最近碰到文件名后缀为 ipynb文件 起初没太在意这种文件格式 用Notepad 打开之后看到也是类似于JSON格式的信息 以为也是为其他的一些文件服务的 类似于配置一些HTML文件的配置文件 但是后来才发现这也是一种文本表示形式 只不过需
  • Lua:调试篇

    1 Lua代码编辑工具 辣博推荐 ZeroBrane Studio编写Lua脚本还是不错滴 基本的代码补全和提示都具有 按照从下往上的代码逻辑 还可以自动对齐格式 实话讲 还不是很完美 毕竟 作为一个使用习惯Qt如此完美的IDE工具的 Qt
  • [线性dp] aw897. 最长公共子序列(重要模板题+最长公共子序列模型)

    文章目录 0 前言 1 LCS 模板题 0 前言 LCS longest common sub sequences 最长公共子序列 子串 按原顺序依次出现 禁止跳过某元素的序列 具有连续性 子序列 在保持元素前后关系的前提下 可以跳过某些元
  • C语言文件指针设置偏移量--fseek

    一 fseek fseek是设置文件指针偏移量的函数 具体传参格式为 int fseek FILE stream long int offset int whence 返回一个整数 其中 1 stream是指向文件的指针 2 offset是
  • (亲测可用)html5 file调用手机摄像头

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