smart-campus
/
toQRcode.html

<!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, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>扫描二维码</title>
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- 引入vue.min.js文件 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入vueQRcode.js文件 -->
    <script src="js/VueQrcodeReader.umd.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>上次结果： <b>{{ decodedContent }}</b></p>

      <p class="error">{{ errorMessage }}</p>

      <qrcode-stream @decode="onDecode" @init="onInit"></qrcode-stream>
    </div>
    <script>
      new Vue({
        el: "#app",

        data() {
          return {
            decodedContent: "",
            errorMessage: "",
          };
        },

        methods: {
          onDecode(content) {
            this.decodedContent = content;
          },

          onInit(promise) {
            promise
              .then(() => {
                console.log("成功初始化！ 准备扫描！");
              })
              .catch((error) => {
                if (error.name === "NotAllowedError") {
                  this.errorMessage = "嘿！我需要你的相机";
                } else if (error.name === "NotFoundError") {
                  this.errorMessage = "你的设备上有摄像头吗？";
                } else if (error.name === "NotSupportedError") {
                  this.errorMessage = "需要https协议地址 (HTTPS, localhost or file://)";
                } else if (error.name === "NotReadableError") {
                  this.errorMessage = "无法访问您的相机。 它已经被使用了吗？";
                } else if (error.name === "OverconstrainedError") {
                  this.errorMessage =
                    "约束条件与任何已安装的摄像头都不匹配。 尽管没有前置摄像头，您是否要求过前置摄像头？";
                } else {
                  this.errorMessage = "UNKNOWN ERROR: " + error.message;
                }
              });
          },
        },
      });
    </script>
  </body>
</html>