请问如何用php写的WEB程序调用PC上摄像头进行扫脸

Question

用PHP写了一个WEB程序，其中有个功能，会员表要记录人脸信息，会员登录时可以直接扫脸登录

人脸搜索和人脸检测准备用百度的，已经研究明白

但前端如何用WEB调用PC上的摄像头，自动拍照生成图片，这块不知道如何实现

请给我一个思路就行

Answer 1

参考：

<template>
  <div>
    <div class="face_header">
      <div class="face_header_con">
        <p class="face_header_lf">{{ this.testInfo.examName }}</p>
        <a class="face_header_rg" @click="logoutHandle">
          <span class="headsp"><img src="@/assets/images/exit.png"/></span>
          退出
        </a>
        <router-link to="/profile" class="face_header_rg">
          <span class="headsp"><img src="../assets/images/icon-user.png"/></span
          >{{ this.userInfo.userName }}
        </router-link>
      </div>
    </div>
    <div class="face_con">
      <div class="face_content">
        <div class="face_con_left">
          <h1 class="face_con_tit">
            开始检测摄像头
            <p>
              请调整好摄像头，确保摄像头能够正常显示，并采集到正脸的位置，点击下面按钮开始检测
            </p>
            <div class="face_con_tit">
              <div class="face_yanzhen">
                <span>
                  <video id="videoCamera" style="width:100%;height:100%"></video>
                  <canvas
                    id="canvasCamera"
                    width="100%"
                    style="display: none;"
                  ></canvas>
                  <a
                    class="face_yanzhen_btn"
                    href="javascript:void(0);"
                    @click="setImage"
                    >我已调好，开始检测</a
                  >
                </span>
              </div>
            </div>
            <!-- <p class="yanzhen_con">
              说明：<br />
              如摄像头不能正常显示，请阅读右边的常见问题，或拨打以下电话：<br />
              林老师13250289550、张老师18022368859、陈老师13267869678、柳老师15915910399
            </p> -->
          </h1>
        </div>
        <div class="face_con_right">
          <h1 class="face_con_tit face_right_tit">常见问题:</h1>
          <p style="margin-top:0px;">
            1、不支持IE浏览器，建议使用火狐、谷歌、Edge浏览器进行考试
          </p>
          <p>2、若浏览器弹出是否允许调用摄像头，请点击允许</p>
          <p>
            <img src="@/assets/images/cm.png" style="width:100%" />
          </p>
          <p>
            3、如果问题还存在，请按<a
              href="https://examai.cn/pc/zhinan.pdf"
              target="_blank"
              ><font color="red"><b>启用摄像头操作指南</b></font></a
            >进行操作>
          </p>
          <p>
            <font size="3"
              ><b>4、技术支持:<br /><span v-html="description"/></b>
            </font>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
window.addEventListener(
  "popstate",
  function(e) {
    this.closeCamera();
    console.log(e);
  },
  false
);
import { getExamById, myInfo, logout, sysDescById } from "@/api/login";
export default {
  name: "CheckVideo",
  data() {
    return {
      examBean: {
        token: ""
      },
      tokenBean: {
        token: "",
        examUserId: ""
      },
      descBean: {
        token: "",
        id: ""
      },
      userInfo: {},
      testInfo: {},
      examUserId: "",
      imgSrc: "",
      video: null,
      context: null,
      canvas: null,
      openSuccess: true,
      description: ""
    };
  },
  created() {
    this.examBean.token = this.getToken();
    this.examUserId = this.$route.query.examUserId;
    this.tokenBean.token = this.getToken();
    this.tokenBean.examUserId = this.examUserId;
    this.descBean.token = this.getToken();
    this.descBean.id = 14;
    this.initData();
    setTimeout(() => {
      this.getCamera();
    }, 1000);
  },
  methods: {
    initData() {
      myInfo(this.examBean).then(res => {
        if (res.code === 200) {
          console.log(res.data);
          this.userInfo = res.data.user;
        } else {
          this.$message.error(res.data.message);
          return;
        }
      });
      getExamById(this.tokenBean).then(res => {
        if (res.code === 200) {
          this.testInfo = res.data;
        }
      });
      sysDescById(this.descBean).then(res => {
        this.description = res.data.msg;
      });
    },
    readNotice() {
      this.$router.push({
        path: "/examNeedToKnow",
        query: { examUserId: this.tokenBean.examUserId }
      });
    },
    confirmInfo() {
      this.$router.push({
        path: "/confirmProfile",
        query: { examUserId: this.tokenBean.examUserId }
      });
    },
    // 打开摄像头
    getCamera() {
      this.video = document.getElementById("videoCamera");
      this.canvas = document.getElementById("canvasCamera");
      this.context = this.canvas.getContext("2d");
      const errocb = () => {
        this.$message.error("摄像头打开失败！");
        this.openSuccess = false;
      };
      if (navigator.webkitGetUserMedia) {
        navigator.webkitGetUserMedia(
          { audio: false, video: true },
          stream => {
            // video.src=window.URL.createObjectURL(stream);
            this.video.srcObject = stream;
            this.video.play();
          },
          errocb
        );
      } else if (navigator.mediaDevices.getUserMedia) {
        // var constraints = { audio: true, video: { width: 1280, height: 720 } };
        const constraints = { audio: false, video: true };
        navigator.mediaDevices.getUserMedia(constraints).then(stream => {
          // var video = document.querySelector('video');
          this.video.srcObject = stream;
          this.video.onloadedmetadata = () => {
            this.video.play();
          };
        });
      } else if (navigator.getUserMedia) {
        navigator.getUserMedia(
          { audio: false, video: true },
          stream => {
            this.video.src = window.webkitURL.createObjectURL(stream);
            this.video.srcObject = stream;
            this.video.play();
          },
          errocb
        );
      } else {
        alert("你的浏览器不支持打开摄像头");
      }
    },
    //  绘制图片（拍照功能）
    setImage() {
      this.context.drawImage(this.video, 0, 0, 240, 240);
      this.imgSrc = this.canvas.toDataURL("image/png");
      if (this.imgSrc.length > 6000) {
        this.$router.push({
          path: "/examCatalog",
          query: { examUserId: this.examUserId }
        });
      } else {
        alert("检测到摄像头不正常，请重新调整，或切换到别的浏览器");
      }
    },
    // 关闭摄像头
    closeCamera() {
      this.video.srcObject.getTracks()[0].stop();
    },
    logoutHandle() {
      if (confirm("退出确认")) {
        logout(this.examBean).then(res => {
          if (res.code === 200) {
            this.removeUserInfo();
          }
        });
        this.$router.push("/login");
      }
    }
  }
};
</script>

<style scoped></style>