ความต้องการ
การพัฒนาแอปแบบไฮบริด, เนทิฟเชลล์ + webApp เรียกใช้ฟังก์ชันกล้องเนทิฟใน web part และแสดงเนื้อหาของกล้องในพื้นที่ที่กำหนดของเว็บเพจ ในเวลาเดียวกัน คุณสามารถถ่ายภาพและทำการจดจำใบหน้าได้ด้วยตนเอง และ แสดงผลการจดจำบนหน้าเว็บ
กองเทคโนโลยี
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=videoการโหลดลูปความสูงล่วงหน้า > </video>
จาวาสคริปต์:
initVideo() { ให้นั่น = นี้; this.video = document.getElementById(เว็บแคม); setTimeout(() => { ถ้า ( navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ) { //โทรหาอุปกรณ์สื่อของผู้ใช้และเข้าถึงกล้อง this.getUserMedia( { วิดีโอ: { ความกว้าง: { อุดมคติ: that.videoWidth, สูงสุด: that.videoWidth }, ความสูง: { อุดมคติ: that.videoHeight, สูงสุด: that.videoHeight }, FacingMode: ผู้ใช้, // กรอบกล้องหน้า: { อุดมคติ: 30, ต่ำสุด: 10 } } }, this.videoSuccess, this.videoError } } else { this.$toast.center(กล้องไม่สามารถเปิดได้ โปรดตรวจสอบการตั้งค่าการอนุญาต!); }, 300); }, getUserMedia(ข้อจำกัด, ความสำเร็จ, ข้อผิดพลาด) { if (navigator.mediaDevices.getUserMedia) { //The latest API navigator.mediaDevices .getUserMedia(constraints) .then(success) .catch(error); } else if (navigator.webkitGetUserMedia) { //เบราว์เซอร์หลัก webkit navigator.webkitGetUserMedia (ข้อจำกัด ความสำเร็จ ข้อผิดพลาด); } else if (navigator.mozGetUserMedia) { //firfox browser navigator.mozGetUserMedia (ข้อจำกัด ความสำเร็จ ข้อผิดพลาด); } else if (navigator.getUserMedia) { //Old API navigator getUserMedia(ข้อจำกัด ความสำเร็จ ข้อผิดพลาด); videoSuccess (สตรีม) { this.mediaStreamTrack = stream; this.video.srcObject = stream; this.video.play(); }, videoError (ข้อผิดพลาด) { console.error (ข้อผิดพลาด); เมื่อล้มเหลว โปรดตรวจสอบการตั้งค่าการอนุญาต! }2. Canvas รับภาพจากกล้อง
จาวาสคริปต์:
this.canvas = document.createElement(canvas); .... ให้บริบท = this.canvas.getContext(2d); context.drawImage(this.video, 0, 0, this.videoWidth, this.videoHeight); imgSrc = this.canvas.toDataURL(รูปภาพ/png);
3. เรียก Baidu AI เพื่อระบุรูปภาพ
จาวาสคริปต์:
ปล่อยให้นั่น = นี้; ให้ base64Data = this.canvas.toDataURL(); ให้หยด = this.dataURItoBlob(base64Data); // var file = new FormData(); , that.uuid); util.ajax .post(XXXXXXXXX, ไฟล์, { ส่วนหัว: { ประเภทเนื้อหา: multipart/form-data } }) .then(function(response) { if ((response.status = 200)) { .....การรับรู้สำเร็จ แสดงผลลัพธ์} else { ....การรับรู้ล้มเหลว} }) .catch(ฟังก์ชั่น(ข้อผิดพลาด) { console.error(error); }); // แปลง base64 เป็น Blob dataURItoBlob(base64Data) { var byteString; (base64Data.split(,)[0].indexOf(base64) >= 0) byteString = atob(base64Data.split(,)[1]); อื่น ๆ 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); } ส่งคืน Blob ใหม่ ([ia], { type : mimeString }); },การปรับตัวของโทรศัพท์มือถือ
1. เนื่องจากการจัดการสิทธิ์ของ Android มีการเปลี่ยนแปลงตั้งแต่ Android 6 เชลล์เนทีฟของ Android จึงต้องได้รับการประมวลผลดังนี้:
myWebView.setWebChromeClient (WebChromeClient ใหม่ () { @TargetApi (Build.VERSION_CODES.LOLLIPOP) @ แทนที่โมฆะสาธารณะ onPermissionRequest (คำขอ PermissionRequest สุดท้าย) { request.grant (request.getResources ()); }});2. ระบบ IOS ใช้งานได้หลังจาก Safari11
3. ข้อผิดพลาด OverconstrainedError โทรศัพท์ Android บางรุ่นจะรายงานข้อผิดพลาด OverconstrainedError สาเหตุก็คือการตั้งค่าพารามิเตอร์ของกล้องไม่สมเหตุสมผลและไม่พบการตั้งค่าที่ระบุ