يحتاج
يقوم تطوير التطبيقات الهجينة، Shell الأصلي + WebApp، باستدعاء وظيفة الكاميرا الأصلية في جزء الويب ويعرض محتوى الكاميرا في المنطقة المخصصة لصفحة الويب، وفي الوقت نفسه، يمكنك التقاط الصور يدويًا وإجراء التعرف على الوجه عرض نتائج التعرف على صفحة الويب.
كومة التكنولوجيا
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: { العرض: {مثالي: that.videoWidth، الحد الأقصى: that.videoWidth}، الارتفاع: {مثالي: that.videoHeight، الحد الأقصى: that.videoHeight}، وضع المواجهة: المستخدم، // معدل إطار الكاميرا الأمامية: {مثالي: 30، الحد الأدنى: 10 } } }, this.videoSuccess, this.videoError } else { this.$toast.center(فشل فتح الكاميرا، يرجى التحقق من إعدادات الأذونات! }); }, 300); }, getUserMedia(constraints, Success, error) { if (navigator.mediaDevices.getUserMedia) { // أحدث واجهة برمجة التطبيقات القياسية 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); getUserMedia(constraints, Success, Error) } }); videoSuccess(stream) { this.mediaStreamTrack =stream; this.video.srcObject =stream; this.video.play(); }, videoError(error) { console.error(error); عند الفشل، يرجى التحقق من إعدادات الأذونات! },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; ، 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 قد تغيرت منذ إصدار Android 6، فيجب معالجة واجهة 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، والسبب هو أن إعدادات معلمة الكاميرا غير معقولة ولا يمكن العثور على الإعدادات المحددة.