How to avoid cordova-plugin-measure over iPhone notch area

Questions
1

I use cordova-plugin-measure for measure distance against AR camera. When I trigger the plugin, it will show full screen real time camera image on whole screen (even on iPhone notch area). Unfortunately, there are 2 buttons (stop & close) located at top of screen where inside the iPhone notch area. Thus, those button cannot be pressed on that area. How can I avoid the camera full screen not to reach of boundary of notch area?

P.S.: I have studied the feauture “safe area” but the example is too simple that just ‘tag’ it at the class and not effective. I still cannot understand whether the “safe area” is just taken place at fw7 html or also cordova plugin?

Thanks in advanced!

Notch
Notch768×1024 101 KB

2

Can Framework7 be fixed it? Or ask for help to Cordova?

3

I studied the case for weeks. I have applied the cordova plugin statusbar and also safearea of framework7. The camera screen can be restricted on screen under notch. However, the button “Close” is truncated (shown as below screenshot). Can any expert help me?

measure_error
measure_error1494×2656 176 KB

4

If you have Xcode it should be easy enough to alter the layout within the plugin’s source code.

5

Thank for your replied.

I just know on javascript + html from Framework7 and cordova. I don’t know how to handle plugin on Xcode. Do I need to know any Swift?