需求
混合App開發(fā)，原生殼子+webApp，在web部分調(diào)用原生攝像頭功能并且在網(wǎng)頁(yè)指定區(qū)域顯示攝像頭內(nèi)容，同時(shí)可以手動(dòng)拍照并進(jìn)行人臉識(shí)別，將識(shí)別結(jié)果顯示在網(wǎng)頁(yè)上。
技術(shù)棧
vue、Html5、video標(biāo)簽、Android、IOS、百度AI
分析
1、使用navigator.mediaDevices.getUserMedia調(diào)用系統(tǒng)原生攝像頭功能
2、video標(biāo)簽顯示攝像頭內(nèi)容
3、canvas標(biāo)簽獲取圖片
4、將圖像上傳服務(wù)器，通過(guò)百度AI識(shí)別圖片
5、web顯示識(shí)別結(jié)果
核心代碼
1、調(diào)用系統(tǒng)原生攝像頭功能并使用video標(biāo)簽顯示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è)備, 訪問(wèn)攝像頭 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("攝像頭打開失敗,請(qǐng)檢查權(quán)限設(shè)置!"); } }, 300); }, getUserMedia(constraints, success, error) { if (navigator.mediaDevices.getUserMedia) { //最新的標(biāo)準(zhǔn)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("攝像頭打開失敗,請(qǐng)檢查權(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識(shí)別圖片
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)) { .....識(shí)別成功，顯示結(jié)果 } else { ......識(shí)別失敗 } }) .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 }); },手機(jī)適配
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錯(cuò)誤，部分Android手機(jī)會(huì)報(bào)OverconstrainedError錯(cuò)誤，原因是攝像頭參數(shù)設(shè)置不合理，找不到指定設(shè)置。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
