student-client/src/features/OnlineExam/Examing/FaceId.vue

<template>
  <div class="row" style="margin: 0;">
    <div class="col-md-12 text-center" style="padding:8px;">
      <div style="font-size: 30px;">
        <span>人脸检测</span> <span v-if="showIframe">({{ timeCount }})</span>
      </div>
      <div
        v-if="showIframe"
        class="text-center"
        style="color: red; font-size: 16px;"
      >
        (注意：请点击下方“开始比对”按钮并在60秒内完成人脸检测,超时将退出考试)
      </div>
    </div>
    <div
      id="faceIdDiv"
      style="position: relative;
						 height:620px; background-color: #6e6f72 !important;
  					 background-image: radial-gradient(circle at 50% 0,#a9a9a9,#34363c);"
    >
      <div
        v-show="!showIframe"
        width="100%"
        height="200px"
        style="text-align: center;line-height:100px;margin-top:5px;"
      >
        <div style="color:white;font-weight: bold;font-size:20px;">
          {{ redoBtnMsg }}
        </div>
        <button
          v-if="redoBtnShow"
          type="button"
          class="qm-primary-button"
          :disabled="redoBtnDisabled"
          @click="startFaceVerify"
        >
          重试
        </button>
      </div>
      <iframe
        v-show="showIframe"
        allow="camera *"
        allowusermedia
        id="myFrame"
        scrolling="no"
        width="100%"
        height="620px"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>

<script>
import {
  FACEID_LINENESS_URL,
  VUE_APP_WK_SERVER_SOCKET
} from "@/constants/constants.js";

export default {
  name: "FaceId",
  data() {
    return {
      showIframe: false,
      redoBtnShow: false,
      timeCount: 60,
      redoBtnMsg: ""
    };
  },
  mounted() {
    console.debug("startFaceVerify");
    this.startFaceVerify();
  },
  beforeDestroy() {
    try {
      if (this.ws && this.ws.readyState === 1) this.ws.close();
    } catch (e) {
      console.log("关闭ws异常。");
    }
    clearTimeout(this.faceIdTime);
    clearInterval(this.timeCountInterval);
  },
  methods: {
    showRedo(redoMsg) {
      this.showIframe = false;
      this.redoBtnDisabled = false;
      this.redoBtnShow = true;
      if (redoMsg) {
        this.redoBtnMsg = redoMsg;
      } else {
        this.redoBtnMsg = "系统繁忙，请手动点击重试";
      }
    },
    updateFaceVerify(errorMsg, redoMsg) {
      this.showRedo(redoMsg);
      this.$http.get(
        "/api/ecs_oe_student/examFaceLivenessVerify/updateFaceLivenessVerify/" +
          this.$route.params.examRecordDataId,
        { params: { errorMsg: errorMsg } }
      );
    },
    checkIframeOnload() {
      var iframe = document.getElementById("myFrame");
      if (!iframe) {
        return null;
      }
      var app = iframe.contentWindow.document.getElementById("app");
      if (app) {
        return "success";
      } else {
        var preLabel = iframe.contentWindow.document.getElementsByTagName(
          "pre"
        )[0];
        if (
          preLabel &&
          preLabel.innerText &&
          preLabel.innerText.indexOf("error_message") > -1
        ) {
          return preLabel.innerText;
        }
      }
      return null;
    },
    iframeLoadSuccess() {
      try {
        var iframe = document.getElementById("myFrame");
        var app = iframe.contentWindow.document.getElementById("app");
        app.querySelector(".footer").remove();
      } catch (err) {
        console.error(err);
      }

      const examRecordId = this.$route.params.examRecordDataId;

      this.timeCount = 60; //人脸检测倒计时60秒
      this.timeCountInterval = setInterval(() => {
        --this.timeCount;
        if (this.timeCount === 0) {
          clearInterval(this.timeCountInterval);
        }
      }, 1000);

      //定时事件，如果1分钟内未完成人脸检测，执行内部程序
      this.faceIdTime = setTimeout(() => {
        this.ws.close();
        this.$http
          .get(
            "/api/ecs_oe_student/examFaceLivenessVerify/faceLivenessVerifyTimeOut/" +
              examRecordId
          )
          .then(response => {
            if (response.status == 200) {
              var receivedMsg = response.data;
              this.faceTestEnd(receivedMsg);
            }
          })
          .finally(() => {
            // Chrome 63开始支持。但是vue-cli引入了p-finally，所以已经加在Promise对象中了
            clearInterval(this.timeCountInterval);
            if (!this.faceTestEndCalled) {
              this.$Message.error({
                content: "人脸检测超时，系统退出，请重新登录",
                duration: 30
              });
            }
            this.logout(
              "?LogoutReason=" + this.faceTestEndCalled
                ? "人脸检测超时"
                : "人脸检测超时-可续考"
            );
          });
      }, 60000); //60000
      /**
       * 人脸检测结果返回后台处理
       */
      this.faceTestEndHandle = result => {
        this.$http
          .get(
            "/api/ecs_oe_student/examFaceLivenessVerify/faceLivenessVerifyEnd/" +
              examRecordId +
              "?result=" +
              result
          )
          .then(() => {
            if (result != "SUCCESS") {
              this.logout("?LogoutReason=人脸检测失败");
            }
          })
          .catch(() => {
            this.$Message.error("上传人脸检测结果出错！");
            this.logout("?LogoutReason=上传人脸检测结果出错！");
          });
      };
      /**
       * 人脸检测结束
       */
      this.faceTestEnd = receivedMsg => {
        this.faceTestEndCalled = true;
        if (receivedMsg.verifyCount == 1) {
          if (receivedMsg.verifyResult == "TIME_OUT") {
            this.$Message.error({
              content: "第一次人脸检测超时，检测失败，系统退出，请重新登录",
              duration: 30
            });
            this.logout(
              "?LogoutReason=第一次人脸检测超时，检测失败，系统退出，请重新登录"
            );
          } else if (receivedMsg.verifyResult == "VERIFY_FAILED") {
            this.$Message.error({
              content: "第一次人脸检测失败，系统退出，请重新登录",
              duration: 30
            });
            this.logout(
              "?LogoutReason=第一次人脸检测失败，系统退出，请重新登录"
            );
          } else if (receivedMsg.verifyResult == "NOT_ONESELF") {
            this.$Message.error({
              content: "人脸检测不合格，结束考试",
              duration: 30
            });
            this.faceTestEndHandle("FAILED");
          } else if (receivedMsg.verifyResult == "VERIFY_SUCCESS") {
            this.$Message.info({
              content: "人脸检测成功，请继续完成考试",
              duration: 15
            });
            this.faceTestEndHandle("SUCCESS");
          }
        } else if (receivedMsg.verifyCount >= 2) {
          if (receivedMsg.verifyResult == "VERIFY_SUCCESS") {
            this.$Message.info({
              content: "人脸检测成功，请继续完成考试",
              duration: 15
            });
            this.faceTestEndHandle("SUCCESS");
          } else {
            this.$Message.error({
              content: "人脸检测不合格，结束考试",
              duration: 30
            });
            this.faceTestEndHandle("FAILED");
          }
        }
      };

      // open websocket
      this.ws = new WebSocket(VUE_APP_WK_SERVER_SOCKET + examRecordId);
      this.ws.onopen = function() {
        console.log("websocket已连接");
      };
      this.ws.onmessage = response => {
        if (response.data.indexOf("verifyResult") > -1) {
          var receivedMsg = JSON.parse(response.data);
          this.faceTestEnd(receivedMsg);
          clearTimeout(this.faceIdTime);
          clearInterval(this.timeCountInterval);
          this.$emit("closeFaceId");
          this.ws.close();
        }
      };

      // 重复关闭不会报错
      this.ws.onclose = function() {
        console.log("websocket连接已关闭...");
      };
    },
    async startFaceVerify() {
      this.redoBtnDisabled = true;
      this.redoBtnMsg = "正在进入人脸检测...";
      const examRecordId = this.$route.params.examRecordDataId;

      let response = null;
      try {
        response = await this.$http.get(
          "/api/ecs_oe_student/examFaceLivenessVerify/getFaceLivenessVerifyToken/" +
            examRecordId
        );
      } catch (error) {
        this.$Message.error("获取底照token失败，请重新登录！");
        this.logout("?LogoutReason=获取底照token失败，请重新登录！");
        return;
      }

      if (!response.data.success) {
        console.log(response.data.errorMsg);
        this.$Message.error({
          content: "您上传的底照不适合做活体检测，请联系老师！",
          duration: 30
        });
        this.logout("?LogoutReason=您上传的底照不适合做活体检测，请联系老师！");
        return;
      }

      this.showIframe = true;
      var iframe = document.getElementById("myFrame");
      try {
        iframe.src = FACEID_LINENESS_URL + response.data.faceLivenessToken;
      } catch (err) {
        console.error(err);
      }
      var index = 0;
      var iframeLoadTime = setInterval(() => {
        var iframeLoadMsg = this.checkIframeOnload();
        if (!iframeLoadMsg) {
          index++;
          if (index == 20) {
            //检测达到20次
            clearInterval(iframeLoadTime);
            this.showRedo("网络异常，请手动点击重试");
          }
        } else if (iframeLoadMsg.indexOf("error_message") > -1) {
          clearInterval(iframeLoadTime);
          this.updateFaceVerify(iframeLoadMsg, null);
        } else if (iframeLoadMsg == "success") {
          clearInterval(iframeLoadTime);
          // this.iframeLoadSuccess();
          setTimeout(() => {
            this.iframeLoadSuccess();
          }, 300); // 延迟确保能删除footer
        }
      }, 500);
    }
  }
};
</script>