如何调取摄像头api、拍照

缺钱从零开始学前端
399 阅读1分钟
  1. 简单搭建一下页面
<video autoplay style="width: 480px; height: 320px;"></video>
<div>
  <button id="capture">拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
  1. 获取标签
//2.获取标签
      function $(select){
        return document.querySelector(select);
      }
      
      let video = $('video');
      let capture = $('#capture');
      let ctx = $('#canvas').getContext('2d');

3.用navigator.mediaDevices.getUserMedia调取摄像头的媒体对象

这个方法的参数为捕捉到的流所要放置的位置 这里为video。后面有.then(捕捉成功时走的方法).catct(失败时走的方法)

 //3.调取摄像头的媒体对象
      navigator.mediaDevices.getUserMedia({
        video:{
          width: 480,
          height: 320
        }
      }).then(function(stream){//成功走then
        
      }).catch(function(err){//失败走catch
        console.log(err);
      })

4.捕捉stream成功时 先获取URL 然后用try/catct捕捉。成功获取到URL时 用

URL.createObjectURL(stream)获取video所用到的src

      //3.调取摄像头的媒体对象
      navigator.mediaDevices.getUserMedia({
        video:{
          width: 480,
          height: 320
        }
      }).then(function(stream){//成功走then
        //4.获取URL对象
        //
        let URL = window.URL || window.webkitURL;
        try {
          video.src = URL.createObjectURL(stream);
        } catch (error) {
          video.srcObject = stream;
        }
      }).catch(function(err){//失败走catch
        console.log(err);
      })
  1. 用canvas捕捉画面（拍照） canvas.drawImage()方法里第一个参数也可以是video对象
//5.点击拍照
      capture.onclick = function(){
        ctx.drawImage(video,0,0,480,320);
      }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <video autoplay style="width: 480px; height: 320px;"></video>
  <div>
    <button id="capture">拍照</button>
  </div>
  <canvas id="canvas" width="480" height="320"></canvas>

  <script type="text/javascript">
    window.onload = function(){
      function $(select){
        return document.querySelector(select);
      }
      //1.获取标签
      let video = $('video');
      let capture = $('#capture');
      let ctx = $('#canvas').getContext('2d');

      //2.调取摄像头的媒体对象
      navigator.mediaDevices.getUserMedia({
        video:{
          width: 480,
          height: 320
        }
      }).then(function(stream){//成功走then
        //获取URL对象
        let URL = window.URL || window.webkitURL;
        try {
          video.src = URL.createObjectURL(stream);
        } catch (error) {
          video.srcObject = stream;
        }
      }).catch(function(err){//失败走catch
        console.log(err);
      })

      //3.点击拍照
      capture.onclick = function(){
        ctx.drawImage(video,0,0,480,320);
      }
    }
  </script>
</body>
</html>
avatar
文章
阅读
粉丝