SoFunction
Updated on 2025-04-10

Android webview method to take photos

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!