Android webview实现拍照的方法

概述Androidwebview实现拍照的方法1.html <divid=\"pnlVideo1\"><inputtype=\"hidden\"name=\"imgNric1\"id=\"imgNric1\"/>

AndroID webvIEw实现拍照的方法

1. HTML 

<div ID="pnlVIDeo1">               <input type="hIDden" name="imgNric1" ID="imgNric1" />               <label ID="nric"  >Picture of Asset</label><br /><br />               <button ID="btnopen1"  type="button">Open WebCam</button>               <select ID="vIDeoSource" >                                </select>               <div ID="vdoOne" >                 <vIDeo ID="vIDeo"  wIDth="300" autoplay></vIDeo>                 <canvas ID="canvasPrevIEw"  wIDth="300" height="224"></canvas>                 <canvas ID="canvasupload"  wIDth='300' height='224'></canvas>                 <button ID="snap"  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,300,224);       contextUpload.drawImage(vIDeoElement,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); ... 

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

总结

以上是内存溢出为你收集整理的Android webview实现拍照的方法全部内容，希望文章能够帮你解决Android webview实现拍照的方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。