HTML5调用手机摄像机、相册功能 <input>方法

最新推荐文章于 2024-06-24 14:21:19 发布
最新推荐文章于 2024-06-24 14:21:19 发布
阅读量5.8w 收藏 34
点赞数 8
分类专栏： JAVAScript H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taohai123/article/details/53302405
版权

最近用MUI框架做webapp项目，在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能！

在查资料的时候，想起了另一种用input调用摄像和相册功能的方法，之前没有深入了解过，现在整理一下：

不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码：

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

最低0.47元/天 解锁文章
皓宸
关注
  • 8
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
移动端文件上传input=file,accept=“video/*“的一些属性（苹果，安卓）
qq_41521625的博客
04-23 2353
移动端一些属性
HTML5调用手机摄像机、相册功能 input方法
jgs525的博客
03-18 1429
HTML5调用手机摄像机、相册功能 方法 最近用MUI框架做webapp项目，在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能！ 在查资料的时候，想起了另一种用input调用摄像和相册功能的方法，之前没有深入了解过，现在整理一下： 不需要特殊环境，使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码： accep...
input type="file" accept="video/*" capture="camcorder" 无法上传视频文件
qq_41285017的博客
04-14 2万+
网页使用&lt;input type="file" accept="video/*" capture="camcorder"&gt; 安卓手机点击此标签拍摄视频或选择视频文件，后无法上传，获取不到资源
H5使用input打开系统相册
yangxun9264986的博客
07-17 3518
先说说我做这个的场景，我们是开发的h5应用，客户是用的rn写的原生app，h5应用是内嵌在app里面的。具体需求就是，在点击上传附件的时候，会从底部有个弹出层，分别显示相册、相机、拍摄三个图标以供用户选择上传什么类型的文件。结论就是：h5实现有兼容问题，在部分安卓手机可以直接访问到手机相册，在ios是需要在弹出一个选择框让用户进行选择，这样的操作是客户不能接受的。最后拍摄视频和拍照h5来实现，相册是调用原生的方法来实现的。
HTML5【新特性总结】
最新发布
尽欢的博客
06-24 625
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 二、HTML5 新增的多媒体标签 新增的多媒体标签主要包含两个：使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前 元素支持三种视频格式： 尽量使用 mp4格式 当前
html5调取手机摄像头或相册
weixin_30480651的博客
11-21 151
html5调用手机摄像头或者相册 由于input的type=file 格式的文件的界面并不是我们所希望的界面，所以在此我隐藏input，自定义样式，这个样式就在<a>中自己定义，这里我就不再定义了 首先 使用input的type=file，通过File API,可以在用户选取一个或多个文件之后，访问代表所选文件的一个或多个File对象，这些对象被包含在一个FileList 对象中，...
移动端H5实现拍照功能的两种方法
qq_17189095的博客
07-17 6594
移动端H5实现拍照功能的两种方法。
微信打开H5页面，对于标签【 input type="file" accept="video/*" capture="camcorder" 】无法直接打开摄像头录制视频问题解决
m13012606980的专栏
05-08 6731
问题描述：（用的测试机器为华为手机） 大家都知道：通过<input type="file" accept="video/* capture=camcorder"> 来激活本地摄像头来调取视频 但当在微信中扫描二维码打开H5页面时，不能直接激活摄像头来录制视频，而是默认让你选择，手动打开相机，或者本地选择文件，这不符合我的要求。如下图： 问题解决过程： 通过调查在微信可以正常...
input 属性开启手机前置摄像头拍照
Bright2017的博客
04-25 3907
最近有个需求，需要做人脸识别，不用太过复杂，只需要拍照上传，和人脸对比接口进行对比即可。 调用摄像头这里让我很郁闷，因为要开启前置摄像头。原本打算使用Web AP( MediaDevices.getUserMedia)，但是这个不能拍照，可以开启摄像头然后Canvas截图保存，但是不适合移动端。 解决办法： //1.开启视频录像 <input type="file" accept=...
Html5在手机端调用相机的方法实现
01-19
input调用设备录像，相机等… HTML5官方文档解释：capture属性用于调用设备的摄像头或麦克风。 当accept=”audio/或video/”时capture只有两种值，一种是user，用于调用面向人脸的摄像头(例如手机前置摄像头)，一种...
详解Vue调用手机相机和相册以及上传
10-17
在本文中，我们将深入探讨如何使用Vue.js框架调用手机的相机和相册功能，并将选取的图片上传到服务器。Vue.js是一个轻量级的前端JavaScript框架，它提供了丰富的组件化和响应式设计，使得开发移动端应用变得简单易行...
h5页面调用相机、相册、录像、录音
06-08
移动端浏览器和手机APP，h5页面调用相机、相册、录像、录音，可以选择本地相册；以及文件的读取和加载方法， 调用FileReader对象的方法
Android + <调用相机拍照 & 选择相册> + 数码相机
04-27
实现如下功能之外，为了适配不同版本机型手机； 实测：android 8、9、10、11、13以及鸿蒙系统有效。 机型：小米、OPPO、VIVO、华为手机。 1. 上传头像并裁剪。 2. 上传多张照片并做压缩处理，图片可实现在线预览，...
移动端利用 input 标签调用手机摄像头拍照，实现人脸验证的功能
Love_Fish_Young的博客
07-12 2540
移动端利用 input 标签调用手机摄像头拍照，对图片进行压缩，实现人脸验证的功能
用input type=file调取手机照相机以及相册选择照片上传
热门推荐
SailorCai的技术博客
04-05 5万+
最近由于在写一个车贷的webapp项目，其中要求调取手机照相机以及手机相册来获取照片，而我之前一直是用cordova等打包工具调取手机硬件、于是也到网上找了下解决方案。其中h5提供的type="file"属性是一个相当简便且有效的方法。 &lt;input type="file"&gt;除了可以选择照片，默认情况下是可以选择文档的 为了防止用户误选文档我们可以给 input 标签添加 acce...
input type=file上传图片光调用手机照相机，不调用手机相册。
wangshuai13383347132的博客
10-03 2610
input type=file 上传图片只调用手机相机，不调用手机相册。
vue用input调起手机摄像头录制视频
Seven_Ting的博客
11-12 5445
<input ref="inputVideo" type="file" name="video" id="video-input" accept="video/*" capture="camcorder" //只是调起摄像头，不选择文件 @change="videoChange" @click="starVideotape" /> <--video用于播放拍摄后的内容--> <video id="video" width='300' heig.
h5调用相机、相册、摄像头拍照、录像并压缩预览
qq_39150358的博客
10-19 1975
1、使用h5中的input标签  &lt;!--相机--&gt; &lt;input id="fileBtn" type="file" onchange="upload('#fileBtn');" accept="image/*" capture='camera' style="opacity: 0;width:0;/&gt;拍照 &lt;!--摄像头录像--&gt
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防抖</title> </head> <body> <input type="text" id="input" oninput="event" /> </body> <script> function debounce(fn, delay) { let timer; return function () { const context = this; const args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } const event = debounce(on, 2000); </script> </html>让input输入值发生变化时 调用debounce 让它们关联起来
06-08
可以将input的oninput事件绑定到一个函数，该函数调用debounce函数并传入需要防抖的函数以及延迟时间。代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>防抖</title> </head> <body> <input type="text" id="input" oninput="handleInput()" /> </body> <script> function debounce(fn, delay) { let timer; return function () { const context = this; const args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; } function handleInput() { // 需要防抖的函数 console.log('input value changed'); } const event = debounce(handleInput, 2000); // 调用debounce将需要防抖的函数传入并设定延迟时间 document.getElementById('input').oninput = event; // 将防抖后的函数和input的oninput事件关联起来 </script> </html> ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值