Android webview實現(xiàn)拍照的方法

從策劃到設計制作，每一步都追求做到細膩，制作可持續(xù)發(fā)展的企業(yè)網站。為客戶提供成都網站設計、做網站、網站策劃、網頁設計、域名注冊、網站空間、網絡營銷、VI設計、 網站改版、漏洞修補等服務。為客戶提供更好的一站式互聯(lián)網解決方案,以客戶的口碑塑造優(yōu)易品牌,攜手廣大客戶,共同發(fā)展進步。

1. html 

<div id="pnlVideo1"> 
              <input type="hidden" name="imgNric1" id="imgNric1" /> 
              <label id="nric" class="control-label labelfont" >Picture of Asset</label><br /><br /> 
              <button id="btnOpen1" class="btn btn-default" type="button">Open WebCam</button> 
              <select id="videoSource" > 
                 
              </select> 
              <div id="vdoOne" > 
                <video id="video"  width="300" autoplay></video> 
                <canvas id="canvasPreview"  width="300" height="224"></canvas> 
                <canvas id="canvasUpload"  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> 

網站標題：Androidwebview實現(xiàn)拍照的方法-創(chuàng)新互聯(lián)
文章鏈接：http://aaarwkj.com/article36/ihpsg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站內鏈、網站建設、網站維護、外貿建站、響應式網站、企業(yè)建站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)