移动端H5拉起手机相机

您所在的位置:网站首页 0p浏览器相机权限 移动端H5拉起手机相机

移动端H5拉起手机相机

2023-11-06 22:51| 来源: 网络整理| 查看: 265

移动端H5拉起手机相机

目前浏览器拉起手机相机的有两种方式MediaDevices.getUserMedia()和使用input标签

input 标签拉起相机

只要正确的配置accept和capture就可以打开手机相册,相机,麦克风

camear camcorder microphone

注意踩坑

确定App(嵌入webview的APP,或者所使用的浏览器)有对应的权限 你可能遇见安卓手机拉起相机失败只能打开相册此时你要修改webview中的一些配置具参考这篇文章 MediaDevices.getUserMedia()拉起相机

MediaDevices.getUserMedia()可以调用相机和音频等,只是兼容性不太好,比如阿里的人脸识别如果支持 MediaDevices 就是用 MediaDevices 不支持就用 input 标签

// 这里是MDN的小DEMO更多细节自己查阅吧 var constraints = { audio: true, video: { width: 1280, height: 720 } }; navigator.mediaDevices.getUserMedia(constraints) .then(function(mediaStream) { var video = document.querySelector('video'); video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; })

注意踩坑

确定App(嵌入webview的APP,或者所使用的浏览器)有对应的权限 你在电脑上测试怎么都OK可用手机就不好使了,那么你很可能没有使用https协议在移动端测试要使用https协议 参考 ios各系统市场占有量 安卓各版本系统市场占有量 getUserMedia API及HTML5 调用手机摄像头拍照 腾讯人脸验证 百度活体检查


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3