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大屏體感互動軟體:體感摳像拍照系統
- 從零玩轉人臉識別之RGB人臉活體檢測
- 人臉識別活體檢測技術理論
- 利用Wi-Fi訊號實現人體識別
- 人臉美化和人臉識別在美顏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