调用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事件
})