android studio自定义拍照,Android webview实现拍照的方法

Android webview实现拍照的方法

1. html

Picture of Asset

Open WebCam

Snap Photo

$(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";

});

2. Android studio 中权限设置：

package="com.esbu.nec.bme">

android:name="android.hardware.camera"

android:required="true" />

android:allowBackup="true"

android:icon="@mipmap/sgh"

android:label="@string/app_name"

android:supportsRtl="true"

android:hardwareAccelerated="true"

android:theme="@style/AppTheme">

android:name=".LoginActivity"

android:label="@string/title_activity_login">

3. 加载view时需要开启JavaScript和文件访问权限。

...

mWebView = (AdvancedWebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

webSettings.setBuiltInZoomControls(true);

webSettings.setAllowFileAccess(true);

...

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！