ror 和 shr_使用RoR和React Native的ANPR

Z时代
2024-01-10
分类：综合

react

ror 和 shr

抽象 (Abstract)

Due to the never-ending increase in volume of vehicles surrounding our daily lives, Automatic Number Plate Recognition (ANPR), has become an evolving solution for managing and monitoring vehicles worldwide to enforce rules and prevent criminal activities, such as parking violation, red light violation, speeding, and vehicle theft. Although there is already a variety of public and private methods and libraries that have been developed and are used to achieve the automatic recognition of car license plate numbers around the world, there has not been much focus on making advancements toward a cross platform ANPR solution that supports all vehicle license plates worldwide. This paper introduces the Plate Vision project, a web and mobile application built on Ruby on Rails and React Native, which aims to serve as an alternative ANPR platform that supports detection of all license plates worldwide by utilizing various open source optical character recognition (OCR) libraries and making efficiency optimizations.
由于日常生活中车辆数量的不断增加，自动车牌识别(ANPR)已成为一种不断发展的解决方案，用于管理和监视全球车辆以执行规则并防止违法行为，例如违章停车，闯红灯违规，超速驾驶和车辆盗窃。尽管世界各地已经开发出各种公共和私人方法和库来实现对车牌号的自动识别，但并没有将太多精力集中在跨平台的ANPR解决方案上。支持全球所有车牌。本文介绍了Plate Vision项目，它是一个基于Ruby on Rails和React Native的Web和移动应用程序，旨在用作备用ANPR平台，该平台通过利用各种开源光学字符识别(OCR)支持检测全球所有车牌。库和效率优化。 Key words and phrases: ruby, rails, react native, license plate recognition, plate region extraction, optical character recognition (OCR), ANPR.关键词和短语：Ruby，铁轨，原生React，车牌识别，车牌区域提取，光学字符识别(OCR)，ANPR。

1.简介 (1. Introduction)

Since the core functionality and performance of Automatic Number Plate Recognition (ANPR) is based on years of research that uses distinct combinations of optical character recognition (OCR) techniques on images in order to find and read the license plates on the vehicles, and a variety of solutions already exist, there is no need to go through the extraneous development and training required to entirely recreate the OCR functionality itself, therefore the objective of this paper is to present an example of how to combine and optimize the existing OCR and ANPR solutions in order to develop Plate Vision, a unique ANPR platform that can work on any device using any camera, vehicle, location.
由于自动车牌识别(ANPR)的核心功能和性能基于多年的研究，该研究在图像上使用光学字符识别(OCR)技术的独特组合，以便查找和读取车辆上的车牌，以及各种的解决方案已经存在，因此不需要进行额外的开发和培训即可完全重新创建OCR功能本身，因此，本文的目的是提供一个示例，说明如何在Windows 2000中组合和优化现有的OCR和ANPR解决方案。为了开发Plate Vision，这是一个独特的ANPR平台，可以使用任何相机，车辆和位置在任何设备上工作。

The rest of the paper proceeds as follows. Section 2 presents some existing solutions and dependencies. Section 3 describes the Rails backend, frontend and the React native integration. Section 4 explains the ANPR optimization and testing as well as how Plate Vision was built, hosted, and maintained online, while Section 5 concludes the paper.
本文的其余部分进行如下。第2节介绍了一些现有的解决方案和依赖性。第3节描述了Rails后端，前端和React本机集成。第4节介绍了ANPR优化和测试，以及如何在线构建，托管和维护Plate Vision，而第5节则对本文进行了总结。

2. OCR依赖性 (2. OCR Dependencies)

Although many of the corporate tech giants such as Google, Amazon, Microsoft, and IBM provide their own cloud vision APIs which have the ability to analyze images and tag certain objects and features using algorithms that have taken their researchers years to develop and train, they are paid solutions, which can quickly become expensive when trying to scale or even demonstrate a platform such as ANPR to any amount of users, therefore using open source frameworks and libraries is not only a better solution economically but also one that provides the necessary ability to modify and control the ANPR detection algorithms.
尽管许多公司科技巨头(例如Google，Amazon，Microsoft和IBM)提供了自己的云视觉API，这些API能够使用经过研究人员多年开发和训练的算法来分析图像并标记某些对象和功能，但他们付费解决方案，当尝试扩展或什至向任意数量的用户演示诸如ANPR的平台时，该解决方案很快会变得昂贵，因此使用开源框架和库不仅在经济上是一种更好的解决方案，而且还提供了必要的能力修改和控制ANPR检测算法。

From all of the various solutions that currently exist, OpenALPR is the only one which is open source and provides the ability to modify and control it’s ANPR detection algorithms for specific countries, which is why it is was chosen to be used for Plate Vision.
从目前存在的所有各种解决方案中，OpenALPR是唯一开放源代码的解决方案，并具有针对特定国家/地区修改和控制其ANPR检测算法的能力，这就是为什么将其选择用于Plate Vision的原因。

OpenALPR also has 2 primary dependencies, OpenCV and Tesseract OCR, which serve as the foundation for performing the ANPR. It is best to keep the amount of dependencies a platform has to a minimum for the best performance, however with any project that integrates custom OCR there are bound to be multiple large dependencies [1].
OpenALPR还具有两个主要依赖项，OpenCV和Tesseract OCR，它们是执行ANPR的基础。最好将平台所具有的依赖项数量保持在最低水平，以实现最佳性能，但是，对于任何集成了自定义OCR的项目，必然会有多个大的依赖项[1]。

3.平台 (3. Platform)

The Plate Vision platform is built using the Ruby on Rails and React Native frameworks, and is therefore composed of 2 individual applications, the React Native mobile application, and the Rails application which serves as the main website and backend for the app.
Plate Vision平台使用Ruby on Rails和React Native框架构建，因此由2个单独的应用程序，React Native移动应用程序和Rails应用程序组成，该应用程序充当该应用程序的主要网站和后端。

Rails is a model–view–controller (MVC) and a server-side web application framework written in Ruby, which provides default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing [2].
Rails是一个模型视图控制器(MVC)和用Ruby编写的服务器端Web应用程序框架，它为数据库，Web服务和网页提供默认结构。它鼓励并促进使用Web标准，例如JSON或XML进行数据传输，以及使用HTML，CSS和JavaScript进行显示和用户接口[2]。

React Native is an open-source mobile application framework created by Facebook which enables writing JavaScript code that can be converted and interpreted to native code, thus allowing the easy compiling of working cross platform applications for Android, iOS, and UWP using one single language [3].
React Native是Facebook创建的一种开放源代码移动应用程序框架，它可以编写可转换并解释为本机代码JavaScript代码，从而允许使用一种语言轻松编译适用于Android，iOS和UWP的跨平台应用程序[ 3]。

OpenALPR is an open source Automatic License Plate Recognition library written in C++ with bindings in C#, Java, Node.js, and Python. The library analyzes images and video streams to identify license plates. The output is the text representation of any license plate characters [1].
OpenALPR是一个用C ++编写的开源自动车牌识别库，具有C＃，Java，Node.js和Python的绑定。图书馆分析图像和视频流以识别车牌。输出是任何车牌字符[1]的文本表示。

3.1后端 (3.1 Backend)

The backend of the platform is made up of various gems (libraries) and rails controllers which handle the requests from the website and mobile application respectively.
该平台的后端由各种gems(库)和rails控制器组成，它们分别处理来自网站和移动应用程序的请求。

The following lists and describes the gems that are used in the backend:
以下列出并描述了后端中使用的gem：

ALPR – used for calling openALPR commands ALPR –用于调用openALPR命令

Devise — is a flexible authentication solution for Rails based on Warden Devise —是基于Warden的Rails灵活的身份验证解决方案

Devise token auth — Simple, multi-client and secure token-based authentication for Rails. Devise令牌认证-对Rails的简单，多客户端和基于安全令牌的安全认证。

Rmagick — an interface between the Ruby programming language and the ImageMagick image processing library Rmagick — Ruby编程语言和ImageMagick图像处理库之间的接口

Rolify — simple Roles library without any authorization enforcement supporting scope on resource object. Rolify —简单的Roles库，在资源对象上没有任何授权实施支持范围。

The following lists and describes the website application controllers:
以下列出并描述了网站应用程序控制器：

Application controller – is the main controller that contains the methods, which can be executed throughout the website. 应用程序控制器–是包含方法的主控制器，可以在整个网站中执行这些方法。

Public controller – is inherited controller (form Application controller) that handles requests from the public pages on the website. 公共控制器–是继承的控制器(窗体应用程序控制器)，用于处理来自网站上公共页面的请求。

Users controller – handles requests from user account page. 用户控制器–处理来自用户帐户页面的请求。

Sessions controller – is a user authentication controller. 会话控制器–是用户身份验证控制器。

Vehicles controller – handles the creating, editing and deleting vehicles. 车辆控制器–处理创建，编辑和删除车辆。

The following lists and describes the application controllers that serve as a restful JSON API and handle the React Native Mobile Application requests:
以下列出并描述了用作静态JSON API并处理React Native Mobile Application请求的应用程序控制器：

Alpr controller – contains methods for analyzing the image in order to find a license plate number. Alpr控制器–包含用于分析图像以查找车牌号的方法。

Devices controller – contains methods for saving the device information of the user to the Database. 设备控制器–包含用于将用户的设备信息保存到数据库的方法。

Locations controller – saves the user device location data to the database. 位置控制器–将用户设备位置数据保存到数据库中。

Users controller – handles the user authorization/authentication. 用户控制器–处理用户授权/身份验证。

Vehicles controller – handles vehicle (create, edit, delete) object methods and saves vehicle data into the Database. 车辆控制器–处理车辆(创建，编辑，删除)对象方法，并将车辆数据保存到数据库中。

3.2前端(网站) (3.2 Frontend (Website))

The frontend of the platform is developed using a few rails gems as well as Bootstrap, jQuery and custom JavaScript where necessary.
该平台的前端是使用一些Rails gem以及必要时的Bootstrap，jQuery和自定义JavaScript开发的。

Bootstrap is a free and open-source front-end framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. [4]
Bootstrap是一个免费的开源前端框架，用于设计网站和Web应用程序。它包含用于排版，表单，按钮，导航和其他界面组件的基于HTML和CSS的设计模板，以及可选JavaScript扩展。 [4]

jQuery is a free and open source cross-platform JavaScript library designed to simplify the client-side scripting of HTML. [5]
jQuery是一个免费的开源跨平台JavaScript库，旨在简化HTML的客户端脚本。 [5]

The following lists and describes the gems that are used in the frontend:
以下列出并描述了前端中使用的gem：

Simple Form – improves upon the existing usage of standard rails forms [6] 简单表格–改进了标准导轨表格的现有用法[6]

Simple Navigation – helps easily create dynamic navigations [7] 简单导航–帮助轻松创建动态导航[7]

Rails Admin – provides a dynamic admin interface for the application [8]
Rails Admin –为应用程序提供动态管理界面[8]
The following is a list of the main site pages and their description:
以下是主要网站页面及其说明的列表：

Home – Main landing page for the website 主页–网站的主要登录页面

Vehicles Index – Page where all created vehicles are listed 车辆索引–列出所有已创建车辆的页面

Vehicles New/Edit – Page with form where vehicle is created and edited, and the license plate is analyzed 车辆新/编辑-具有创建和编辑车辆以及分析车牌的表格的页面

Vehicle Show – Page that shows the details about a specific saved vehicle. 车辆显示–显示有关特定已保存车辆的详细信息的页面。

User account – Page where user can see and edit details about their account 用户帐户–用户可以在其中查看和修改其帐户详细信息的页面

Forgot Password – Page where any user can request to reset their password using email 忘记密码–任何用户都可以请求使用电子邮件重设密码的页面

3.3 React Native应用程序(移动) (3.3 React Native Application (Mobile))

The app-industry today is ruled by two giants, namely Android and iOS. For companies and developers, it is essential to deliver a product to the majority of users, thus the necessity to adapt both platforms. The platforms involve their own way of developing applications and only have small resemblances between each other. This has been a problem that the app industry has faced and overcome by having to hire staff with knowledge in either Android or iOS, or both, to build two separate applications that in turn require parallel upkeep [9].
今天的应用行业由两个巨头统治，即Android和iOS。对于公司和开发人员而言，必须将产品交付给大多数用户，因此必须适应两个平台。平台涉及他们自己的应用程序开发方式，彼此之间只有很小的相似之处。这个问题一直是应用程序行业所面临和克服的问题，必须聘请具有Android或iOS知识，或同时具备这两者的知识的人员来构建两个单独的应用程序，而这又需要并行维护[9]。

Cross-platform frameworks that bridge this gap have come and gone, by not succeeding in creating applications with the same visual or functional standard as the native frameworks deliver. However, React Native promises to deliver a fully native experience with the use of only one code base. [10]. React native requires and runs on the NodeJS platform. Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code server-side. [11]
通过未能成功创建具有与本机框架所提供的视觉或功能标准相同的视觉或功能标准的应用程序，弥合这种鸿沟的跨平台框架已经过去了。但是，React Native承诺仅使用一个代码库即可提供完全本机的体验。 [10]。 React native需要并在NodeJS平台上运行。 Node.js是一个开放源代码，跨平台JavaScript运行时环境，可在服务器端执行JavaScript代码。 [11]

In order to understand a React Native application, its necessary to know about some of the basic React concepts, like JSX, state, props and components. JSX — is an XML-like syntax extension to ECMAScript without any defined semantics. Components – are the building blocks of any React native app and a typical React native app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties (props) and returns a React element that describes how a section of the UI (User Interface) should appear.
为了理解React Native应用程序，必须了解一些基本的React概念，例如JSX，状态，属性和组件。 JSX —是ECMAScript的类似XML的语法扩展，没有任何定义的语义。组件–是任何React本机应用程序的构建块，典型的React本机应用程序将拥有许多组件。简而言之，组件是一个JavaScript类或函数，可以选择接受输入(即属性(props))并返回一个React元素，该元素描述应显示UI(用户界面)部分的方式。

There are two types of data that control a component:
控制组件的数据有两种：

Props: are immutable and are set by the parent and they are fixed throughout the lifetime of a component. 道具：是不可变的，由父级设置，并且在组件的整个生命周期中都是固定的。

State: is mutable. This means that state can be updated in the future while props can’t. State can be initialized in the constructor, and then called by setState when it needs to be changed. 状态：易变。这意味着状态可以在将来更新，而道具不能。状态可以在构造函数中初始化，然后在需要更改时由setState调用。

By default React native provides a number of built-in components, that can be used in different purposes. Furthermore, developers are not limited to the components and APIs bundled with React Native because there are a lot of different packages (libraries) that many other developers have created to speed up the development for others.
默认情况下，React native提供了许多内置组件，可以用于不同目的。此外，开发人员不仅限于与React Native捆绑在一起的组件和API，因为许多其他开发人员已经创建了许多不同的包(库)来加快其他人的开发速度。

The following lists and describes the packages that are used with nodeJS to develop the React Native application:
以下列出并描述了与nodeJS一起用于开发React Native应用程序的软件包：

React – A declarative, efficient, and flexible JavaScript library for building user interfaces. [12] React –一个声明性，高效且灵活JavaScript库，用于构建用户界面。 [12]

React Native – A framework for building native apps with React. [13] React Native –使用React构建本机应用程序的框架。 [13]

Expo – A set of tools, libraries, and services that allow the building of native iOS and Android apps by writing JavaScript. [14] Expo –一组工具，库和服务，可通过编写JavaScript来构建本机iOS和Android应用程序。 [14]

Redux – A predictable state container for JavaScript apps. [15] Redux – JavaScript应用程序的可预测状态容器。 [15]

Axios – A Promise based HTTP client for the browser and node.js [16] Axios –用于浏览器和node.js的基于Promise的HTTP客户端[16]

Native Base – Essential cross-platform UI components for React Native [17] Native Base – React Native的基本跨平台UI组件[17]

React Native Navigation – provides native platform navigation on both iOS and Android for React Native apps [18] React Native Navigation –在iOS和Android上为React Native应用提供本地平台导航[18]

React Form Builder – Simple form generator library for react. [19] React Form Builder –用于React的简单表单生成器库。 [19]

Il8next — Internationalization framework for browser or any other javascript environment (eg. node.js) [20] Il8next —浏览器或任何其他javascript环境(例如，node.js)的国际化框架[20]

The following is a list of the app pages and their description:
以下是应用程序页面及其说明的列表：

Home – Main app landing page for the application 主页–应用程序的主应用程序登录页面

About – App page that describes what the platform is about 关于-应用页面，描述平台的含义

Vehicles Index – App page where all created vehicles are listed 车辆索引–应用程序页面，其中列出了所有创建的车辆

Vehicles New/Edit – App page with form where vehicle is created and edited, and the license plate is analyzed Vehicles New / Edit –车辆应用程序页面，其中包含创建和编辑车辆以及分析车牌的表格

Vehicle Show – App page that shows the details about a specific saved vehicle. 车辆显示–应用程序页面，显示有关特定已保存车辆的详细信息。

4.测试与托管 (4. Testing & Hosting)

While the initial tests and research for this platform are based on Russian license plates the ultimate goal of the Plate Vision platform is to be able to read license plates from around the world, and since OpenALPR had already been trained for popular countries like USA and Europe, it was initially assumed that it would also work well with Russian license plate numbers, since some of the European plates are similar to the Russian ones.
尽管此平台的初始测试和研究是基于俄罗斯车牌进行的，但Plate Vision平台的最终目标是能够读取来自世界各地的车牌，并且由于OpenALPR已经针对美国和欧洲等热门国家/地区进行了培训，最初认为它也可以与俄罗斯车牌号配合使用，因为某些欧洲车牌与俄罗斯车牌相似。

However, initial tests using the default European OpenAlpr configurations on Russian license plates, show that although OpenAlpr was able to identify and recognize some amount of the Russian license plates, further customization of OpenAlpr was needed in order to get reliable and consistent results. In order to improve the analyzing of the Russian plates without any extra training using OpenAlpr, a few custom configurations were created, derived and optimized from the European configurations with specific modifications based on a variety of test images that contain cars with Russian license plates.
但是，在俄罗斯车牌上使用默认的欧洲OpenAlpr配置进行的初步测试表明，尽管OpenAlpr能够识别和识别一定数量的俄罗斯车牌，但仍需要对OpenAlpr进行进一步的定制才能获得可靠且一致的结果。为了在不使用OpenAlpr进行任何额外培训的情况下改善对俄罗斯车牌的分析，基于包含装有俄罗斯车牌的汽车的各种测试图像，对欧洲配置进行了一些特殊的修改，从而创建，衍生和优化了一些自定义配置。

Even though the platform has been optimized to work best Russian license plates, it already supports many images of cars and plates from around the world because it runs multiple modified configurations of the OpenAlpr library, which leads to many possible outcomes, and in the end determines the best result based on world region plate pattern matching and reading accuracy.
尽管该平台已经过优化，可以使用最佳的俄罗斯车牌，但由于它运行OpenAlpr库的多种修改后的配置，因此已经支持了世界各地的许多汽车和牌照图像，最终导致许多可能的结果，并最终确定了基于世界区域板模式匹配和读取精度的最佳结果。

The entire platform is hosted using the cloud services of Heroku and is updated and maintained through the git version control system. However, it is important to note that, setting up specific dependencies like OpenAlpr to work on a cloud server environment like Heroku was difficult due to the restrictions, and challenges presented by Heroku’s cloud server environment. Therefore, the services of Docker were also used in combination with Heroku in order to overcome the difficulties of setting up and ensuring that the cloud OpenAlpr and all of its dependencies function the same as the ones in the local development environment [1].
整个平台使用Heroku的云服务托管，并通过git版本控制系统进行更新和维护。但是，必须注意的是，由于限制和Heroku的云服务器环境带来的挑战，设置像OpenAlpr这样的特定依赖项来在Heroku这样的云服务器环境上工作非常困难。因此，Docker的服务也与Heroku结合使用，以克服建立和确保云OpenAlpr及其所有依赖项与本地开发环境中的依赖项相同的困难[1]。

5.结论 (5. Conclusion)

Conclusively, the objective of this paper was to present the Plate Vision platform as well as describe it’s 3 main functioning components and how it plans to optimize ANPR while still supporting any device, camera, vehicle, location in the future. Although the current version of the platform only implements and uses OpenAlpr with multiple configurations in order to improve upon the Automatic Number Plate Recognition, there are still different ways to achieve ANPR, and with further research, testing, and experiments, the Plate Vision platform hopes to combine unique techniques and methods that make use of the best open source vision and OCR libraries available to create a truly optimal international ANPR solution.
最后，本文的目的是介绍Plate Vision平台，并描述其3个主要功能组件，以及计划如何优化ANPR，同时仍支持将来的任何设备，相机，车辆和位置。尽管当前版本的平台仅实现并使用具有多种配置的OpenAlpr来改进自动车牌识别功能，但是仍然存在实现ANPR的不同方法，并且通过进一步的研究，测试和实验，Plate Vision平台希望结合独特的技术和方法，这些技术和方法利用最佳的开源视觉和OCR库来创建真正最佳的国际ANPR解决方案。

参考文献 (References)

References参考文献

http://doc.openalpr.com/http://doc.openalpr.com/

2. Ruby on Rails Documentation –
2. Ruby on Rails文档– https://guides.rubyonrails.org/ https://guides.rubyonrails.org/

3. React Native Documentation –
3. React Native文档– https://facebook.github.io/react-native/docs/getting-started.html https://facebook.github.io/react-native/docs/getting-started.html

4. Bootstrap Documentation –
4. Bootstrap文档– https://getbootstrap.com/https://getbootstrap.com/

5. JQuery Documentation –
5. jQuery文档– https://jquery.com/ https://jquery.com/

6. Simple Form Documentation –
6.简单表单文档– https://github.com/plataformatec/simple_formhttps://github.com/plataformatec/simple_form

7. Simple Navigation Documentation –
7.简单导航文档– https://github.com/codeplant/simple-navigationhttps://github.com/codeplant/simple-navigation

8. Rails Admin Documentation –
8. Rails Admin文档– https://github.com/sferik/rails_adminhttps://github.com/sferik/rails_admin

9. Axelsson Oscar, Carlstrom Fredrik [Evaluation Targeting React Native in Comparison to Native Mobile Development] –
9. Axelsson Oscar，Carlstrom Fredrik [将React Native评估为与Native Mobile开发相比的评估] – https://lup.lub.lu.se/student-papers/search/publication/8886469https://lup.lub.lu.se/student-papers/search/publication/8886469

10. Hansson Niclas, Vidhall Tomas [Effects on performance and usability for cross-platform application development using React Native] –
10. Hansson Niclas，Vidhall Tomas [对使用React Native进行跨平台应用程序开发的性能和可用性的影响] – http://www.diva-portal.org/smash/record.jsf?pid=diva2%3A946127&dswid=8626http://www.diva-portal.org/smash/record.jsf?pid=diva2%3A946127&dswid=8626

11. NodeJS —
11. NodeJS- https://nodejs.orghttps: //nodejs.org

12. ReactJS —
12. ReactJS- https://reactjs.org/https: //reactjs.org/

13. React Native —
13. React Native — https://facebook.github.io/react-native/https://facebook.github.io/react-native/

14. Expo —
14.博览会-https: https://expo.io///expo.io/

15. Redux —
15. Redux- http://redux.js.org/http: //redux.js.org/

16. Axios —
16. Axios- https://github.com/axios/axioshttps://github.com/axios/axios

17. Native Base —
17. Native Base — https://nativebase.io/https://nativebase.io/

18. React Native Navigation –
18. React Native Navigation – https://wix.github.io/react-native-navigationhttps://wix.github.io/react-native-navigation

19. React Form Builder –
19. React Form Builder – https://github.com/bietkul/react-native-form-builderhttps://github.com/bietkul/react-native-form-builder

20. Il8next –
20. Il8next – https://www.i18next.com/https://www.i18next.com/