Html5調(diào)用手機攝像頭并實現(xiàn)人臉識別的實現(xiàn)
發(fā)布時間：2018-12-21 15:26:03 作者：中國第一程序員 
我要評論
我要評論這篇文章主要介紹了Html5調(diào)用手機攝像頭并實現(xiàn)人臉識別的實現(xiàn)，混合App開發(fā)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
需求
混合App開發(fā)，原生殼子+webApp，在web部分調(diào)用原生攝像頭功能并且在網(wǎng)頁指定區(qū)域顯示攝像頭內(nèi)容，同時可以手動拍照并進行人臉識別，將識別結(jié)果顯示在網(wǎng)頁上。
技術(shù)棧
vue、Html5、video標簽、Android、IOS、百度AI
分析
1、使用navigator.mediaDevices.getUserMedia調(diào)用系統(tǒng)原生攝像頭功能
2、video標簽顯示攝像頭內(nèi)容
3、canvas標簽獲取圖片
4、將圖像上傳服務(wù)器，通過百度AI識別圖片
5、web顯示識別結(jié)果
核心代碼
1、調(diào)用系統(tǒng)原生攝像頭功能并使用video標簽顯示html:
<video
id="webcam"
:style="videoStyle"
:width="videoWidth"
:height="videoHeight"
loop
preload
>
</video>
JavaScript：
initVideo() {
let that = this;
this.video = document.getElementById("webcam");
setTimeout(() => {
if (
navigator.mediaDevices.getUserMedia ||
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia
) {
//調(diào)用用戶媒體設(shè)備, 訪問攝像頭
this.getUserMedia(
{
video: {
width: {
ideal: that.videoWidth,
max: that.videoWidth
},
height: {
ideal: that.videoHeight,
max: that.videoHeight
},
facingMode: "user", //前置攝像頭
frameRate: {
ideal: 30,
min: 10
}
}
},
this.videoSuccess,
this.videoError
);
} else {
this.$toast.center("攝像頭打開失敗,請檢查權(quán)限設(shè)置!");
}
}, 300);
},
getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的標準API
navigator.mediaDevices
.getUserMedia(constraints)
.then(success)
.catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心瀏覽器
navigator.webkitGetUserMedia(constraints, success, error);
} else if (navigator.mozGetUserMedia) {
//firfox瀏覽器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//舊版API
navigator.getUserMedia(constraints, success, error);
}
},
videoSuccess(stream) {
this.mediaStreamTrack = stream;
this.video.srcObject = stream;
this.video.play();
},
videoError(error) {
console.error(error);
this.$toast.center("攝像頭打開失敗,請檢查權(quán)限設(shè)置!");
},
2、canvas獲取攝像頭圖片
JavaScript：
this.canvas = document.createElement("canvas");
....
let context = this.canvas.getContext("2d");
context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight);
this.imgSrc = this.canvas.toDataURL("image/png");
3、調(diào)用百度AI識別圖片
JavaScript：
let that = this;
let base64Data = this.canvas.toDataURL();
let blob = this.dataURItoBlob(base64Data); //
var file = new FormData();
file.append("file", blob);
file.append("key", that.uuid);
util.ajax
.post("XXXXXXXXXX", file, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(function(response) {
if ((response.status = 200)) {
.....識別成功，顯示結(jié)果
} else {
......識別失敗
}
})
.catch(function(error) {
console.error(error);
});
//base64轉(zhuǎn)換為Blob
dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else byteString = unescape(base64Data.split(",")[1]);
var mimeString = base64Data
.split(",")[0]
.split(":")[1]
.split(";")[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
手機適配
1、由于Android6之后，Android的權(quán)限管理出現(xiàn)變化，Android原生的殼子，需要做如下處理：
myWebView.setWebChromeClient(new WebChromeClient() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
@Override
public void onPermissionRequest(final PermissionRequest request) {
request.grant(request.getResources());
}
});
2、IOS系統(tǒng)，Safari11之后可用
3、OverconstrainedError錯誤，部分Android手機會報OverconstrainedError錯誤，原因是攝像頭參數(shù)設(shè)置不合理，找不到指定設(shè)置。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 本文給大家分享html5調(diào)用攝像頭實例代碼，代碼簡單易懂，對前端html5的學(xué)習(xí)有很大幫助，如果對html5調(diào)用攝像頭相關(guān)知識感興趣的朋友一起看看吧2021-06-28
HTML5通過navigator.mediaDevices.getUserMedia調(diào)用手機攝像頭問題
這篇文章主要介紹了HTML5通過navigator.mediaDevices.getUserMedia調(diào)用手機攝像頭問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值2020-04-27- 這篇文章主要介紹了html5調(diào)用攝像頭功能的實現(xiàn)代碼的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-07
- 根據(jù)需求我們可以把圖片數(shù)據(jù)轉(zhuǎn)換為流或二進制，我這里轉(zhuǎn)換為base64，拿到了數(shù)據(jù)就可以發(fā)揮想象了，tensorflow，機器學(xué)習(xí)，模式識別，大把的應(yīng)用場景。下面給大家介紹下html2021-12-28