Differences

This shows you the differences between two versions of the page.

--- usingcamerafromwebview [2023/03/20 17:04] – [Misc] kalaschnikow
+++ usingcamerafromwebview [2023/04/18 12:05] (current) – [Using Camera from WebView] kalaschnikow
@@ Line 1: / Line 1: @@
+====== Using Camera from WebView ======
+The task is:
+  * find out whether/how it is possible to use (hardware) camera from the web control
+Marcel means it would be possible, when we use HTTPS for communication between our server and mobile client. The question is to:
+  * find out whether is possible
+  * test it
+  * use certificates properly
+  * find out how we can use the "keystore from Windows"
+So:
+  * 1. find out how to use the camera
+    * HTTPS only?
+  * 2. use HTTPS ?
+  * 3. use certificates properly
+===== Current status =====
+  * the HTTPS is implemented and can be used
+    * my work is saved in special branches (see the following text)
+  * I wrote a document about using HTTPS with efc ERP:
+    * https://docs.google.com/document/d/1mSJM13utIdbfc2HvGzOJXUl34SmSqvnplsa54T_-T9A/edit?usp=sharing
+  * currently (18.04.2023) :
+    * I can leave my work "as is" (saved in branches and documented in the previously described document) and wait until Marcel will implement certificate handling in the Tomcat
+    * Marcel (maybe) will implement a "switch" to have the possibility to use both (HTTP and HTTPS)
+===== Found facts and solution =====
+  * I wrote a document about using HTTPS with efc ERP: https://docs.google.com/document/d/1mSJM13utIdbfc2HvGzOJXUl34SmSqvnplsa54T_-T9A/edit?usp=sharing
+  * to use camera from WebView all communication should be done over HTTPS
+  * to scan barcodes we can use a library for it
+    * we chose zxing
+      * see ''efc_client_mobile/build.gradle'' <code>
+...
+          "@zxing/browser": "latest",
+	  "@zxing/library": "latest",
+	  "@zxing/ngx-scanner": "latest",
+</code>
+  * to enable scanner the parameter ''scanner-enabled'' for component ''efc-field'' was implemented
+    * I've tested it in the file ''auth.component.html'' for field ''loginUsername'': <code>
+<efc-field [focus]="true" [(ident)]="loginUsername" label="login_username" tabindex="0" [scannerEnabled]="true"> </efc-field>
+</code>
+  * for test purposes an "independent" component ''scanner-dialog-example'' was developed. Example: <code>
+<scanner-dialog-example></scanner-dialog-example>
+</code>
+  * my work is saved in two branches
+    * ''feat/barcodereader''
+      * for project ''efc_client_mobile''
+    * ''feat/https''
+      * for projects
+        * ''efc_server''
+        * ''efc_client''
+===== Reading Bar code =====
+The following bar codes should be supported (sorted by priority):
+  * Code39
+  * EAN13
+  * DataMatrix
+  * QRCode
+  * PDF417
+  * Code128
+See also the email from Klaus Gebauer "ClientMobile: Barcodes" (sent at 13.03.2023).
+I found the following libraries:
+  * https://github.com/zxing-js/ngx-scanner
+    * based on [[https://github.com/zxing/zxing|ZXing]]
+    * supported bar codes are listed here: https://github.com/zxing/zxing
+  * https://www.npmjs.com/package/ngx-barcode-scanner
+    * based on [[https://serratus.github.io/quaggaJS/|QuaggaJS]]
+===== Misc =====
+  * To have the ".war" of ''client_mobile'' in Tomcat it should be built first
+    * Open view "Gradle tasks"
+      * Open project ''efc_tools''
+        * Open folder ''efc''
+          * Execute task ''build_client_mobile''
+  * TODO
+    * the ng-component efc-field is not yet "bug free". There is a small CSS-problem with scanner symbol, which should be fixed.
+    * see https://stackoverflow.com/questions/59783953/align-matsuffix-content-with-a-text-inside-mat-form-field-input
+      * ask Torsten where / how to do it
+    * clean
+      * documentation/examples of ''Dialog'':
+  * A very helpful tool to debug in Chrome is the "Developer Console". To use it remotely on an Android device see: [[https://stackoverflow.com/questions/37256331/is-it-possible-to-open-developer-tools-console-in-chrome-on-android-phone|Is it possible to open developer tools console in Chrome on Android phone?]]
+    * see also : [[https://developer.chrome.com/docs/devtools/remote-debugging/|Remote debug Android devices]]
+    * to check devices in Chrome: ''chrome:/ /inspect/#devices''   <- (remove blank in the URL)
+  * Icons library used by ''efc_client_mobile'': [[https://github.com/marella/material-icons]].
+    * This is the [[https://marella.me/material-icons/demo/|Demo]] (with search functionality)
+  * Show Corners / Get coordinates of barcode
+    * https://stackoverflow.com/questions/43034961/how-to-get-the-coordinates-of-qr-code-using-zxing
+    * [[https://github.com/zxing-js/browser/issues/40|add the horizonal red line and yellow dots during codeReader.decodeFromVideoDevice]]
+    * [[https://github.com/zxing-js/library/issues/39|Add crop functionality to BrowserCodeReader]]
+==== Settings ====
+  * On Eclipse project ''efc_client_mobile''
+    * Open context menu and 'Properties' in it
+      * Open "Deployment"
+        * Add one entry:
+          * Source ''build/angular'' -> Deploy path ''/''
+    * In the file ''proxy.conf.json''
+      * edit entry ''"target": "http://PC-LS:8080/efcserver",''
+        * to ''"target": "https://PC-LS:8443/efcserver",''
+===== Useful reading =====
+  * Let's Encrypt for intranet servers
+    * https://security.stackexchange.com/questions/103524/lets-encrypt-for-intranet-websites
+    * https://dev.to/michaeldscherr/lets-encrypt-ssl-certificate-via-dns-challenge-8dd
+    * https://blog.heckel.io/2018/08/05/issuing-lets-encrypt-certificates-for-65000-internal-servers/
+  * Using WebView with HTTPS
+    * Our [[https://github.com/EffectiveCompany/efc_client_mobile_android/blob/main/app/src/main/java/effectivecompany/de/efcmobileclient/MainActivity.java|MainActivity]] from [[https://github.com/EffectiveCompany/efc_client_mobile_android|efc_client_mobile_android]] project
+    * https://developer.android.com/reference/android/webkit/WebViewClient
+      * HTTPS should work with standard WebView (?)
+    * [[https://stackoverflow.com/questions/7416096/android-webview-not-loading-an-https-url|Android WebView not loading an HTTPS URL]]
+      * Proper solution (?)
+    * https://gist.github.com/xtools-at/cf3eb1654d1162ef9a93c5354154344c
+      * is it a workaround?
+  * [[https://stackoverflow.com/questions/39210467/get-angular-cli-to-ng-serve-over-https|Get angular-cli to ng serve over HTTPS]]
+    * add parameters "sslKey", "sslCert", and "ssl" to "/efc_client_mobile/angular.json"
+  * [[https://tomcat.apache.org/tomcat-9.0-doc/ssl-howto.html|SSL/TLS Configuration How-To]] (for Apache Tomcat 9.0)
+==== SSL/TLS Configuration How-To (for Apache Tomcat 9.0) ====
+Original: [[https://tomcat.apache.org/tomcat-9.0-doc/ssl-howto.html|SSL/TLS Configuration How-To]] (for Apache Tomcat 9.0)
+=== SSL/TLS and Tomcat ===
+  * It is important to note that configuring Tomcat to take advantage of secure sockets is usually only necessary when running it as a stand-alone web server.
+=== Certificates ===
+  * Certificate - "digital passport" of an internet address
+    * Organization and some contact information
+  * This certificate is cryptographically signed by its owner
+  * For the certificate to work in the browsers without warnings, it needs to be signed by a trusted  Certificate Authorities (CAs).
+    * To obtain a signed certificate, you need to choose a CA and follow the instructions your chosen CA provides to obtain your certificate.
+    * A range of CAs is available including some that offer certificates at no cost.
+  * Java provides a simple command-line tool ''keytool'', which can easily create a "self-signed" Certificate.
+  * Self-signed Certificates not really guaranteed to be authentic at all, but can be useful for some testing scenarios (=> they are not suitable for any form of production use).
+=== General Tips on Running SSL ===
+...
+=== Configuration ===
+== Prepare the Certificate Keystore ==
+Tomcat currently operates only on keystores in following formats:
+  * JKS -> standard Java format (can be manipulated by ''keytool'')
+  * PKCS11 or PKCS12 -> internet standard (can be manipulated via (among other things) OpenSSL and Microsoft's Key-Manager)
+To create a keystore with ''keytool'':
+<code>
+"%JAVA_HOME%\bin\keytool" -genkey -alias tomcat -keyalg RSA -keystore \path\to\my\keystore
+</code>
+== Edit the Tomcat Configuration File ==
+Tomcat can use three different implementations of SSL:
+  * JSSE implementation provided as part of the Java runtime
+  * JSSE implementation that uses OpenSSL
+  * APR implementation, which uses the OpenSSL engine by default
+...
+The final step is to configure the Connector in the ''$CATALINA_BASE/conf/server.xml'' file, where ''$CATALINA_BASE'' represents the base directory for the Tomcat instance. An example <Connector> element for an SSL connector is included in the default server.xml file installed with Tomcat. To configure an SSL connector that uses JSSE, you will need to remove the comments and edit it so it looks something like this:
+<code>
+<!-- Define an SSL Coyote HTTP/1.1 Connector on port 8443 -->
+<Connector
+  protocol="org.apache.coyote.http11.Http11NioProtocol"
+  port="8443" maxThreads="200"
+  scheme="https" secure="true" SSLEnabled="true"
+  keystoreFile="${user.home}/.keystore" keystorePass="changeit"
+  clientAuth="false" sslProtocol="TLS"/>
+</code>