android webview调用摄像头,使用前端代码js vue等调用webview摄像头或者文件

最新推荐文章于 2024-07-02 11:59:26 发布

房小探

最新推荐文章于 2024-07-02 11:59:26 发布

阅读量1.4k

点赞数

文章标签： android webview调用摄像头

本文介绍了如何在Android 8.0的WebView中实现摄像头调用和文件选择功能，提供了详细代码示例，适用于Vue等前端框架。内容包括设置权限、HTML界面设计、JavaScript交互及Android端的文件选择回调处理。

摘要由CSDN通过智能技术生成

写着文章的初衷还是想让后来者少走一点弯路,度娘出来的确实坑爹,教程基本都是老的,只能调用文件或只能调用摄像头,本次测试再android 8.0上小米pad上测试过,需要的拿走

先上个图,形象一些

2644acd3606b

732D4C9AC1A5FB364399FD0BCED199B0.jpg

权限这块是

本地测试html 放在assets目录下

/p>

"-//W3C//DTD XHTML 1.0 Transitional// EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

H5调用手机相册摄像头以及文件夹

input{outline: none;height: 30px;line-height: 30px;display:inline-block;font-size: 1rem;width: 50%;border:none;padding-left: 20px;color: #a8a8a8;}

#takepicture_1{width: 15%;height: 32px; margin-right: 8%;border:none; background: url(images/camera_03.png) no-repeat;display: inline-block;float: right;outline: none;padding-left: 0px;}

#takepicture{width:100% !important;height:32px!important;border:none !important; background: url(images/camera_03.png) no-repeat !important;display: inline-block !important;float: right !important;outline: none !important;padding-left: 0px !important;opacity: 0;}

.images{width: 100%;height: auto;text-align: center;}

#preview{max-width: 100%;height: auto;display: inline-block;margin:auto;}

上传：

οnfοcus="if (placeholder =='点击输入或者上传图片'){placeholder =''}"

οnblur="if (placeholder ==''){pl