H5網頁拍照以及解決http環境下浏覽器捕捉不到攝像頭和私有化部署的SSL證書問題

常見的開發中，由開發環境http——到提測環境——再到生産環境https的切換下。稍不注意，一些BUG就出現了。

先順便提一下：最近的項目中，就有網頁擷取PC端媒體裝置，進行拍照。

采用webRTC的接口，調取攝像頭拍照：

// 調取攝像頭

    shootPhoto() {

      this.canvas = document.getElementById("canvas");

      var _this = this；

      setTimeout(() => { // 之是以放在100秒的延時，是為了解決 vue 中 擷取虛拟節點的問題  和 this.$nextTick()函數一個作用

        _this.video = document.getElementById("video");

        // 媒體對象

        window.navigator.getMedia =

          window.navigator.getUserMedia ||

          window.navigator.webkitGetUserMedia ||

          window.navigator.mozGetUserMedia ||

          window.navigator.msGetUserMedia;

        if (window.navigator.getMedia) {

          window.navigator.getMedia(

            {

              video: true, // 使用攝像頭對象

              audio: false // 不适用音頻

            },

            function(strem) {

              console.log(strem);

              try {

                _this.video.src = window.URL || window.webkitURL.createObjectURL(strem);

              } catch (e) {

                console.log(_this.video);

                _this.video.srcObject = strem;

              }

              _this.video.play();

            },

            function(error) {

              console.log(error);

              alert("未捕捉到攝像頭");

            }

          );

        } else {

          alert("不支援攝像頭");

          _this.shootPhotoDialogVisible = false;

        }

      }, 100);

    },

拍照事件:

// 拍照事件

    shootAct() {

      var canvas = document.createElement("canvas");

      canvas.width = "350";

      canvas.height = "260";

      //  canvas.getContext("2d").drawImage(this.video, 280, 0, 1000, 720, 0, 0, 260, 260);

      // canvas畫布，畫出攝像頭捕捉的畫面

      canvas.getContext("2d").drawImage(this.video, 0, 0, 350, 260);

      // 把canvas圖像轉為img圖檔

       this.imageUrl = canvas.toDataURL("image/png");

        this.fileData = this.imageUrl

        .replace("data:image/jpeg;base64,", "jpeg:")

        .replace("data:image/png;base64,", "png:")

        .replace("data:image/jpg;base64,", "jpg:"); // base64字元串截取前面的類型字元，用圖檔的字尾名替換

         this.getFaceQualityDetection(this.fileData); //圖檔品質檢測

    },

最後是正題了：

解決問題：  window.navigator.getMedia(） 在http環境下被禁止的調用

方法一：在桌面的快捷方式，點選右鍵——屬性

在目标後面 加一個空格，然後填上：--unsafely-treat-insecure-origin-as-secure="http://192.168.9.177:51880" --user-data-dir="F:\temp"

“secure=”後面是你項目部署的IP端口 。“--user-data-dir=”後面更上的是你PC上任意可以讀取寫入的路徑。這句話的意義是：忽略浏覽器的預設安全 政策

方法二：是針對你私有化部署的https，自我頒發的SSL證書不通過浏覽器驗證的方法。

同樣的是：

在目标後面 加一個空格，然後填上：--test-type --ignore-certificate-errors

這裡的腳本意義是：忽略浏覽器SSL證書安全攔截機制

切記：-- 前面都要加空格的，同時要重新開機浏覽器生效。