title: Open Camera in Android WebView using HTML JS?
body: <p>I want to access camera using HTML JavaScirpt in a webview in Android phone within my native application. I tried a lot of solutions none were helpfull. The html string is as follows,</p>
  
  <pre><code>String html =
          "&lt;!DOCTYPE html&gt;"+
  "&lt;html&gt;"+
  "&lt;head&gt;"+
  "&lt;meta charset='utf-8'&gt;"+
  "&lt;title&gt;Display Webcam Stream&lt;/title&gt;"+
  "&lt;style&gt;"+
  "#container {"+
  "    margin: 0px auto;"+
   "   width: 500px;"+
   "   height: 375px;"+
   "   border: 10px #333 solid;"+
  "}"+
  "#videoElement {"+
  "    width: 500px;"+
  "    height: 375px;"+
  "    background-color: #666;"+
  "}"+
  "#canvas {"+
  "    width: 500px;"+
  "    height: 375px;"+
  "    background-color: #CCC;"+
  "}"+
  "&lt;/style&gt;"+
  "&lt;/head&gt;"+
  "&lt;body&gt;"+
  "&lt;input id='fileselect' type='file' accept='image/*' capture='camera'&gt;"+
  "&lt;div id='container'&gt;"+
   "   &lt;video autoplay id='videoElement'&gt;"+
      "&lt;/video&gt;"+
  "&lt;/div&gt;"+
  "&lt;canvas id='canvas' width='500' height='375'&gt;&lt;/canvas&gt;"+
  "&lt;input type='button' value='Save' id='save' /&gt;"+
  "&lt;img id='imgtag' src='' width='500' height='375' alt='capture' /&gt; "+
  "&lt;script&gt;"+
  "var video = document.querySelector('#videoElement');"+
  "navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;"+  
  "if (navigator.getUserMedia) {       "+
  "    navigator.getUserMedia({video: true}, handleVideo, videoError);"+
  "}   "+
  "function handleVideo(stream) {"+
  "    video.src = window.URL.createObjectURL(stream);"+
  "}"+
  "function videoError(e) {"+
  "}"+
  "var v,canvas,context,w,h;"+
  "var imgtag = document.getElementById('imgtag');"+
  "var sel = document.getElementById('fileselect');"+
  "document.addEventListener('DOMContentLoaded', function(){"+
  "    v = document.getElementById('videoElement');"+
  "    canvas = document.getElementById('canvas');"+
  "    context = canvas.getContext('2d');"+
  "   w = canvas.width;"+
  "    h = canvas.height;"+
  "},false);"+
  "function draw(v,c,w,h) {"+
   "   if(v.paused || v.ended) return false;"+
    "  context.drawImage(v,0,0,w,h);"+
     "var uri = canvas.toDataURL('image/png');"+
     "imgtag.src = uri;"+
  "}"+
  "document.getElementById('save').addEventListener('click',function(e){"+
  "   draw(v,context,w,h);"+
  "});"+
  "var fr;"+
  "sel.addEventListener('change',function(e){"+
  "   var f = sel.files[0];"+
  "   fr = new FileReader();"+
  "   fr.onload = receivedText;"+
  "   fr.readAsDataURL(f);"+
  "})"+
  "function receivedText() {"+        
  "   imgtag.src = fr.result;"+
  "} "+
  "&lt;/script&gt;"+
  "&lt;/body&gt;"+
  "&lt;/html&gt;";
  </code></pre>
  
  <p>I am loading this string into my webview,</p>
  
  <pre><code>WebView browser;
      browser=(WebView)findViewById(R.id.WebView01);
      browser.getSettings().setJavaScriptEnabled(true);
      browser.getSettings().setPluginsEnabled(true);
      browser.addJavascriptInterface(new WebAppInterface(this), "Android");
      browser.loadDataWithBaseURL("", html, mimeType, encoding, "");
  </code></pre>
  
  <p>I always get an exception in the log messages: </p>
  
  <blockquote>
    <p>"Using the 'capture' attribute as an enum is deprecated. Please use it as a boolean and specify the media types that should be accepted in the 'accept' attribute." (or) "block webkit draw"</p>
  </blockquote>
  
  <p>Any help will be greatfull. Thanks in advance</p>