js 如何调用摄像头拍照-526互联

1.第一种

业务逻辑需要人脸验证，需要通过调用摄像头获取人脸来调用接口做对比，所以学习了一下js关于调用摄像头拍照。主要通过video调用摄像头和canvas截取画面。

<!DOCTYPE html>
<html lang="en">
 
<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>Document</title>
</head>
 
<body>
    <video width="500" height="500" autoplay class="video"></video>
    <canvas width="500" height="500"></canvas>
    <button onclick="openx()">调用摄像头</button>
    <button onclick="pho()">拍照</button>
    <button onclick="exit()">关闭摄像头</button>
</body>
 
</html>
<script>
    let video = document.querySelector('.video');
    let canvas = document.querySelector('canvas');
    function openx() {
        let constraints = {
            video: {            //这里是摄像头的信息
                height: 500,
                width: 500
            },
        // audio: true,  //是否开启麦克风
        }
        let isok = navigator.mediaDevices.getUserMedia(constraints); //这里主要是用于请求用户打开摄像头的权限
        isok.then(res => {     //可以看出是使用promise封装的 那么我们就可以使用then和catch
            video.srcObject = res;    //用户允许时 将摄像头对象的画面转移到video上面
            video.play();                //打开video的画面
        }).catch((err) => {
            console.log(err)            //拒绝时打印错误信息
        })
    }
    function pho() {
        canvas.getContext("2d").drawImage(video, 0, 0, 300, 300);   //第一个参数为要截取的dom对象，第二个和第三个为xy轴的偏移值    3-4为截取图像的大小
    }
    function exit() {
        video.srcObject.getTracks()[0].stop();   //这里如果打开了麦克风、getTracks是一个数组，我们同样需要获取下标[1]来关闭摄像头 打开麦克风[0]就是麦克风
    }
</script>

View Code

上述代码看起来并不多，包含了打开-截取图像-关闭摄像头的功能，足以满足功能需求。

https://blog.csdn.net/m0_72436362/article/details/128321359

外接摄像头没错，笔记本的摄像头报错

$("img").css("src", canvas.toDataURL("image/png"));

2.第二种，笔记本的摄像头打开没报错

<!DOCTYPE html>
<html lang="ZH-CN">
<head>
  <meta charset="utf-8">
  <title>web RTC 测试</title>
  <style>
    .booth {
      width:400px;
     
      background:#ccc;
      border: 10px solid #ddd;
      margin: 0 auto;
    }
  </style>
</head>
<body>
    <article>
      <section>
        <video id="video"></video>
      </section>
      <section>
        <audio id="audio"></audio>
      </section>
      <button id="btn">拍照</button>
      <section>
        <canvas id="canvas"></canvas>
      </section>
      <section><img src="" alt="" id="img"></section>
    </article>

    <article>
      <header>相关知识</header>
      <h2>获取用户媒体:</h2>
      <p>
        <code>navigator.mediaDevices.getUserMedia({video: true, audio: true})  // 异步操作</code>
      </p>

      <h2>枚举媒体数:video,audio输入输出设备</h2>
      <p><code>navigator.mediaDevices.enumerateDevices()  // 异步操作</code></p>
    </article>
  <script>
    let convas = document.querySelector("#canvas"); //
    let video = document.querySelector("#video");
    let audio = document.querySelector("audio");
    let img = document.querySelector("#img");
    let btn = document.querySelector("button");
    let context = canvas.getContext('2d');
    let width = 320; //视频和canvas的宽度
    let height = 0; //
    let streaming = false; // 是否开始捕获媒体
    
    // 获取用户媒体,包含视频和音频
    navigator.mediaDevices.getUserMedia({video: true, audio: true})
      .then(stream => {
      video.srcObject = stream; // 将捕获的视频流传递给video  放弃window.URL.createObjectURL(stream)的使用
      video.play(); //  播放视频
      audio.srcObject = stream;
      audio.play();
    });
    
    
    function tackcapture() {
      // 需要判断媒体流是否就绪
      if(streaming){
          context.drawImage(video, 0, 0, 350, 200);// 将视频画面捕捉后绘制到canvas里面
          img.src = canvas.toDataURL('image/png');// 将canvas的数据传送到img里
      }
    
    }
    
    btn.addEventListener('click',tackcapture,false); // 按钮点击事件
    
    // 监听视频流就位事件,即视频可以播放了
    video.addEventListener('canplay', function(ev){
          if (!streaming) {
            height = video.videoHeight / (video.videoWidth/width);
          
            video.setAttribute('width', width);
            video.setAttribute('height', height);
            canvas.setAttribute('width', width);
            canvas.setAttribute('height', height);
            streaming = true;
          }
        }, false);
  </script>
</body>
</html>

View Code

有些浏览器可能不支持此功能
必须通过服务器打开页面，通过files：//打开无效
如果通过远程服务器打开则必须是https协议， http协议也无法使用

转：https://www.cnblogs.com/scarecrowlxb/p/6804747.html

3.第三种

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>使用js调用设备摄像头并实现拍照</title>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      video {
        width: 200px;
      }
      button {
        width: 100px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <video src=""></video> <button class="shot">拍照</button>
      <canvas id="canvas"></canvas> <img src="" />
    </div>
    <a href="https://codesandbox.io/s/811w1z2xwj">点击编辑</a>

    <script type="text/javascript">
      // 视频大小
      var constraints = { audio: true, video: { width: 200, height: 250 } };
      // 开启视频
      navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(mediaStream) {
          console.log("getUserMedia:", mediaStream);
          var video = document.querySelector("video");
          video.srcObject = mediaStream;
          video.onloadedmetadata = function(e) {
            video.play();
          };

          // 使用canvas进行拍照
          var canvas = document.getElementById("canvas");
          $("button").on("click", function() {
            canvas.getContext("2d").drawImage(video, 0, 0, 200, 250);
            $("img").css("src", canvas.toDataURL("image/png"));
          });
        })
        .catch(function(err) {
          console.log(err.name + ": " + err.message);
        });
    </script>
    
</body>
</html>

View Code

转：http://www.taodudu.cc/news/show-6195164.html?action=onClick

https://811w1z2xwj.codesandbox.io/