Android webview实现拍照的方法

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); 
... 

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。