必要
ネイティブ シェル + WebApp のハイブリッド アプリ開発では、Web パーツでネイティブ カメラ機能を呼び出し、Web ページの指定された領域にカメラのコンテンツを表示すると同時に、手動で写真を撮影して顔認識を実行することができます。認識結果をWebページに表示します。
テクノロジースタック
vue、HTML5、ビデオタグ、Android、IOS、Baidu AI
分析する
1. navigator.mediaDevices.getUserMedia を使用してシステムのネイティブ カメラ関数を呼び出します
2. video タグはカメラのコンテンツを表示します
3. Canvasタグを使用して画像を取得する
4. 画像をサーバーにアップロードし、Baidu AI を通じて画像を識別します
5. 認識結果をWebに表示
コアコード
1. システムのネイティブ カメラ関数を呼び出し、video タグを使用して HTML を表示します。
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight ループ プリロード > </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 ナビゲータ 。 getUserMedia(制約、成功、エラー) } }; videoSuccess(stream) { this.mediaStreamTrack = ストリーム; this.video.srcObject = ストリーム; videoError(error) { console.$toast.center(カメラは失敗しました。権限設定を確認してください!);2. Canvas がカメラ画像を取得します
JavaScript:
this.canvas = document.createElement(canvas); .... context = this.canvas.getContext(2d); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); imgSrc = this.canvas.toDataURL(image/png);
3. Baidu AI を呼び出して写真を識別する
JavaScript:
let that = this; letbase64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(file, blob); , 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; (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. Android 6 以降、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 スマートフォンでは、カメラのパラメータ設定が不適切で、指定された設定が見つからないことが原因で報告されます。