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

最新推荐文章于 2025-05-15 10:57:21 发布

weixin_33894640

最新推荐文章于 2025-05-15 10:57:21 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cb98673e51d456e4e088654

本文出现单单是前端小白蜗牛公司的一个业务场景，由于之前有了解过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"
    >
复制代码

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");
          });
      }
复制代码