金三银四，面试大潮又来了，免不了电话面试和视频面试

摄像头在线测试
https://assistant.ceping.com/qrcode?type=1&lng=zh

恩，借用北森测评的网站了。

https://assistant.ceping.com/qrcode?type=1

同时还能顺带着测测网速，岂不美哉

首先是二维码解析库，下载链接：https://pan.baidu.com/s/1MbVb_QqAjIIlAk9OEXy-6w 

提取码：zip4 

 

下面代码写在html中：

 

<script type="text/javascript" src="src/qrcode/grid.js"></script>
<script type="text/javascript" src="src/qrcode/version.js"></script>
<script type="text/javascript" src="src/qrcode/detector.js"></script>
<script type="text/javascript" src="src/qrcode/formatinf.js"></script>
<script type="text/javascript" src="src/qrcode/errorlevel.js"></script>
<script type="text/javascript" src="src/qrcode/bitmat.js"></script>
<script type="text/javascript" src="src/qrcode/datablock.js"></script>
<script type="text/javascript" src="src/qrcode/bmparser.js"></script>
<script type="text/javascript" src="src/qrcode/datamask.js"></script>
<script type="text/javascript" src="src/qrcode/rsdecoder.js"></script>
<script type="text/javascript" src="src/qrcode/gf256poly.js"></script>
<script type="text/javascript" src="src/qrcode/gf256.js"></script>
<script type="text/javascript" src="src/qrcode/decoder.js"></script>
<script type="text/javascript" src="src/qrcode/qrcode.js"></script>
<script type="text/javascript" src="src/qrcode/findpat.js"></script>
<script type="text/javascript" src="src/qrcode/alignpat.js"></script>
<script type="text/javascript" src="src/qrcode/databr.js"></script>

<script type="text/javascript">
    var gCtx = null;
    var gCanvas = null;
    var mediaStreamTrack = null;

    function dragenter(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    function dragover(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    function drop(e) {
      e.stopPropagation();
      e.preventDefault();

      var dt = e.dataTransfer;
      var files = dt.files;

      handleFiles(files);
    }
    function handleFiles(f) {
      var o = [];
      for (var i = 0; i < f.length; i++) {
        var reader = new FileReader();

        reader.onload = (function (theFile) {
          return function (e) {//上传图片走此处
            qrcode.decode(e.target.result);
          };
        })(f[i]);

        // Read in the image file as a data URL.
        reader.readAsDataURL(f[i]);
      }
    }

    function utf8ToUtf16(s) {//将utf-8字符串转码为unicode字符串，要不读取的二维码信息包含中文会乱码
      if (!s) {
        return;
      }

      var i, codes, bytes, ret = [], len = s.length;
      for (i = 0; i < len; i++) {
        codes = [];
        codes.push(s.charCodeAt(i));
        if (((codes[0] >> 7) & 0xff) == 0x0) {
          //单字节  0xxxxxxx  
          ret.push(s.charAt(i));
        } else if (((codes[0] >> 5) & 0xff) == 0x6) {
          //双字节  110xxxxx 10xxxxxx  
          codes.push(s.charCodeAt(++i));
          bytes = [];
          bytes.push(codes[0] & 0x1f);
          bytes.push(codes[1] & 0x3f);
          ret.push(String.fromCharCode((bytes[0] << 6) | bytes[1]));
        } else if (((codes[0] >> 4) & 0xff) == 0xe) {
          //三字节  1110xxxx 10xxxxxx 10xxxxxx  
          codes.push(s.charCodeAt(++i));
          codes.push(s.charCodeAt(++i));
          bytes = [];
          bytes.push((codes[0] << 4) | ((codes[1] >> 2) & 0xf));
          bytes.push(((codes[1] & 0x3) << 6) | (codes[2] & 0x3f));
          ret.push(String.fromCharCode((bytes[0] << 8) | bytes[1]));
        }
      }
      return ret.join('');
    }

    function qrCodeBegin() {
      initVideo();//开启摄像头
      initCanvas(300, 300);

      qrcode.callback = function (data) {//扫码结果
        cc.vv.utils.qrCodeResult = data;
        gCanvas.style.visibility = 'hidden';
        mediaStreamTrack.getTracks().forEach(function (track) {
          track.stop();
        });
        video.style.visibility = 'hidden';
        setTimeout(toCheckQRcode, 1000);
      };
    }

    function captureToCanvas() {
      try {
        gCtx.drawImage(video, 0, 0);
        try {
          qrcode.decode();
        }
        catch (e) {
          console.log(e);
          gCtx.clearRect(0, 0, 300, 300);//此处一定要添加，否则会卡顿
          setTimeout(captureToCanvas, 500);
        };
      }
      catch (e) {
        console.log(e);
        gCtx.clearRect(0, 0, 300, 300);//此处一定要添加，否则会卡顿
        setTimeout(captureToCanvas, 500);
      };
    }

    function initCanvas(w, h) {
      gCanvas = document.getElementById("qr-canvas");
      gCanvas.style.visibility = 'visible';
      gCanvas.addEventListener("dragenter", dragenter, false);
      gCanvas.addEventListener("dragover", dragover, false);
      gCanvas.addEventListener("drop", drop, false);
      gCtx = gCanvas.getContext("2d");
      gCtx.clearRect(0, 0, 300, 300);
      setTimeout(captureToCanvas, 500);
    }

    function initVideo() {
      var video = document.getElementById("video");
      video.style.visibility = 'visible';

      var constraints = {
        video: { width: 300, height: 300 },
        audio: true
      };
      var promise = navigator.mediaDevices.getUserMedia(constraints);
      promise.then(function (MediaStream) {
        mediaStreamTrack = MediaStream;
        cc.vv.utils.qrCode = 2;
        video.srcObject = MediaStream;
        video.play();
      });
    }

  </script>

<script language="javascript">
    var toCheckQRcode = function () {
      if (cc.vv && cc.vv.utils && cc.vv.utils.qrCode == 1) {//开始扫码
        qrCodeBegin();
      } else {
        setTimeout(toCheckQRcode, 1000);
      }
    }
    setTimeout(toCheckQRcode, 1000);
  </script>

<body>
    <video id="video" width="300px" height="300px" autoplay="autoplay"></video>
    <canvas id="qr-canvas" width="300px" height="300px"></canvas>
</body>

上面的代码段中包含开启摄像头、扫码解析、输出结果。

因为在cocoscreator中没找到加载库时出的错误在哪，所以暂时就先放在html上。程序启动后每隔1秒检测一次是否要扫码。

cc.vv.utils.qrCode == 1时表示要扫码。

之后执行上面的开启摄像头、扫码、解析功能。

当扫码结束后cc.vv.utils.qrCodeResult也就是扫码结果了，1秒之后会重启检测，所以在自己的脚本里，开启扫码后检测结果的定时器一定要小于1秒，出结果后要改cc.vv.utils.qrCode的值不能为1。

 

ps:上面的代码video和qr-canvas的初始可见状态是不显示的(visibility:hidden)。而且"qr-canvas"不能改变,因为在解析库里默认是读取qr-canvas画布上的内容。上面代码也可以将二维码图片拖到摄像头区域内解析。

 

 

H5网页调用手机摄像头扫码
1.需求:H5网页调用手机摄像头扫码
2.如何探索解决？
先自己思考一下
3.解决方案？
方案一：使用 quaggaJS识别
方案二：调用微信公众号的js-jdk来调用摄像头
4.遇到的坑
5. 参考
6.总结

1.需求:H5网页调用手机摄像头扫码
2.如何探索解决？
先自己思考一下

常见的基本都是app和小程序里面调用摄像头扫码的比较多，h5页应该也有对应的解决方案。


然后就去找万能的百度，看看别人是怎么解决的？至少看5~10个方案，然后找到和自己需求相关的，然后写demo测试下。

3.解决方案？
方案一：使用 quaggaJS识别


调用摄像头并获取视频流输出到web
使用canvas进行周期性截图
条形码识别


quaggaJS的github：quaggaJS的github地址

参考的几个例子



https://www.cnblogs.com/yaotome/p/9450274.html

这个例子我测了下，只能用图片上传的方式识别，且识别度不高。


https://www.freesion.com/article/8748758802/

这个例子看起来不错，还没来的及去test，就想着用方案2去解决了。有兴趣的自己去试试。


方案二：调用微信公众号的js-jdk来调用摄像头

微信公众号官方开发文档：官方开发文档官网最权威，多看看，扣扣字眼，避免很多坑


错误码大全:这个很重要，知道错在哪里


微信公众平台接口调试工具这个很方便


微信 JS 接口签名校验工具很实用，可以比对自己的生成的签名是否正确


参考几个例子



https://www.codetd.com/article/7762368

这个例子写的很详细，思路很清晰，可以参考参考。


https://blog.csdn.net/weixin_43369521/article/details/86649324

这个例子写的很好，配置域名、ios这些坑都说出来了。


4.遇到的坑

要使用域名来进行测试测下，ip是不行的。（因为穷不想买域名，我用的是花生壳，自行百度如何映射域名）
我在前端生成签名，签名都是正确的，但是在wx.config是报63002的错，折磨死我了。最后还是改用后端生成签名返回给我的方法解决的。
传入的url到后端生成签名的问题:刚开始传的是 location.href.split(’#’)[0]但是就报错了63002，看到有人是这样写的       let hashurl= location.href.split(’#’)[0]//动态获取当前地址 必须和安全域名一致   注微信官方检测这里不能写死。

原文如下:https://blog.csdn.net/weixin_43208652/article/details/105813702

而我的就直接传location.href就对了，也不用转码（encodeURIComponent()）
ios手机不能正常使用的问题。刚好查到一个文档，可以参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html有本地配置 域名的方案；还有说是：***IOS分享的时候，在微信开发工具上一切正常，但到真机上之后，IOS自定义分享并不生效，排除掉分享图片大小，url合法性等问题之后。一个主要原因是：

IOS微信浏览器记录的是第一次打开页面时的URL，也就是说，前端路由跳转时，IOS的url地址栏并不会根据前端路由改变，所以，当调用wx.config()时，你所注册的当前页面url还是第一次进入页面的url，所以获取到的时间戳，签名等参数，并不是当前前端路由所需要的，也就导致分享失败***说是进入之后强刷一遍：window.location.href = window.location.href，但是我试了之后没效果。而且我发现一个神奇的现象，我在ios微信浏览器alert（“xxxx.xx/#/xxx”）时候，会自动把#号给省略了。
config:fail,Error: 系统错误,错误码:63002,invalid signature 这个错误码的原因（63002	无效的签名）：ip为配置白名单，access_token过期、传入的url不对、随机字符串和时间戳都必须是字符串
ios解决方案test：

6.1 对ios注册config时候可以考虑传的url是编码的：encodeURIComponent(url);上班的时候试试。

6.2 微信JS-SDK 接口注册问题 IOS系统

6.3 这位仁兄修改了源码

6.4https://developers.weixin.qq.com/community/develop/doc/00068a383541b06407fa1737d5d800

6.5 http://www.10qianwan.com/articledetail/636592.html

6.6 https://www.cnblogs.com/lsyverygood/p/12156703.html

6.7

5. 参考
1.https://blog.csdn.net/qq_28218253/article/details/106534290

2. 微信JS-SDK 接口注册问题 IOS系统
6.总结

纸上得来终觉浅