记一次不完美的调用浏览器摄像头接口（附微信ios取巧）

本文出现单单是前端小白蜗牛公司的一个业务场景，因为以前有了解过navigator这个API，因此在公司微信产品场景上作的一次尝试。若是本文引发你任何的不适，请迅速撤离！！！

• 老板：咱们须要上线一个一键公司注册，自动拍摄身份证的，你去搞个页面出来!

• 我：好的老板，使命必达（ps:内心一万头。。。路过）！！！ 既然有了需求，咱们就开始撸文档，撸百度，撸掘金，撸谷歌。

咱们先来看效果图：

• 首先咱们知道了要调起浏览器摄像头接口，须要的前置条件是什么？HTTPS!以前蜗牛买了一年的https穿透，就有这个测试咯，你们本身准备！
• 看到这里你们估计知道咱们要调用的是哪一个api了，就是它(navigator.mediaDevices.getUserMedia),关于兼容性问题，你们能够查看一下mdn或者想过资料对应不一样浏览器的api实现。这里针对的是微信端（安卓有效） 下面先来一张文档压场（mdn大法好）！！！！

开始代码实现了,ps:微信安卓版本。（蜗牛用的是vue-cli脚手架，若是用了其余的脚手架请自行更改）

统一获取 video对象 （下面不重复）

updated() {
    this.video = this.$refs.video;
    this.canvas = this.$refs.cnavas; //能够把视频画一帧出来，做为预览图和上传图片
    console.log("this.vidoe", this.video);
  },
复制代码

目测在这个周期能够拿到值，具体看vue周期文档。

let that = this;
      let constraints = { video: { facingMode: { exact: "environment" } } };
       /**
       后置摄像头设置，
       */
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            that.mediaStreamTrack = stream.getTracks()[0];
            /* 使用这个stream stream */
            that.openVideo = true;
            if (that.openVideo) {  //这里是状态判断 显示页面的video标签，把流传过去。
              that.$nextTick(() => {
                that.video.srcObject = stream;//that.video是video标签节点，请自行获取节点，updated周期里能够拿到！
                that.video.play();
              });
            }
          })
          .catch(function(err) {
            /* 处理error */
            console.log("error");
          });
      }
复制代码

注意点：1.须要Https协议。2.须要拿到video节点。3.把值传过去。

看到这里的读者确定说，哈哈调用一个接口就搞定了，有什么能够研究的。

• 这里须要解释一些，第一兼容性，若是是其余浏览器须要去兼容mdn里面有例子。
• 第二点：除了安卓还有iphone苹果。。原本小白初入职场觉得这样就解决了，老板当晚测试，凉了，老板是苹果（有矿）。继续啃咯。小白试了几个方案最后仍是选择了input呼起摄像头，没办法的办法。

苹果方案出现了(万恶的if语句)

界面须要有：

<input
      type="file"
      id="file"
      accept="image/*"
      capture="camera"
      style="display:none"
      @change="savePic"
    >
复制代码

js

let events = navigator.userAgent;
      if (events.indexOf("iPhone") > -1) {
        document.getElementById("file").click();
      } else {
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then(function(stream) {
            that.mediaStreamTrack = stream.getTracks()[0];
            /* 使用这个stream stream */
            that.openVideo = true;
            if (that.openVideo) {
              that.$nextTick(() => {
                that.video.srcObject = stream;
                that.video.play();
              });
            }
          })
          .catch(function(err) {
            /* 处理error */
            console.log("error");
          });
      }
复制代码

注意点：1.须要Https协议。2.须要在页面点击时触发隐藏的input对象 3.绑定事件获取file。

最后最后，本次是蜗牛在掘金第一次写文，潜水潜了2年多，但愿在这个社区能结实到一块儿研究前端的同窗。 微信号：lmhone1024