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í)需要開啟JavaScript和文件訪問權(quán)限。
...
mWebView = (AdvancedWebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setAllowFileAccess(true);
...
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- Android studio點(diǎn)擊跳轉(zhuǎn)WebView詳解
- Android 中ViewPager中使用WebView的注意事項(xiàng)
- Android 解決WebView調(diào)用loadData()方法顯示亂碼的問題
- Android webview手動(dòng)校驗(yàn)https證書(by 星空武哥)
- Android APP之WebView校驗(yàn)SSL證書的方法
- 詳解Android WebView的input上傳照片的兼容問題
- Android的WebView與H5前端JS代碼交互的實(shí)例代碼
- Android webview 內(nèi)存泄露的解決方法
相關(guān)文章
Android studio 出現(xiàn) Unsupported major.minor version 52.0解決辦法
這篇文章主要介紹了Android studio 出現(xiàn) Unsupported major.minor version 52.0解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
Handler實(shí)現(xiàn)線程之間的通信下載文件動(dòng)態(tài)更新進(jìn)度條
每一個(gè)線程對(duì)應(yīng)一個(gè)消息隊(duì)列MessageQueue,實(shí)現(xiàn)線程之間的通信,可通過Handler對(duì)象將數(shù)據(jù)裝進(jìn)Message中,再將消息加入消息隊(duì)列,而后線程會(huì)依次處理消息隊(duì)列中的消息。這篇文章主要介紹了Handler實(shí)現(xiàn)線程之間的通信下載文件動(dòng)態(tài)更新進(jìn)度條,需要的朋友可以參考下2017-08-08
Android實(shí)現(xiàn)簡(jiǎn)單的自定義ViewGroup流式布局
本文我們將一起復(fù)習(xí)一下ViewGroup的測(cè)量布局方式。然后會(huì)以入門級(jí)的 FlowLayout 為例,來看看流式布局是如何測(cè)量與布局的,感興趣的可以了解一下2022-12-12
Android Studio 中aidl的自定義類的使用詳解
這篇文章主要介紹了Android Studio 中aidl的自定義類的使用詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android開發(fā)之InetAddress基礎(chǔ)入門簡(jiǎn)介與源碼實(shí)例
這篇文章主要介紹了Android開發(fā)之InetAddress基礎(chǔ)入門簡(jiǎn)介,需要的朋友可以參考下2020-03-03
Android 購(gòu)物車加減功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 實(shí)現(xiàn)購(gòu)物車加減功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Android使用Intent隱式實(shí)現(xiàn)頁面跳轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了Android使用Intent隱式來實(shí)現(xiàn)向上跳轉(zhuǎn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
Android數(shù)據(jù)加密之SHA安全散列算法
這篇文章主要為大家詳細(xì)介紹了Android數(shù)據(jù)加密之SHA安全散列算法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09

