Android webview实现拍照的方法

<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> 

<?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> 

... 
 mwebview = (advancedwebview) findviewbyid(r.id.webview); 
    websettings websettings = mwebview.getsettings(); 
    websettings.setjavascriptenabled(true); 
    websettings.setbuiltinzoomcontrols(true); 
    websettings.setallowfileaccess(true); 
...