html5中調用攝像頭拍照並上傳（附繞過https的想法）

時間 2019-11-07

標籤 html5 html 調用攝像頭拍照上傳繞過 https 想法欄目 HTML5 简体版

原文原文鏈接

html5調用攝像頭

html5調用攝像頭的api是window.navigator.mediaDevices.getUserMedia({/*config*/});,這個api能夠同時調用相機和麥克風，而且能夠設置相機的碼率和分辨率。javascript

使用video標籤，將相機的畫面實時展現在頁面中。html

拍照功能用canvas實現，先獲取context畫筆，調用drawImage方法，將video標籤中的畫面置入canvas中html5

使用formData上傳，使用canvas.toBlob，將圖像轉爲blob上傳服務器java

代碼以下:git

index.htmlgithub

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <p id="message"></p>
    <p id="error"></p>
    <video style="width: 320px;height: 180px;"></video>
    <canvas width="320" height="180 "></canvas>
    <button id="take">take</button>
    <button id="upload">upload</button>
    <input style="display: none;" type="file" accept="image/*" />
  <script src="./index.js"></script>
  </body>
</html>

複製代碼

index.jschrome

document.querySelector("#message").innerHTML =
    "getUserMedia" in navigator.mediaDevices
        ? "api is exist"
        : "api is not exist";

const constraints = {
    audio: false,
    video: {
        width: 180,
        height: 320,
        facingMode: { exact: "environment" }
    }
};
window.navigator.mediaDevices
      .getUserMedia(constraints)
      .then(mediaStream => {
          const video = document.querySelector("video");
          video.srcObject = mediaStream;
          video.onloadedmetadata = e => {
              video.play();
          };
      })
      .catch(err => {
          document.querySelector("#error").innerHTML = err.name + ": " + err.message;
      });
const video = document.querySelector("video");
const canvas = document.querySelector("canvas");
const take = document.querySelector("#take");
const upload = document.querySelector("#upload");

const drawImage = () => {
    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
};
const uploadImg = () => {
    canvas.toBlob(blob => {
        const formData = new FormData();
        formData.append("img", blob);
        formData.append("123", "123");
        fetch("/api/upload", {
            method: "POST",
            body: formData
        })
            .then(response => response.json())
            .catch(error => console.error("Error:", error))
            .then(response => console.log("Success:", response));
    });
};
take.addEventListener("click", drawImage);
upload.addEventListener("click", uploadImg);
複製代碼

須要注意的是調用相機須要https 我寫的demo，配置了後臺上傳和https githubjson

繞過https使用攝像頭的想法

由於業務須要使用攝像頭拍帳單，可是公司的後臺管理系統作不了https，因此研究後萌生了使用谷歌瀏覽器的擴展插件實現繞過https的功能,如今已經在業務中使用了canvas

Chrome插件(擴展)開發全攻略api

谷歌擴展分了background.js和content.js background顧名思義，就是在瀏覽器後臺運行的，域名也是以chrome-extension開頭的，不能操做當前頁面dom，能使用chrome的api

chrome-extension://xxxx/background.html 在這個頁面，調用攝像頭是沒有任何安全限制的

content就是在當前訪問頁面中執行的js，是能夠操做dom的，可是隻能使用chrome部分的api

思路就是，在content.js裏經過chrome的api將消息傳遞給background.js，background.js中進行攝像頭的調用，可是好像chrome的消息傳遞是不能帶對象的，因此我在backgournd.js中將圖片base64的字符串傳給了content.js，再將圖片放在頁面的img標籤裏