h5 调起相机_Html5在手机端调用相机的方法实现

input调用设备录像，相机等…

HTML5官方文档解释：capture属性用于调用设备的摄像头或麦克风。

当accept=”audio/或video/”时capture只有两种值，一种是user，用于调用面向人脸的摄像头(例如手机前置摄像头)，一种是environment，用于调用环境摄像头(例如手机后置摄像头)。

当accept=”audio”时，只要有capture就调用设备麦克风，忽略user和environment值。

至于网上提到的camera和filesystem，官方没提。

官方文档：www.w3.org/TR/2018/REC-html-media-capture-20180201/

iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。

理想情况下应该按照如下开发webview：

1.当accept=”image/”时，capture=”user”调用前置照相机，capture=”其他值”，调用后置照相机

2. 当accept=”video/”时，capture=”user”调用前置录像机，capture=”其他值”，调用后置录像机

3. 当accept=”image/,video/”，capture=”user”调用前置摄像头，capture=”其他值”，调用后置摄像头，默认照相，可切换录像

4. 当accept=”audio/*”时，capture=”放空或者任意值”，调用录音机

5. 当input没有capture时，根据accppt类型给出文件夹选项以及摄像头或者录音机选项

6. input含有multiple时访问文件夹可勾选多文件，调用系统摄像头或者录音机都只是单文件

7. 无multiple时都只能单文件

判断设备类型

var ua = navigator.userAgent.toLowerCase();

if(ua.match(/android/i)) == "android") {

alert("android");

}

if(ua.match(/iPhone/i)) == "iPhone") {

alert("iPhone");

}

if(ua.match(/iPad/i)) == "iPad") {

alert("iPad");

}

Document

var file = document.querySelector('input');

if (getIos()) {

file.removeAttribute("capture"); //如果是ios设备就删除"capture"属性

}

function getIos() {

var ua=navigator.userAgent.toLowerCase();

if (ua.match(/iPhone\sOS/i) == "iphone os") {

return true;

} else {

return false;

}

到此这篇关于Html5在手机端调用相机的方法实现的文章就介绍到这了,更多相关Html5手机端调用相机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

h5 调起相机_Html5在手机端调用相机的方法实现相关推荐

android相机拍照代码,Android 调用相机拍照，适配到Android 10
今天写的博客是关于Android调用手机相机拍照并显示图片.这是一个很常用的功能,并且这个功能在Android6.0.7.0.10.0等版本上实现都有所不同,需要对Android各个版本进行兼容适配, ...
h5 调起相机_H5移动端调用相机或相册
一: 前提在做H5时,有时要实现拍照功能,这就要调取手机端的相机,当时,在网上搜了很多能实现的方式,最后还是用html5自带的 input标签,实现移动端调用手机摄像头.好了,话不多说,下面就是我实 ...
html5在手机端调用摄像头的介绍以及新特性
<input type="file" capture="camera" accept="image/*" multiple>,这 ...
android调用相机返回大图,Android调用相机拍照返回原图
在开始之前,先说下正常调用相机的状况: 正常调用相机,在 Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActiv ...
通过URL传值在手机端打开一键导航
通过URL传值在手机端打开一键导航百度一键导航接收url 然后在手机端调用百度地图导航,如果手机按装了百度地图就会自动调起百度地图这个功能我研究了好久现在这个效果比较满意借鉴了好多大佬的东 ...
Android 调用相机拍照，适配到Android 10，2021必看
//拒绝权限,弹出提示框. Toast.makeText(this,"拍照权限被拒绝",Toast.LENGTH_LONG).show(); } } } 申请权限后,就可以调起相机 ...
iOS 开发之调用相机
iOS开发之调用相机苹果移动设备调用相机功能项目过程中遇到一个功能需求(调用相机拍照) 第一步要使用系统相机必须遵守 @interface ImmediateAnswerViewControll ...
h5端登录是什么意思_如何让电脑端配置的host在手机端生效（MVVM项目开发测试）...
如何让电脑端配置的host在手机端生效 1.电脑上安装node版本不要太老下载地址: 安装完成后验证命令 :node -v 2.安装全局whistle 安装命令:npm install whistl ...
H5调用相机，裁剪，压缩照片
最近项目中遇到拍照,预览上传的问题,苹果手机不兼容,拍照旋转90度,在网上查找出好多方法,都无效,最后用input调用相机,然后用canvas画布裁剪照片,压缩保存,代码如下. <!DOCTYP ...

h5 调起相机_Html5在手机端调用相机的方法实现

h5 调起相机_Html5在手机端调用相机的方法实现相关推荐

最新文章

热门文章