html调起苹果手机摄像头_iOS | H5直接调用手机的摄像头进行拍照或录像

最近公司做的一个H5项目，有个需求，就是要点击某个div，直接唤起手机的拍照或者录像功能。

这里需要注意的点是：

下面的方法在安卓手机上测试是可以的(只测试了华为手机华为P10plus、华为 P7-L09、华为Mate10)。

但是在苹果手机上，需要分iOS系统，在iOS10及以上系统，使用input的属性capture='camera'，可以直接访问手机的相机功能，而在iOS9及以下系统，使用input的属性capture='camera'，会从底部弹出actionSheet，让用户去选择是拍照，还是选择去相册选择。(测试了 iPhone 6 iOS 9.3， iPhone 6s iOS 10.3， iPhone 6Plus iOS 11.1， iPhone 6 iOS 11.2)

代码如下：

代码中引用了 JQuery 方法，所以 JQuery 的js文件自己添加一下。

这里是直接获取iOS相机功能

照相机

摄像机

// 隐式创建一个input控件，然后实现直接访问相册

var inputUploadObj = '';

$("#btnID").on("click", function() {

inputUploadObj = document.createElement('input')

inputUploadObj.setAttribute('id', 'input_upload_ID');

inputUploadObj.setAttribute('type', 'file');

// 添加这个属性，就可以唤起相机的功能

inputUploadObj.setAttribute('capture', 'camera');

// 这里如果不加属性 accept 是 "image/*" 或者 "video/*"，就默认打开摄像头，既可以拍照也可以录像

inputUploadObj.setAttribute('accept', 'image/*');

inputUploadObj.setAttribute("style", 'visibility:hidden');

// 这里将创建的隐式input控件拼接到body的最后面，会增加页面的长度，所以要在适当的时候，移除掉这个隐式创建的input控件

document.body.appendChild(inputUploadObj);

// 这里是模拟点击了input控件

inputUploadObj.click();

});

效果图如下：

下面三张图为安卓的效果图：

Android_001.png

Android_002.jpg

Android_003.jpg

下面三张图为苹果手机 iPhone 6 iOS 9.3 的效果图：

iOS_09_001.jpg

iOS_09_002.jpg

iOS_09_003.jpg

下面三张图为苹果手机 iPhone 6Plus iOS 11.2 的效果图：

iOS_10_11_001.jpg

iOS_10_11_002.jpg

iOS_10_11_003.jpg

html调起苹果手机摄像头_iOS | H5直接调用手机的摄像头进行拍照或录像相关推荐

html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
微信公众号H5开发——调用相册和摄像头并上传服务器
之前的文章介绍了关于微信JSSDK调用,下面介绍一下其中的一个最常用的功能--调用相册和摄像头使用此功能之前先参考:微信JSSDK 在通过了config接口验签成功之后,我们就可以调用微信JSSDK ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
h5+实现手机端的录音，拍照，录像
使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放,图片上传下载,拍照,录像的功能,并提供上传下载的功能.开发工具使用hbuilder,该开发工具有模板和demo可以参考实现快速的开发a ...
HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
为什么80%的码农都做不了架构师?>>> 但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的A ...
html5 android6.0摄像头,HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试...
但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的API更替为MediaDevices.getUserMedia.Me ...
使用JS调用手机本地摄像头或者相册图片识别二维码/条形码
接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...
H5页面调用手机打电话、发短信、传邮件功能
问题背景在h5页面,点击某个按钮或图标时,调起手机打电话.发短信以及传邮件的功能,可以用一个很简单的方法实现解决方法在需要的地方加上标签,点击即可调起相关功能弹窗 <!-- 打电话 --& ...
python 控制手机摄像头_python+open cv调用手机摄像头，保存文件
import cv2 cv2.namedWindow("camera", 1) # 开启ip摄像头 video = "http://admin:admin@192.168 ...

html调起苹果手机摄像头_iOS | H5直接调用手机的摄像头进行拍照或录像

html调起苹果手机摄像头_iOS | H5直接调用手机的摄像头进行拍照或录像相关推荐

最新文章

热门文章