Android webview实现拍照的方法
时间:2019-04-07
本文章向大家介绍Android webview实现拍照的方法,主要包括Android webview实现拍照的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Android webview实现拍照的方法
1. html
<div id="pnlVideo1"> <input type="hidden" name="imgNric1" id="imgNric1" /> <label id="nric" class="control-label labelfont" style="color:#888;font-weight:bold;">Picture of Asset</label><br /><br /> <button id="btnOpen1" class="btn btn-default" type="button">Open WebCam</button> <select id="videoSource" style="display:none"> </select> <div id="vdoOne" style="display:none;"> <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video> <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas> <canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas> <button id="snap" class="btn btn-default" type="button">Snap Photo</button> </div> </div> <script type="text/javascript"> $(document).ready(function () { }); //// Elements for taking the snapshot var canvasPreview = document.getElementById('canvasPreview'); var canvasUpload = document.getElementById('canvasUpload'); var contextPreview = canvasPreview.getContext('2d'); var contextUpload = canvasUpload.getContext('2d'); //#################### Video Source ####################### var videoElement = document.querySelector('video'); var videoSelect = document.querySelector('select#videoSource'); navigator.mediaDevices.enumerateDevices() .then(gotDevices).then(getStream).catch(handleError); videoSelect.onchange = getStream; function gotDevices(deviceInfos) { for (var i = 0; i !== deviceInfos.length; ++i) { var deviceInfo = deviceInfos[i]; var option = document.createElement('option'); option.value = deviceInfo.deviceId; if (deviceInfo.kind === 'videoinput') { option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1); videoSelect.appendChild(option); } else { console.log('Found ome other kind of source/device: ', deviceInfo); } } } function getStream() { if (window.stream) { window.stream.getTracks().forEach(function (track) { track.stop(); }); } var constraints = { video: { optional: [{ sourceId: videoSelect.value }] } }; navigator.mediaDevices.getUserMedia(constraints). then(gotStream).catch(handleError); } function gotStream(stream) { window.stream = stream; // make stream available to console videoElement.srcObject = stream; } function handleError(error) { console.log('Error: ', error); } //######################## End Video Source ################# // Get access to the camera! if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) { videoElement.src = window.URL.createObjectURL(stream); videoElement.play(); }); } else { document.getElementById("pnlVideo1").style.display = "none"; } //// Trigger photo take document.getElementById("snap").addEventListener("click", function () { contextPreview.drawImage(videoElement, 0, 0, 300, 224); contextUpload.drawImage(videoElement, 0, 0, 300, 224); document.getElementById("video").style.display = "none"; document.getElementById("snap").style.display = "none"; document.getElementById("canvasPreview").style.display = "block"; var image = document.getElementById("canvasUpload").toDataURL("image/jpeg"); image = image.replace('data:image/jpeg;base64,', ''); $("#imgNric1").val(image); }); //// Trigger photo take document.getElementById("btnOpen1").addEventListener("click", function () { document.getElementById("vdoOne").style.display = "block"; document.getElementById("video").style.display = "block"; document.getElementById("snap").style.display = "block"; document.getElementById("canvasPreview").style.display = "none"; }); </script>
2. Android studio 中权限设置:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.esbu.nec.bme"> <uses-permission android:name="android.permission.INTERNET" /> <!-- To auto-complete the email text field in the login form with the user's emails --> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.READ_PROFILE" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-feature android:name="android.hardware.camera" android:required="true" /> <application android:allowBackup="true" android:icon="@mipmap/sgh" android:label="@string/app_name" android:supportsRtl="true" android:hardwareAccelerated="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".LoginActivity" android:label="@string/title_activity_login"></activity> </application> </manifest>
3. 加载view时需要开启JavaScript和文件访问权限。
... mWebView = (AdvancedWebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webSettings.setAllowFileAccess(true); ...
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- 用57行代码搞定花8000万美元采购车牌识别项目
- Cloudera Manager Server服务在RedHat7状态显示异常分析
- 开源 | 基于Python的人脸识别:识别准确率高达99.38%!
- 转录组数据的基因表达变化情况探索
- 如何配置Kerberos服务的高可用
- 利用深度学习生成梵高风格画像
- 使用Python-Requests实现ODL对OVS的流表下发
- Keras入门必看教程
- bedtools 用法大全(一文就够吧)
- 区块链资产安全攻略
- 如何在Kudu1.5中使用Sentry授权
- 深度学习入门实战
- 如何使用Zookeeper实现HiveServer2的HA
- Python 统计个人加密货币资产
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 有一种遗憾,是跑程序却没用上_______
- Android使用注解代替枚举节省系统内存开销的方法
- Android实现自定义验证码输入框效果(实例代码)
- flutter 实现多布局列表的示例代码
- flutter TextField换行自适应的实现
- 如何造个android Flow流式响应的轮子
- Flutter混合开发详解
- Android 单双击实现的方法步骤
- Android多渠道打包时获取当前渠道的方法
- Flutter Dio二次封装的实现
- android开发通过Scroller实现过渡滑动效果操作示例
- Android9.0 静默安装源码的实现
- Flutter路由框架Fluro使用简介
- Android倒计时神器(CountDownTimer)
- Kotlin如何安全访问lateinit变量的实现