PC端末、携帯、タブレットカメラを呼び出して写真を撮ります.


PCのカメラを呼び出して写真を撮ります.
HTMLコード:
<div id="android-camera">
     <input type="button" title="     " value="     " onclick="getMedia()" />
     <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
     <canvas id="canvas" width="500px" height="500px"></canvas>
     <button id="snap" onclick="takePhoto()">  </button>
</div>
jsコード:
<script>
//     
   function getMedia(){
      let constraints = {
          video:{width:500,height:500},
          audio:true
      }
    //  video     
    let video = document.getElementById("video");
    //        ,    Promise  
    //  promise               MediaStream       
    //then() Promise      
    //then()       , then()           then()    ,         
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then(function(MediaStream){
        video.srcObject = MediaStream;
        video.play();
    });
  }
//  
  function takePhoto(){
       //  Canvas  
       let video = document.getElementById("video");
       let canvas = document.getElementById("canvas");
       let ctx = canvas.getContext('2d');
       ctx.drawImage(video,0,0,500,500);
  }
</script>
携帯電話、タブレットカメラを呼び出して写真を撮ります.
HTMLコード:
<input id="uploadFile" type="file" name="uploadFile" accept="images/*" capture="camera" onchange="imgChange(event)" /> //visibility:hidden
<img src="" id="showImage" alt=""/>
<input type="button" value="     " id="choose_photo" />
JSコード:
function imgChanfe(e){
  console.info(e.target.files[0]);  //    
  var dom = $("input[id^='imgTest']")[0];
  var reader = new FileReader();
  reader.onload = (function(file){
    return function(e){
      var sss = $("#showImage");
      $("#showImage")[0].src = this.result
    };
  })(e.target.files[0]);
  reader.readAsDateURL(e.target.files[0]);
}
//       
$("#choose_photo").click(function(){   //  file    
  $("#uploadFile").click();   //file change  
})