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

ZHANGYU發表於2019-04-17
HTMLHTTP

html5呼叫攝像頭

html5呼叫攝像頭的api是window.navigator.mediaDevices.getUserMedia({/*config*/});,這個api可以同時呼叫相機和麥克風，並且可以設定相機的位元速率和解析度。

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

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

使用formData上傳，使用canvas.toBlob，將影像轉為blob上傳伺服器

程式碼如下:

index.html

<!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.js

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 github

繞過https使用攝像頭的想法

因為業務需要使用攝像頭拍賬單，但是公司的後臺管理系統做不了https，所以研究後萌生了使用谷歌瀏覽器的擴充套件外掛實現繞過https的功能,現在已經在業務中使用了

Chrome外掛(擴充套件)開發全攻略

谷歌擴充套件分了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標籤裡

相關文章