нуждаться
Разработка гибридного приложения, собственная оболочка + webApp, вызывает встроенную функцию камеры в веб-части и отображает содержимое камеры в назначенной области веб-страницы. В то же время вы можете вручную делать снимки и выполнять распознавание лиц, а также отображать результаты распознавания на веб-странице.
стек технологий
vue, Html5, тег видео, Android, IOS, Baidu AI
анализировать
1. Используйте navigator.mediaDevices.getUserMedia для вызова встроенной функции камеры системы.
2. Тег видео отображает содержимое камеры.
3. Получите изображения, используя тег Canvas.
4. Загрузите изображение на сервер и идентифицируйте изображение через Baidu AI.
5. Веб-отображение результатов распознавания
основной код
1. Вызовите встроенную функцию камеры системы и используйте тег видео для отображения 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: { ширина: {идеал: that.videoWidth, макс: that.videoWidth}, высота: {идеал: that.videoHeight, макс: that.videoHeight}, FaceMode: пользователь, //FrameRate передней камеры: {идеал: 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) { // основной браузер webkit navigator.webkitGetUserMedia(constraints, Success, error); } else if (navigator.mozGetUserMedia) { //браузер firfox navigator.mozGetUserMedia(constraints, Success, error); } else if (navigator.getUserMedia) { //Старый API navigator. getUserMedia (ограничения, успех, ошибка } }, videoSuccess(поток) { this.mediaStreamTrack = поток; this.video.srcObject = поток; this.video.play() }, videoError(error) { console.error(error); при ошибке, проверьте настройки разрешений! },2. Canvas получает изображения с камеры.
JavaScript:
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(изображение/png);
3. Вызовите Baidu AI для идентификации изображений.
JavaScript:
let that = this; let base64Data = this.canvas.toDataURL(); let blob = this.dataURItoBlob(base64Data); // var file = new FormData(); file.append(file, blob); , that.uuid); util.ajax .post(XXXXXXXXXX, file, {headers: { Content-Type: 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]); 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 (окончательный запрос PermissionRequest) { request.grant(request.getResources()); }});2. Система IOS, доступная после Safari11.
3. Ошибка OverconstrainedError. Некоторые телефоны Android сообщают об ошибке OverconstrainedError. Причина в том, что настройки параметров камеры необоснованны и указанные настройки не могут быть найдены.