欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android webview实现拍照的方法

程序员文章站 2023-11-26 16:46:58
android webview实现拍照的方法 1. html 
...

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

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