필요
하이브리드 앱 개발인 네이티브 쉘 + 웹앱은 웹 파트에서 네이티브 카메라 기능을 호출해 웹 페이지의 지정된 영역에 카메라 콘텐츠를 표시함과 동시에 수동으로 사진을 찍고 얼굴 인식을 수행할 수 있으며, 웹 페이지에 인식 결과를 표시합니다.
기술 스택
vue, Html5, 비디오 태그, Android, IOS, Baidu AI
분석하다
1. navigator.mediaDevices.getUserMedia를 사용하여 시스템의 기본 카메라 기능을 호출합니다.
2. 비디오 태그는 카메라 내용을 표시합니다
3. 캔버스 태그를 사용하여 이미지 얻기
4. 이미지를 서버에 업로드하고 Baidu AI를 통해 이미지를 식별합니다.
5. 웹에서 인식 결과 표시
핵심 코드
1. 시스템의 기본 카메라 기능을 호출하고 비디오 태그를 사용하여 HTML을 표시합니다.
<video id=webcam :style=videoStyle :width=videoWidth :height=videoHeight 루프 사전 로드 > </video>
자바스크립트:
initVideo() { let that = this; this.video = document.getElementById(webcam); setTimeout(() => { if ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ) { //사용자 미디어 장치를 호출하고 카메라에 액세스합니다. this.getUserMedia( { video: { width: { 이상적: that.videoWidth, 최대: that.videoWidth }, height: { 이상적: that.videoHeight, 최대: that.videoHeight },facingMode: user, //전면 카메라 프레임Rate: { 이상적: 30, 최소: 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) { //웹킷 코어 브라우저 navigator.webkitGetUserMedia(제약 조건, 성공, 오류); } else if (navigator.mozGetUserMedia) { //fifox 브라우저 navigator.mozGetUserMedia(제약 조건, 성공, 오류) } else if (navigator.getUserMedia) { //기존 API 탐색기 . getUserMedia(제약조건, 성공, 오류) } }, videoSuccess(stream) { this.mediaStreamTrack = stream; this.video.play() }, videoError(error) this.$toast.center(카메라는 실패시 권한 설정을 확인해주세요!),2. Canvas는 카메라 사진을 얻습니다.
자바스크립트:
this.canvas = document.createElement(canvas); .... let context = this.canvas.getContext(2d); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); imgSrc = this.canvas.toDataURL(image/png);
3. Baidu AI에 전화하여 사진 식별
자바스크립트:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); , that.uuid); util.ajax .post(XXXXXXXXXX, 파일, { 헤더: { 콘텐츠 유형: 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. 안드로이드 6부터 안드로이드의 권한 관리가 변경되었기 때문에 안드로이드 네이티브 셸을 다음과 같이 처리해야 합니다.
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 오류가 보고됩니다. 그 이유는 카메라 매개변수 설정이 불합리하고 지정된 설정을 찾을 수 없기 때문입니다.