JavaScript face++ 人體識別API 與 人體摳像功能（

最近在開始接觸網上API呼叫 完成了一個關於face++人體識別API，並透過這個API實現人體摳像功能。

既然要實現人體摳像，我們順便學習下，JavaScript呼叫攝像頭的方法吧。

有個部落格寫的很好 大家可以去看

我這裡簡單介紹下

首先在html新增標籤

1.開啟攝像頭

有2個版本的方法，區別不是很大。我這裡介紹新版本的，如果嚴謹點，是需要2個版本都要相容的，但我這裡是簡單的demo所以簡單地呼叫攝像頭即可

新版本位於 navigator.mediaDevices 物件下

         navigator.mediaDevices.getUserMedia({             video: true,             audio: true         }).then(function(stream) {             console.log(stream);             mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];             video.src = (window.URL || window.webkitURL).createObjectURL(stream);             video.play();         }).catch(function(err) {             console.log(err);         })

第一個引數代表著標籤是否開啟 video是影片，audio是音訊，true代表著申請開啟。video和audio代表著標籤位置

第二個引數是呼叫成功之後的回撥函式

第三個引數是呼叫失敗回撥的函式

這是html程式碼

html>            

   
     擷取影像     儲存圖片     關閉攝像頭     換背景 

      　 

  　  

 

我們新建一個JavaScript檔案儲存程式碼，命名為index.js

window.onload = function () {     function $(elem) {         return document.querySelector(elem);  }     var canvas = $('canvas'),  context = canvas.getContext('2d'),  video = $('video'),  snap = $('#snap'),  close = $('#close'),  upload = $('#upload'),  uploaded = $('#uploaded'),  mediaStreamTrack;  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia; // 獲取媒體方法（新方法） // 使用新方法開啟攝像頭  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {         navigator.mediaDevices.getUserMedia({             video: true,   }).then(function(stream) {             console.log(stream);  mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];  video.src = (window.URL || window.webkitURL).createObjectURL(stream);  video.play();  }).catch(function(err) {             console.log(err);  })     } // 使用舊方法開啟攝像頭  else if (navigator.getMedia) {         navigator.getMedia({             video: true  }, function(stream) {             mediaStreamTrack = stream.getTracks()[0];   video.src = (window.URL || window.webkitURL).createObjectURL(stream);  video.play();  }, function(err) {             console.log(err);  });  } // 擷取影像  snap.addEventListener('click', function() {         alert("dd");  context.drawImage(video, 0, 0, 200, 150);  }, false);  // 關閉攝像頭  close.addEventListener('click', function() {         mediaStreamTrack && mediaStreamTrack.stop();  }, false);  };

這個index.js主要是完成影片截圖和儲存的功能

呼叫face++的功能我們下一章講解

原文出處