記一次不完美的調用瀏覽器攝像頭接口（附微信ios取巧）

時間 2019-11-17

標籤一次完美調用瀏覽器攝像頭接口微信 ios 取巧欄目瀏覽器简体版

原文原文鏈接

本文出現單單是前端小白蝸牛公司的一個業務場景，因爲以前有了解過navigator這個API，因此在公司微信產品場景上作的一次嘗試。若是本文引發你任何的不適，請迅速撤離！！！前端

老闆：咱們須要上線一個一鍵公司註冊，自動拍攝身份證的，你去搞個頁面出來!vue
我：好的老闆，使命必達（ps:內心一萬頭。。。路過）！！！既然有了需求，咱們就開始擼文檔，擼百度，擼掘金，擼谷歌。vue-cli

咱們先來看效果圖：canvas

首先咱們知道了要調起瀏覽器攝像頭接口，須要的前置條件是什麼？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語句)

界面須要有：api

<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");
          });
      }
複製代碼