Android webview method to take photos
1. html
<div > <input type="hidden" name="imgNric1" /> <label class="control-label labelfont" style="color:#888;font-weight:bold;">Picture of Asset</label><br /><br /> <button class="btn btn-default" type="button">Open WebCam</button> <select style="display:none"> </select> <div style="display:none;"> <video style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video> <canvas style="margin-top:15px;" width="300" height="224"></canvas> <canvas style="display:none;" width='300' height='224'></canvas> <button 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 = ('canvasPreview'); var canvasUpload = ('canvasUpload'); var contextPreview = ('2d'); var contextUpload = ('2d'); //#################### Video Source ####################### var videoElement = ('video'); var videoSelect = ('select#videoSource'); () .then(gotDevices).then(getStream).catch(handleError); = getStream; function gotDevices(deviceInfos) { for (var i = 0; i !== ; ++i) { var deviceInfo = deviceInfos[i]; var option = ('option'); = ; if ( === 'videoinput') { = || 'camera ' + ( + 1); (option); } else { ('Found ome other kind of source/device: ', deviceInfo); } } } function getStream() { if () { ().forEach(function (track) { (); }); } var constraints = { video: { optional: [{ sourceId: }] } }; (constraints). then(gotStream).catch(handleError); } function gotStream(stream) { = stream; // make stream available to console = stream; } function handleError(error) { ('Error: ', error); } //######################## End Video Source ################# // Get access to the camera! if ( && ) { ({ video: true }).then(function (stream) { = (stream); (); }); } else { ("pnlVideo1"). = "none"; } //// Trigger photo take ("snap").addEventListener("click", function () { (videoElement, 0, 0, 300, 224); (videoElement, 0, 0, 300, 224); ("video"). = "none"; ("snap"). = "none"; ("canvasPreview"). = "block"; var image = ("canvasUpload").toDataURL("image/jpeg"); image = ('data:image/jpeg;base64,', ''); $("#imgNric1").val(image); }); //// Trigger photo take ("btnOpen1").addEventListener("click", function () { ("vdoOne"). = "block"; ("video"). = "block"; ("snap"). = "block"; ("canvasPreview"). = "none"; }); </script>
2. Permission settings in Android studio:
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:andro package=""> <uses-permission android:name="" /> <!-- To auto-complete the email text field in the login form with the user's emails --> <uses-permission android:name=".GET_ACCOUNTS" /> <uses-permission android:name=".READ_PROFILE" /> <uses-permission android:name=".READ_CONTACTS" /> <uses-permission android:name="" /> <uses-permission android:name="" /> <uses-permission android:name=".ACCESS_NETWORK_STATE" /> <uses-permission android:name=".ACCESS_WIFI_STATE" /> <uses-permission android:name=".WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name=".ACCESS_FINE_LOCATION" /> <uses-permission android:name="" /> <uses-feature android:name="" 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="" /> <category android:name="" /> </intent-filter> </activity> <activity android:name=".LoginActivity" android:label="@string/title_activity_login"></activity> </application> </manifest>
3. JavaScript and file access rights are required when loading the view.
... mWebView = (AdvancedWebView) findViewById(); WebSettings webSettings = (); (true); (true); (true); ...
If you have any questions, please leave a message or go to the community of this site to exchange and discuss. Thank you for reading. I hope it can help you. Thank you for your support for this site!