Comments (10)
Hello @chernandez-bunnings
Good to know the new version works for you.
Our plans for the new features are as follow:
- Scan Region styling: We will support the settings of stroke width, colour. The border-radius is not included in the current design. This feature will be included in a significant update, which will take a few months.
- Coordinate calculation: This feature is definitely in the requirement pool. However, it is still not confirmed when to add it. At the latest, this feature will be added to the significant update mentioned above.
from capture-vision-react-native-samples.
Hello @chernandez-bunnings
Currently, we don't support editing the style of scan region
. You can use the property scanRegionVisible
to hide it and draw a new one. Please let us know if you have difficulty on drawing your own scan region
.
For the requirements on overlays
, we have a method setOverlayColour(int fillARGB, int strokeARGB)
in native Android and iOS SDK but it is not available on React Native edition. You can set the stroke and fill colors via the method. The other style settings are not available now. Is this method meet your requirement? If this method is enough, we can add it to the next version (A new version needs approximately 1-2 weeks).
from capture-vision-react-native-samples.
Hello @Dynamsoft-Henry,
Thank you for your prompt response.
Could you please point me to the documentation of how to draw my own scanRegion
?
Because I was not able to change the look of it, I was using a similar approach of hiding the scanRegion
and including react-native-hole-view as an attempt to get the required look. However, the task of matching position between the hole view and the scanRegion
proved to be problematic as they don't align exactly, resulting in a "misleading hole view" for the scanRegion
where the bottom section of the hole is outside of the scanRegion
and won't be a good visual indicator to align a barcode for scanning purposes.
As an FYI, I tried multiple approaches for the scanRegion
props using regionMeasuredByPercentage
true
and false
.
This image shows the issue. For that screenshot I made the scanRegion
visible.
Regarding the overlay methods it would be nice to have them exposed in the RN SDK, but they are not necessary currently for my own use case, as I am not displaying the overlay when a barcode has been detected by the reader; but requirements may change and having that level of customisation may come handy, if not for me, perhaps other users?
from capture-vision-react-native-samples.
Hello @chernandez-bunnings
The scanRegion
property in our SDK is calculated by the video-streaming coordinate system. When you are trying to draw a customized "scanRegion", you have to transform the coordinates into the view coordinate system. For example, on my phone, the view size is 21001152 but the video size is 19201080 when using 1080P video steaming. They have different shapes.
If you are using x, y, width and height to draw a scanRegion, you can use the following formula to calculate the coordinates:
if viewHeight / viewWidth <= 1920 * 1080
float x = viewWidth * (region.regionLeft/100);
float y = 1920 * (region.regionTop)/100 * (viewWidth/1080) - (1920 * (viewWidth/1080) - viewHeight)/2;
float width = viewWidth * ((region.regionRight - region.regionLeft)/100);
float height = (1920 * (region.regionBottom - (float)region.regionTop)/100) * (viewWidth/1080);
if viewHeight / viewWidth > 1920 * 1080
float x = 1080 * (region.regionLeft/100) * (viewHeight/1920) -(1080 * (viewHeight/1920)-viewWidth)/2;
float y = viewHeight * (region.regionTop/100);
float width = (1080 * (region.regionRight - region.regionLeft)/100) * (viewHeight/1920);
float height = viewHeight * ((region.regionBottom - region.regionTop)/100);
We will add new APIs to support style settings and coordinate calculating in the future. Currently, please try the above solutions.
from capture-vision-react-native-samples.
Hello @Dynamsoft-Henry
Thank you for sharing this.
Unfortunately after implementing this transformation logic, the "regions" still won't align. The misalignment is not as bad as before, but still not a perfect match. I'm wondering if pixel ratio | screen densities | video resolution of devices may be the reason.
I'm sharing screenshots of 3 different devices to illustrate the issue as the solution does not scale correctly. As well you will find the source code of this transformation logic.
iPhone 12 Pro | Nothing Phone | Pixel 5 |
---|---|---|
const VIDEO_STREAM_HEIGHT_1920 = 1920
const VIDEO_STREAM_WIDTH_1080 = 1080
export const getTransformedViewCoordinates = ({
scanRegion,
viewWidth,
viewHeight,
borderRadius,
}: ScanRegionProps) => {
const isSmallerShape =
viewHeight / viewWidth <= VIDEO_STREAM_HEIGHT_1920 * VIDEO_STREAM_WIDTH_1080
return isSmallerShape
? {
x: viewWidth * (scanRegion.regionLeft / 100),
y:
VIDEO_STREAM_HEIGHT_1920 *
(scanRegion.regionTop / 100) *
(viewWidth / VIDEO_STREAM_WIDTH_1080) -
(VIDEO_STREAM_HEIGHT_1920 * (viewWidth / 1080) - viewHeight) / 2,
width:
viewWidth * ((scanRegion.regionRight - scanRegion.regionLeft) / 100),
height:
VIDEO_STREAM_HEIGHT_1920 *
((scanRegion.regionBottom - scanRegion.regionTop) / 100) *
(viewWidth / VIDEO_STREAM_WIDTH_1080),
borderRadius,
}
: {
x:
VIDEO_STREAM_WIDTH_1080 *
(scanRegion.regionLeft / 100) *
(viewHeight / VIDEO_STREAM_HEIGHT_1920) -
(VIDEO_STREAM_WIDTH_1080 * (viewHeight / VIDEO_STREAM_HEIGHT_1920) -
viewWidth) /
2,
y: viewHeight * (scanRegion.regionTop / 100),
width:
((VIDEO_STREAM_WIDTH_1080 *
(scanRegion.regionRight - scanRegion.regionLeft)) /
100) *
(viewHeight / VIDEO_STREAM_HEIGHT_1920),
height:
viewHeight * ((scanRegion.regionBottom - scanRegion.regionTop) / 100),
borderRadius,
}
}
Special note (after writing original response): I tried the sample app to verify
scanRegion
behaviour. I could confirm it is not working correctly iniOS
. It seems to only work treating the region as percentages, whenregionMeasuredByPercentage
istrue
. Setting this prop tofalse
or0
does not change how the region is treated. I even tried updating the SDKdynamsoft-capture-vision-react-native
from1.1.5
to1.1.7
. Also the region looks slightly different as it is missing the dark translucent background, it has in Android.
both versions have the region set as
let region = {
regionTop: 30,
regionLeft: 16,
regionBottom: 50,
regionRight: 50,
regionMeasuredByPercentage: 0,
};
from capture-vision-react-native-samples.
Thanks for reporting the issues.
We have developed a sample that shows how to draw the scan region. Currently, it is uploaded to the scanRegionSample branch: https://github.com/Dynamsoft/capture-vision-react-native-samples/tree/scanRegionSample. The sample still need some test before handled. I think we can finish it tomorrow.
For the issues on regionMeasureByPercentage
parameter and scan region background. We will try our best to release the debugged version tomorrow.
from capture-vision-react-native-samples.
Hello @Dynamsoft-Henry
Thank you for creating the sample.
I tried the solution and I am sharing screenshots of three devices. The region alignment is still wrong in the sample app.
In iOS
as the regionMeasureByPercentage
is set to false
, it does not display the region (although it should be visible, since scanRegionVisible
is set to true
)
These builds are from the
scanRegionSample
branch and source has not been modified.
from capture-vision-react-native-samples.
There exists some bugs in the current version of dynamsoft-capture-vision-react-native package. We are debugging them and tending to release a new version today.
from capture-vision-react-native-samples.
We released a new version.
"dynamsoft-capture-vision-react-native": "^1.1.8"
Would you like to try the scanRegionSample
branch again with the new version?
from capture-vision-react-native-samples.
Hello @Dynamsoft-Henry,
Thanks addressing the issues. I can confirm that I'm able to align the regions after updating the camera sdk to version 1.1.8
I will be waiting to the future sdk
version where there is support to scanRegion
styling and coordinates calculation directly from the new APIs. For now I will be using this workaround.
Cheers.
from capture-vision-react-native-samples.
Related Issues (10)
- Task :app:mergeDebugAssets FAILED
- DCVCameraView component not working HOT 10
- CocoaPods could not find compatible versions for pod "DynamsoftBarcodeReader" HOT 2
- Document scanner HOT 4
- dynamsoft-capture-vision-react-native/js/DynamsoftCameraView.tsx typescript definition incompatible with RN 0.70.6 HOT 7
- iOS simulator stuck in SplashScreen - [email protected] HOT 6
- Camera permission on launch - ios HOT 1
- App frozen HOT 13
- Error with Severe hang after multiple barcode readers HOT 15
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from capture-vision-react-native-samples.