Android webview实现拍照的方法
程序员文章站
2023-11-26 16:46:58
android webview实现拍照的方法
1. html
...
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 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 中权限设置:
<?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时需要开启javascript和文件访问权限。
... mwebview = (advancedwebview) findviewbyid(r.id.webview); websettings websettings = mwebview.getsettings(); websettings.setjavascriptenabled(true); websettings.setbuiltinzoomcontrols(true); websettings.setallowfileaccess(true); ...
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇: PHP文件下载类
下一篇: iOS开发之触摸事件以及手势