cocoroboBlockly/src/components/function.vue

<template>
  <div style="width: 100%; height: 100%">
    <h1>{{ isdetected }}</h1>
    <div class="img">
      <div class="controlZ">
        <div id="screan" ref="dv">
          <img :src="img[0]" alt v-show="!isCamera" />
          <!--图片展示-->
          <video
            ref="video"
            id="video_cam"
            width="265"
            height="212"
            class="face"
            autoplay
            v-show="isCamera"
          ></video>
          <canvas
            ref="canvasDOM"
           width="265"
            height="212"
            class="kuang"
            v-show="isCamera"
          ></canvas>
        </div>
        <div id="tou" ref="dv1">
          <img :src="img[2]" alt />
        </div>
        <div id="ai" ref="dv2">
          <img :src="img[1]" alt />
        </div>
        <div id="police" ref="dv2">
          <img :src="img[3]" alt />
        </div>
      </div>

      <div class="cameraZ">
        <!--开启摄像头-->
        <div class="cameraBtn">
          <el-button
            size="mini"
            type="primary"
            @click="callCamera"
            v-if="!isCamera"
            >开启摄像头</el-button
          >
          <el-button size="mini" type="primary" @click="closeCamera" v-else
            >关闭摄像头</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="photograph"
            v-if="isCamera"
            >确认保存</el-button
          >
        </div>
        <!--确认-->
        <div>
          <!--canvas截取流-->
          <canvas
            ref="canvas"
            width="300"
            height="240"
            v-if="isCamera"
          ></canvas>
        </div>
        <div>
          <!--canvas截取流-->
          <!-- <canvas
            ref="canvasDOM"
            width="188"
            height="144"
            v-show="isCamera"
          ></canvas> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import tracking from "@/assets/js/tracking-min.js";
import "@/assets/js/face-min.js";

export default {
  data() {
    return {
      that: this,
      img: [
        require("../assets/img/screan.png"),
        require("../assets/img/ai.png"),
        require("../assets/img/tou.png"),
        require("../assets/img/police.png"),
      ],
      isCamera: false,
      count: 0,
      isdetected: "请您保持脸部在画面中央",
      videoEl: {},
      canvasEL: {},
    };
  },
  methods: {
    // 调用摄像头
    callCamera() {
      let _this = this;
      // H5调用电脑摄像头API
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((success) => {
          _this.isCamera = true;
          // 摄像头开启成功
          _this.$refs["video"].srcObject = success;
          // 实时拍照效果
          _this.$refs["video"].play();

          const video = this.videoEl;
          const canvas = this.canvasEL;
          const canvasContext = canvas.getContext("2d");
          let tracker = new window.tracking.ObjectTracker("face");

          // video.pause();
          // video.src = "";
          tracker.setInitialScale(4);
          tracker.setStepSize(2);
          tracker.setEdgesDensity(0.1);
          window.tracking.track("#video_cam", tracker, { camera: true });
          tracker.on("track", function (event) {
            const { autoCaptureTrackTraking } = _this;
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            event.data.forEach(function ({ x, y, width, height }) {
              canvasContext.strokeStyle = "#FFFF";
              canvasContext.strokeRect(x+10, y-30, width - 20, height);
              canvasContext.font = "11px Helvetica";
              canvasContext.fillStyle = "#fff";
            });

            if (!(event.data.length == 0) && _this.count <= 10) {
              if (_this.count < 0) _this.count = 0;
              _this.count += 1;
              if (_this.count > 10) {
                _this.isdetected = "已检测到人脸";
              }
            } else {
              _this.count -= 1;
              if (_this.count < 0) _this.isdetected = "请您保持脸部在画面中央";
              //this.isdetected = '已检测到人脸，正在登录'
            }
          });
        })
        .catch((error) => {
          // console.error("摄像头开启失败，请检查摄像头是否可用！");
          _this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
        });
    },
    // 拍照
    photograph() {
      let ctx = this.$refs["canvas"].getContext("2d");
      // 把当前视频帧内容渲染到canvas上
      ctx.drawImage(this.$refs["video"], 0, 0, 300, 240);
      // 转base64格式、图片格式转换、图片质量压缩
      let imgBase64 = this.$refs["canvas"].toDataURL("image/jpeg", 0.7); // 由字节转换为KB 判断大小

      let str = imgBase64.replace("data:image/jpeg;base64,", "");
      let strLength = str.length;
      let fileLength = parseInt(strLength - (strLength / 8) * 2); // 图片尺寸  用于判断
      let size = (fileLength / 1024).toFixed(2);
      console.log(size); // 上传拍照信息  调用接口上传图片 .........

      // 保存到本地
      // this.isCamera = false;
      let ADOM = document.createElement("a");
      ADOM.href = imgBase64;
      ADOM.download = new Date().getTime() + ".jpeg";
      ADOM.click();
      this.$message({
        message: "保存成功",
        type: "success",
      });
    },
    // 关闭摄像头
    closeCamera() {
      if (!this.$refs["video"].srcObject) {
        this.isCamera = false;
        return;
      }
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
      this.isCamera = false;
    },
  },
  mounted() {
    // console.log(this.$store.state.function);
    // var _s3 = document.createElement("script");
    // _s3.src = "/static/materialize/jquery-2.1.3.min.js";
    // _s3.type = "text/javascript";
    // document.head.appendChild(_s3);
    // var _s2 = document.createElement("script");
    // _s2.src = "/static/camera.283d5d54.js";
    // _s2.type = "text/javascript";
    // document.head.appendChild(_s2);
    // var _s1 = document.createElement("script");
    // _s1.src = "/static/bundle.js";
    // _s1.type = "text/javascript";
    // document.head.appendChild(_s1);
    // console.log(this.$store.state.function);
    // if (this.$store.state.function == 1) {
    //   this.$message.error("摄像头开启失败，请检查摄像头是否可用！");
    // }
    this.videoEl = this.$refs.video;
    this.canvasEL = this.$refs.canvasDOM;
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.tip {
  margin: 25px 0 30px 20px;
  width: 419px;
}

.tip > img,
#screan > img,
#tou > img,
#ai > img,
#police > img,
.right > img {
  width: 100%;
  height: 100%;
  user-select: none;
}

.img {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  /* align-items: center; */
  /* margin: auto; */
  width: 100%;
  height: 100%;
  position: relative;
  /* position: relative; */
}

#screan {
  width: 265px;
  position: absolute;
  z-index: 4;
  top: 174px;
  left: 114.3px;
}

#ai {
  width: 265px;
  position: absolute;
  z-index: 3;
  top: 170px;
  left: 114.3px;
}

#tou {
  width: 83px;
  position: absolute;
  z-index: 5;
  top: 123px;
  left: 205px;
}

#police {
  width: 490px;
  position: absolute;
  z-index: 2;
}

.button {
  color: #fff;
  background: #8ca1de;
  width: 550px;
  height: 55px;
  font-size: 20px;
  text-align: center;
  line-height: 55px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}

.right {
  width: 40px;
  position: absolute;
  left: 55%;
  top: 70%;
  display: none;
}

.dark {
  background: #5b79d0;
  cursor: pointer;
}

.controlZ {
  width: 490px;
  height: 900px;
  margin-left: calc(50% - (490px / 2));
  position: relative;
}

.cameraZ {
  display: flex;
  height: 340px;
}
.cameraZ div {
  margin-left: 10px;
}
.cameraBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cameraBtn button {
  margin: 0 0 10px 0;
}

.face {
  position: absolute;
  z-index: 1;
    padding: 26.5px 0;
}

.kuang {
  padding: 26.5px 0;
  position: absolute;
  z-index: 2;
}
</style>