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>Title
我們新建一個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++的功能我們下一章講解
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4662/viewspace-2801909/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 使用Python結合Face++ API識別人臉PythonAPI
- 人臉識別與人體動作識別技術及應用pdf
- 人臉識別和手勢識別應用(face++)開發
- Kinect體感機器人(二)—— 體感識別機器人
- 人臉活體檢測人臉識別:眨眼+張口
- python—呼叫API人臉識別PythonAPI
- 如何進行精準人體關鍵點檢測,識別人體動作?
- C#+OpenCV進階(一)_人體識別C#OpenCV
- 【opencv3】 svm實現手寫體與人臉識別OpenCV
- 人臉識別 -- 活體檢測(張嘴搖頭識別)
- 人臉識別 — 活體檢測(張嘴搖頭識別)
- 40多個關於人臉檢測/識別的API、庫和軟體API
- 使用 OpenCV 與 Face++ 實現人臉解鎖OpenCV
- 微軟牛津專案人臉識別API初探微軟API
- AR大屏體感互動軟體:體感摳像拍照系統
- 人臉識別活體檢測技術理論
- 利用Wi-Fi訊號實現人體識別
- 從零玩轉人臉識別之RGB人臉活體檢測
- 人臉美化和人臉識別在美顏SDK中的具體應用
- 21天搞定聊天機器人之{命名實體識別}機器人
- Android人臉識別app——基於Face++,MVP+Retofit+RxJava+Dagger高度解耦AndroidAPPMVPRxJava解耦
- JavaScript裸體識別技術JavaScript
- 小程式--人臉識別功能(百度ai)AI
- 用華為HMS ML kit人體骨骼識別技術,Android快速實現人體姿勢動作抓拍Android
- 用Azure上Cognitive Service的Face API識別人臉API
- 人體酸性體質特徵與日常保養特徵
- 用華為HMS ML kit人體骨骼識別技術,Android快速實現人體姿勢動作抓拍 Android
- opencv 人臉識別OpenCV
- OpenCV — 人臉識別OpenCV
- Nodejs + Face++ 識別身份證照片NodeJS
- 鮮為人知的JavaScript功能JavaScript
- python ubuntu dlib 人臉識別11-物體追蹤PythonUbuntu
- 不能這樣像別人介紹 PHPPHP
- 人臉識別再遭禁令:隱私與偏見爭議未休 美國又一州禁用面部識別軟體
- 肢體識別與應用
- 曠視科技Face++進軍機器人業務機器人
- golang 有哪些庫可以做攝像頭/視訊人臉識別的?Golang
- 人臉識別損失函式疏理與分析函式