getUserMedia调用摄像头拍照

暮冬十七

已于 2022-09-19 16:03:19 修改

阅读量763

点赞数

文章标签： javascript 前端 css3 音视频

于 2022-09-07 15:18:44 首次发布

本文链接：https://blog.csdn.net/weixin_45835771/article/details/126746569

版权

开箱即用

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>拍照</title>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
      // 初始化
      var vConsole = new VConsole();
      console.log("Hello world");
    </script>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      .loading {
        display: flex; /*让dot和文字在同一行*/
      }
      dot {
        /*让点垂直居中*/
        height: 1em;
        line-height: 1;
        /*让点垂直排列*/
        display: flex;
        flex-direction: column;
        /*溢出部分的点隐藏*/
        overflow: hidden;
      }
      dot::before {
        /*三行三种点，需要搭配white-space:pre使用才能识别\A字符*/
        content: "...\A..\A.";
        white-space: pre-wrap;
        animation: dot 3s infinite step-end; /*step-end确保一次动画结束后直接跳到下一帧而没有过渡*/
      }
      .src-video{
        width: 400px;
        height: 400px;
        object-fit: cover;
      }
      .photo {
        /* width: 100%; height: auto;max-width: 100%; display: block; 
         */
         width: 100%;
         height: 100%;
         object-fit: scale-down;
      }
      @keyframes dot {
        0% {
          transform: translateY(-3em);
        }
        50% {
          transform: translateY(-1em);
        }
        100% {
          transform: translateY(0em);
        }
      }
    </style>
  </head>

  <body>
    <span class="loading">正在加载中<dot>...</dot> </span>
    <button onclick="reversal()">反转</button>
    <button onclick="closeMedia()">关闭摄像头</button>
    <button onclick="openMedia()">开启摄像头</button>
    <button onclick="takePhoto()">拍照</button><br /><br />
    <video class="src-video" autoplay playsinline></video>
    <div class="img-box" style="display: none;">
      <img src="" alt="" class="photo" />
    </div>
  </body>
  <script>
    let srcVideo = document.querySelector("video.src-video");
    let mediaStream;
    let photo = document.querySelector("img.photo");
    let imgbox = document.querySelector("div.img-box");
    let front = true
    // 开启摄像头
    let openMedia = async function () {
      photo.src = "";
      let constraints = {
        audio: false, //音频轨道
        video: {
          facingMode: front ? 'user' : 'environment',
        }, //视频轨道
      };
      const mediaPromise =
        window.navigator.mediaDevices.getUserMedia(constraints);
      console.log(navigator.mediaDevices);
      const isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信
      const isComWx = /wxwork/i.test(navigator.userAgent); // 是否企业微信
      console.log(isComWx);
      console.log(isWx);
      await mediaPromise
        .then(function (stream) {
          /* 使用这个stream stream */
          mediaStream = stream;
          srcVideo.srcObject = stream;
          srcVideo.onloadedmetadata = async () => {
              await srcVideo.play();
          };
        })
        .catch(function (err) {
          /* 处理error */
          alert(err);
        });
    };

    // 拍照
    let takePhoto = function () {
      // let canvas = document.querySelector("#canvas");
      const width = srcVideo.videoWidth
      const height = srcVideo.videoHeight
      const canvas = document.createElement('canvas')
      //获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
      canvas.width = width
      canvas.height = height
      let ctx = canvas.getContext("2d");
      ctx.drawImage(srcVideo, 0, 0, width, height);
      srcVideo.style.display = 'none'
      photo.src = canvas.toDataURL()
      imgbox.style.display = 'block'
    };

    // 关闭摄像头
    let closeMedia = function () {
        return new Promise(reslove => {
            mediaStream.getTracks().forEach(async(track) => {
              await track.stop();
            });
            reslove()
        })
    };

    let reversal = function () {
        closeMedia().then(() => {
            front = ! front
            openMedia()
        })
    }
  </script>
</html>
 以上就是使用getUserMedia调用摄像头拍照的所有代码了 欢迎各位大佬指点