記一次不完美的呼叫瀏覽器攝像頭介面（附微信ios取巧）

左手糞叉，右手筆桿發表於2019-04-19
瀏覽器iOS

本文出現單單是前端小白蝸牛公司的一個業務場景，由於之前有了解過navigator這個API，所以在公司微信產品場景上做的一次嘗試。如果本文引起你任何的不適，請迅速撤離！！！

  • 老闆：我們需要上線一個一鍵公司註冊，自動拍攝身份證的，你去搞個頁面出來!

  • 我：好的老闆，使命必達（ps:心裡一萬頭。。。路過）！！！ 既然有了需求，我們就開始擼文件，擼百度，擼掘金，擼谷歌。

我們先來看效果圖：

記一次不完美的呼叫瀏覽器攝像頭介面（附微信ios取巧）

  • 首先我們知道了要調起瀏覽器攝像頭介面，需要的前置條件是什麼？HTTPS!之前蝸牛買了一年的https穿透，就有這個測試咯，大家自己準備！
  • 看到這裡大家估計知道我們要呼叫的是哪個api了，就是它(navigator.mediaDevices.getUserMedia),關於相容性問題，大家可以檢視一下mdn或者想過資料對應不同瀏覽器的api實現。這裡針對的是微信端（安卓有效） 下面先來一張文件壓場（mdn大法好）！！！！

記一次不完美的呼叫瀏覽器攝像頭介面（附微信ios取巧）

開始程式碼實現了,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

相關文章