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 snapshotvar 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 consolevideoElement.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 takedocument.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 takedocument.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-featureandroid:name="android.hardware.camera"android:required="true" /><applicationandroid: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><activityandroid: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);
...

android webview实现拍照相关推荐

Android+webview+h5 拍照闪退问题
Android在某些机型中拍照闪退最近一个Android的项目,使用webview+H5的混合开发模式.这样的模式主要是开发周期端,而且避免了机型兼容的问题.在实际使用中却发现了另外一些问题. 问题 ...
[Android] WebView中拍照或从相册上传图片
WebView 上传图片, 想必很多人都碰到过这样的场景. 而且 WebView 在4.4前后的区别非常大, 比如对URL跳转的格式, 对JS的注入声明等等, 4.4以后的WebView 已经是chr ...
android webview使用html5input id=input type=file/ 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个<input id="input" type="file"/ ...
html5 android 拍照上传,android webview使用html5 上传相册、拍照照片
本人编程新手,这次做的功能是android webview 嵌入HTML5的页面,页面中有一个标签,iOS直接就支持,但android中不支持,网上的帖子说是因为android屏蔽了文件上传功能还是怎 ...
android webview中h5调用拍照/相册通用支持代码
android webview中h5调用拍照/相册通用支持代码. 在webview的 WebChromeClient 中,重写 // For Android >= 5.0 @Overri ...
Android WebView 开发详解(二)
转载请注明出处 http://blog.csdn.net/typename/article/details/39495409powered by miechal zhao 概览: Android W ...
uni-app.04.发布成H5后，uni.chooseImage方法在android WebView上无法使用
发布成H5后,uni.chooseImage方法在android WebView上无法使用引言解决方案特别注意引言经过三个星期的折腾,uni-app的编码阶段宣告结束,正式进入到测试阶段.由 ...
WebView中拍照或从相册上传图片
转载自WebView中拍照或从相册上传图片注,安卓4.4系统的浏览器内核会出问题,即使使用本篇文章所讲的方法也无法吊起这个方法,属于谷歌系统的问题Stack Overflow 问题,但是4.4以上的 ...
关于android webview使用过程中遇到的一些问题总结
开发WebView的时候遇到了各种问题,在此总结一下. 一.webview的使用方法 1.1.layout中添加WebView的视图. <WebViewandroid:id="@+id ...

android webview实现拍照

android webview实现拍照相关推荐

最新文章

热门文章