日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

需求

混合App開發,原生殼子+webApp,在web部分調用原生攝像頭功能并且在網頁指定區域顯示攝像頭內容,同時可以手動拍照并進行人臉識別,將識別結果顯示在網頁上。

技術棧

vue、html5、video標簽、Android、IOS、百度AI

分析

1、使用navigator.mediaDevices.getUserMedia調用系統原生攝像頭功能

2、video標簽顯示攝像頭內容

3、canvas標簽獲取圖片

4、將圖像上傳服務器,通過百度AI識別圖片

5、web顯示識別結果

核心代碼

1、調用系統原生攝像頭功能并使用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

) {

//調用用戶媒體設備, 訪問攝像頭

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("攝像頭打開失敗,請檢查權限設置!");

}

}, 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("攝像頭打開失敗,請檢查權限設置!");

},

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、調用百度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)) {

.....識別成功,顯示結果

} else {

......識別失敗

}

})

.catch(function(error) {

console.error(error);

});

//base64轉換為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的權限管理出現變化,Android原生的殼子,需要做如下處理:

myWebView.setWebChromeClient(new WebChromeClient() {

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

@Override

public void onPermissionRequest(final PermissionRequest request) {

request.grant(request.getResources());

}

});

2、IOS系統,Safari11之后可用

3、OverconstrainedError錯誤,部分Android手機會報OverconstrainedError錯誤,原因是攝像頭參數設置不合理,找不到指定設置。

注:如代碼有錯誤請主動聯系發布者。

分享到:
標簽:攝像頭 Html5
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定