How to keep 50% Native Camera & 50% web views in single web view of capacitor WKWebView

[sibaprasadsahoo]

We want to use native barcode scanning library(google gms) & show the scanning result below the camera screen in webview, where one single web view contains below:

1. Native View: The native camera(which is continuously scanning barcode) in upper half of the screen
2. Web View. : The scan results in a list in the bottom half of the screen

We are using capacitor to run our app in Web, Android & iOS. The problem is in Scanning screen of native App(Android & iOS).

If we use capacitor Camera plugin, then its opening in full screen,

Expectation:

we want to use native camera view & native barcode scanning library, which will continuously scans the barcode using native barcode library(google gms) & gives the barcode values to the webView.

The webview contains native camera View in upper half of the screen & web view list in the bottom half of the screen to show the scanned barcode value.

Please let me know how to achieve this using capacitor with mixed native views & web views in single WKWebView screen?

This is already possible in react-native-camera, which uses native camera with google gms for barcode scanning. The question is how to achieve same in capacitor?

[hemangsk]

https://github.com/capacitor-community/camera-preview#startoptions might be helpful. It has x, y, width and height params in start function with lets us specify the dimensions of camera container.

[tafelnl]

Check out https://github.com/DutchConcepts/capacitor-barcode-scanner. It is heavily based on bitpays cordova barcode scanner. That means that the WebView is made transparent, and the barcode scanner is rendered behind it. This way, it is made possible to have full control over the layout with HTML/CSS.

Only thing is that after each scan result (barcode recognized) you will have to call startScan() again.
But it is not hard to implement continuous scanning, so you could make a PR for it.