摘要：入?yún)⑹且粋€對象是判斷是否啟動攝像頭和錄音，返回一個對象。這個包可以把你想要檢測的圖片視頻以及攝像頭上面的內(nèi)容都是支持捕捉人臉和檢測面部特征。我這里主要實現(xiàn)的是攝像頭捕捉人臉和檢測面部特征。

由于最近這些年互聯(lián)網(wǎng)面向的受眾面越來越光,有了更多的人和設備訪問互聯(lián)網(wǎng),這也就意味著我們要做的就越來越多, 不在是像以前那樣只需要調(diào)整頁面樣式和切圖就可以了。所以就有了這篇文章的誕生，本次講的如何在本地喚醒相機然后進行拍照，同時對拍照的照片進行修改，還可以對攝像頭所捕捉的數(shù)據(jù)進行一個轉(zhuǎn)發(fā)，同時還可以檢測攝像頭中是否存在人。

喚醒攝像頭主要用的API是 navigator.mediaDevices.getUserMedia。入?yún)⑹且粋€對象{ audio: true, video: true } 是判斷是否啟動攝像頭和錄音，返回一個promise對象。以前的navigator.getUserMedia已經(jīng)被廢棄。如果video沒有設置自動播放 需要在成功回調(diào)函數(shù)那里手動調(diào)用執(zhí)行，只有這樣攝像頭才會被執(zhí)行，不然就不會正確顯示。

目前 IOS 設備的微信和 Safari 均不支持，較新的安卓和桌面端瀏覽器均支持。另外，出于安全問題考慮，Chrome 只支持 HTTPS 頁面啟用攝像頭。

test是用vue來的。因為考慮到到時候直接復制就好，所以在用的時候需要考慮自己的環(huán)境來進行部分修改和調(diào)整

  HTML部分
  
  

    

      
      Take photo
    
    
    

      
    
  
  
  CSS部分
  
    #photo {
      border: 1px solid black;
      width: 320px;
      height: 240px;
    }
    
    #canvas {
      display: none;
    }
    
    .camera {
      width: 340px;
      display: inline-block;
    }
    
    .output {
      width: 340px;
      display: inline-block;
    }
    
    #startbutton {
      display: block;
      position: relative;
      margin-left: auto;
      margin-right: auto;
      bottom: 32px;
      background-color: rgba(0, 150, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
      font-size: 14px;
      font-family: "Lucida Grande", "Arial", sans-serif;
      color: rgba(255, 255, 255, 1);
    }
    
    .contentarea {
      font-size: 16px;
      font-family: "Lucida Grande", "Arial", sans-serif;
      width: 760px;
    }
    
    JS部分
    
    // 監(jiān)聽攝像頭是否啟動成功并且按照4：3的比例初始化攝像頭和畫布
    canplay () {
      let { video, canvas } = this.$refs
      if (!this.streaming) {
        this.height = video.videoHeight / (video.videoWidth / this.width);
        console.log(this.height)
        if (isNaN(this.height)) {
          this.height = this.width / (4 / 3);
        }
        video.setAttribute("width", this.width);
        video.setAttribute("height", this.height);
        canvas.setAttribute("width", this.width);
        canvas.setAttribute("height", this.height);
        this.streaming = true;
      }
    },
    // 獲取攝像頭被點擊的那一刻的數(shù)據(jù)并且存到canvas里面以便進行修改 然后在存儲在img標簽顯示在頁面
    takepicture () {
      let { video, canvas, photo } = this.$refs
      let context = canvas.getContext("2d")
      if (this.width && this.height) {
        canvas.width = this.width;
        canvas.height = this.height;
        context.drawImage(video, 0, 0, this.width, this.height);
        let data = canvas.toDataURL("image/png");
        photo.setAttribute("src", data);
      } else {
        this.clearphoto();
      }
    },
    // 清除canvas信息
    clearphoto () {
      let { canvas, photo } = this.$refs
      var context = canvas.getContext("2d");
      context.fillStyle = "#AAA";
      context.fillRect(0, 0, canvas.width, canvas.height);

      var data = canvas.toDataURL("image/png");
      photo.setAttribute("src", data);
    },
    // 初始化攝像頭調(diào)用
    startup() {
      let { video } = this.$refs
      this.width = 320
      this.height = 0
      this.streaming = false
      navigator.mediaDevices
        .getUserMedia({ video: true, audio: false })
        .then((stream) => {
          video.srcObject = stream;
          video.play();
        })
        .catch((err) => {
          console.log("An error occurred: " + err);
        })
    }

autoplay 需要開啟自動播放不然需要在成功的回調(diào)里面手動執(zhí)行，不然不會顯示內(nèi)容. 如果只是開啟攝像頭部分我們不需要聲音，所以關(guān)閉掉了

我們需要等頁面加載之后手動開啟攝像頭方法。

mounted() {
   this.startup()
}

startup() {
  let { video } = this.$refs // 獲取頁面上面的視頻元素
  this.width = 320 // 初始化寬度
  this.height = 0 // 初始化高度
  this.streaming = false // 初始化是否進行中
  navigator.mediaDevices
    .getUserMedia({ video: true, audio: false }) // 這里我們只開啟攝像頭
    .then((stream) => { // 成功的執(zhí)行
      video.srcObject = stream;
    })
    .catch((err) => { // 失敗的執(zhí)行
      console.error("An error occurred: " + err);
    })
},

當攝像頭被成功啟動之后， 就會執(zhí)行 canplay 方法

 canplay () {
  let { video, canvas } = this.$refs // 獲取節(jié)點 
  if (!this.streaming) { // 是否是在運行中 如果是
    this.height = video.videoHeight / (video.videoWidth / this.width); // 初始化高度
    console.log(this.height)
    if (isNaN(this.height)) { // 這里初始化高度是為了和寬度進行一個響應 初始成一個4:3的比例
      this.height = this.width / (4 / 3);
    }
    video.setAttribute("width", this.width); // 這個時候開始設置節(jié)點的寬度和高度
    video.setAttribute("height", this.height);
    canvas.setAttribute("width", this.width);
    canvas.setAttribute("height", this.height);
    this.streaming = true;
  }
}

這個時候攝像頭的基本也就已經(jīng)操作完畢了 如果沒有一場的時候就可以在頁面上看到你攝像頭所捕捉到的內(nèi)容 這個時候我們需要把你想要捕捉的內(nèi)容轉(zhuǎn)成圖片顯示到頁面上

takepicture () { // 點擊方法 當我們點擊 Take photo 按鈕的時候 這個時候把這部分的信息轉(zhuǎn)成圖片
  let { video, canvas, photo } = this.$refs // 獲取節(jié)點
  let context = canvas.getContext("2d")
  if (this.width && this.height) { // 把video的數(shù)據(jù)存入canvas以便我們進行其他操作 轉(zhuǎn)成圖片資源然后顯示在頁面上
    canvas.width = this.width;
    canvas.height = this.height;
    context.drawImage(video, 0, 0, this.width, this.height);
    let data = canvas.toDataURL("image/png");
    photo.setAttribute("src", data);
  } else { // 如果初始化的寬高不存在 這個時候說明有異常需要排除，同時清除掉畫布上面的圖片數(shù)據(jù)
    this.clearphoto();
  }
},
clearphoto () { // 清除畫布圖片數(shù)據(jù) 同時更新img
  let { canvas, photo } = this.$refs
  var context = canvas.getContext("2d");
  context.fillStyle = "#AAA";
  context.fillRect(0, 0, canvas.width, canvas.height);

  var data = canvas.toDataURL("image/png");
  photo.setAttribute("src", data);
},

完成以上步驟之后，沒有問題。我們就可以喚醒連接的攝像頭設備，捕捉你想要的畫面存到你想要存的地方。當我們把捕捉到的畫面存到canvas里面去之后，我們可以進行很多操作，可以對你捕捉的畫面增加你想要的特效，這個時候canvas能夠?qū)崿F(xiàn)的功能都可以在你捕捉到畫面上面實現(xiàn)，并且轉(zhuǎn)成圖片。
此時，攝像頭所捕捉到的內(nèi)容還是單向的，無法與別人通訊。如果你想實現(xiàn)一種類似于視頻聊天的功能。這個時候就要改一下我們的代碼，參考一下webRTC即時通訊協(xié)議。需要搭建一個第三方的信令服務器，來進行雙向通訊。

我現(xiàn)在借助的是的face-api這款工具 有捕捉人臉，檢測面部特征。這個包可以把你想要檢測的圖片視頻以及攝像頭上面的內(nèi)容都是支持捕捉人臉和檢測面部特征。我這里主要實現(xiàn)的是攝像頭捕捉人臉和檢測面部特征。

官網(wǎng)： https://github.com/justadudew...

HTML部分

JS部分

const video = document.getElementById("video"); // 獲取節(jié)點
Promise.all([ // 加載我想要使用的模型 同時對應的josn文件和shard文件要處在同一目錄 不然讀取的時候可能讀取不到。當你讀取不到的時候你可能會報 SyntaxError: Unexpected token < in JSON at position 0。這點略坑
  faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
  faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
  faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
  faceapi.nets.faceExpressionNet.loadFromUri("/models")
]).then(startVideo); // 載入成功之后喚醒攝像頭

function startVideo() {
  navigator.getUserMedia(
    { video: {} },
    stream => (video.srcObject = stream),
    err => console.error(err)
  );
}

video.addEventListener("play", () => { // 當攝像頭成功啟動之后 開始執(zhí)行這部分的方法
  const canvas = faceapi.createCanvasFromMedia(video); // 創(chuàng)建一個畫布
  document.body.append(canvas);
  const displaySize = { width: 640, height: 480 }; // 這部分的大小是等同video的大小的
  faceapi.matchDimensions(canvas, displaySize); // 聲明大小
  setInterval(async () => { // 我們需要持續(xù)傳遞攝像頭的數(shù)據(jù)
    const detections = await faceapi
      .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
      .withFaceLandmarks()
      .withFaceExpressions();
    const resizedDetections = faceapi.resizeResults(
      detections,
      displaySize
    );
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
    faceapi.draw.drawDetections(canvas, resizedDetections);
    faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
    faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
  }, 100);
});