Android webview實(shí)現(xiàn)拍照的方法
Android webview實(shí)現(xiàn)拍照的方法
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 中權(quán)限設(shè)置:
<?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時(shí)需要開(kāi)啟JavaScript和文件訪問(wèn)權(quán)限。
... mWebView = (AdvancedWebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webSettings.setAllowFileAccess(true); ...
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- Android studio點(diǎn)擊跳轉(zhuǎn)WebView詳解
- Android 中ViewPager中使用WebView的注意事項(xiàng)
- Android 解決WebView調(diào)用loadData()方法顯示亂碼的問(wèn)題
- Android webview手動(dòng)校驗(yàn)https證書(shū)(by 星空武哥)
- Android APP之WebView校驗(yàn)SSL證書(shū)的方法
- 詳解Android WebView的input上傳照片的兼容問(wèn)題
- Android的WebView與H5前端JS代碼交互的實(shí)例代碼
- Android webview 內(nèi)存泄露的解決方法
相關(guān)文章
Android應(yīng)用程序轉(zhuǎn)到后臺(tái)并回到前臺(tái)判斷方法
這篇文章主要介紹了Android應(yīng)用程序轉(zhuǎn)到后臺(tái)并回到前臺(tái)判斷方法的相關(guān)資料,需要的朋友可以參考下2016-11-11Android實(shí)現(xiàn)獲取應(yīng)用程序相關(guān)信息列表的方法
這篇文章主要介紹了Android實(shí)現(xiàn)獲取應(yīng)用程序相關(guān)信息列表的方法,是應(yīng)用管理器常用的功能,需要的朋友可以參考下2014-07-07Android遞歸方式刪除某文件夾下的所有文件(.mp3文件等等)
以刪除為例,當(dāng)然,對(duì)于遍歷某文件夾下的所有文件均可用這個(gè)方法。如搜索.mp3文件等,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06Android 通過(guò)自定義view實(shí)現(xiàn)水波紋效果案例詳解
這篇文章主要介紹了Android 通過(guò)自定義view實(shí)現(xiàn)水波紋效果案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08Android 掃描附近的藍(lán)牙設(shè)備并連接藍(lán)牙音響的示例
本篇文章主要介紹了Android 掃描附近的藍(lán)牙設(shè)備并連接藍(lán)牙音響的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09Android Studio做超好玩的拼圖游戲 附送詳細(xì)注釋源碼
這篇文章主要介紹了用Android Studio做的一個(gè)超好玩的拼圖游戲,你是0基礎(chǔ)Android小白也能包你學(xué)會(huì),另外附送超詳細(xì)注釋的源碼,建議收藏!2021-08-08Android中使用PopupWindow 仿微信點(diǎn)贊和評(píng)論彈出
微信朋友圈的點(diǎn)贊和評(píng)論功能,有2個(gè)組成部分:左下角的“更多”按鈕;點(diǎn)擊該按鈕后彈出的對(duì)話框。這篇文章主要介紹了Android中使用PopupWindow 仿微信點(diǎn)贊和評(píng)論彈出,需要的朋友可以參考下2017-04-04Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn)
這篇文章主要介紹了Android自定義控件通用驗(yàn)證碼輸入框的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03