App to scan QR code and take you to specific page in website

[bruno_salter_mas]

Hello everybody. I have searched before and havent seen anything regarding the error i get.
I created a site that enables to scan QR codes and take you to a specific page in the site. More specifically, its a project we developed in Peru that is about mural paintings made with help of the community. Beside the mural paintings in the wall there is a QR code that points to specific page in the website so you can get all the info about it.
Here: https://calzart.com/
In the site I use InstascanJS library to do so, and it works alright, not perfect thou. Ofcourse, the JS code in the website asks for permission to use camera for the purpose of scanning.

Later i created this app here with the ability to scan and show the website in a webviewer.
The QR scanner in APP works fine and it takes you to the URL.

So. If I enable JS in webview I get this error. I understand since there are two scripts asking for access to camera. (APP and website)

Error: Cannot access video stream (NotAllowedError) and sometimes (NotFoundError)

If I disable JS in webviewer the webpage doesnt load, and it stays in loader screen of the webpage.

Any ideas on how I can disable the InstascanJS thing in Kodular?, I still need that wen page is accessed from browser. Thanks to Kodular I will be able to have an APP but for iPhone users the website will be the only means.

Ofcourse I can disable the scanning in the app and use the embeded website scanner but well. I’m trying…

Thank you.

[Vlad]

Hello,

With firefox is directly showing the error. You should fix the script and compatibility in the website first.

(same with Chrome )

You can use WebViewString to check that your app is loading your site or not. If is your APP, than not load scripts or whatever content you need.

In website put this:

try {
         window.Kodular.setWebViewString("CheckMe");
        }
        catch (e) {
            console.log("No Response, load ScanScripts");
}

And in the app you can read the WebString and communicate with the site if necessary.
Or with other methods. You can also set Cookie by the APP and website will know that is YOUR app accessing it. And so on …

Note that “QR Scan scripts” for websites are not working on all browsers and requires user intervention to accept/activate the plugin.

[bruno_salter_mas]

Thanks Vlad. But I wonder why is working with me, on Brave, Chrome, Firefox and Opera. If I block camera and clean cookies and cache, they again ask for permission to use camera.
Cannot have two browsers open with site since camera can only be used by one.

.
As you can see. Camera is active
And where should I include that code?

[bruno_salter_mas]

And this is Chrome

By the way, to see the scan button on top you have to reduce browser width cause only visible on tablets and smartphones.

[themaayur (Mayur Berad)]

Try by using custom webview extension.

CustomWebView : An extended form of Web Viewer

1.Introduction Extension Name: CustomWebView It is an extended version of web viewer with more customization and flexibility.Its customization and additional features make it different from Web Viewer although it uses same Web View class. Latest Version: 8 Released: 2020-05-12T18:30:00Z (UTC) Last Updated: 2020-07-23T18:30:00Z (UTC) Requires: Android 5+ 2.Features More customization options than normal web viewer Long Click event New window request event Close window request event Load lo…

[Vlad]

I get the ERROR, because i have no camera attached to the device. So anyone with NO camera will get error visible. It will be nice, to hide this “error” notification.

I am also using WP, so i had included necessary scripts in of the template. For me, i use plugin which loads custom template, different from the main site. So i had put my code there.
In your case maybe in your master template. tag.
And put errors in Console Log. So will be good to modify (if you know how ) the JS scan script.

As suggested by @themaayur ,you can use CustomWebView and do many tricks or scenarios.

So at all - it will be good that your camera is activated by button on the site, so you will be able to enable/disable the button and script. If you dont want the button on visible part, add some SIDE menu ? and place it there.

With WebViewString you can easy determine from where your site is loaded and put some logic in statement. And load the JS QR Scan or not.

[bruno_salter_mas]

Ok, I changed to custom web view and it starts to work. In it’s docs I saw you have to Create and then Set web view but only works when I create in container "vertical arrangement but it doesnt let me scroll or click and navigate,

when i set in container “webviewer” it doesnt work. it gives me this error, “android.webkit.WebView cannot be cast to android.widget.FrameLayout”

This is my block layout.

Any help is appreciated. Bruno

After a while breaking my brains and trying I figure out that the right approach is to use webviewer, I understand what it means, is a container where to view a web. arrangement is a totally different story, as its name says is to arrange stuff. Well, I’m getting closer… Don’t say I dont try…

[themaayur (Mayur Berad)]

Use a VA instead of webview as container.
@vknow360 have a look here.

[bruno_salter_mas]

Vertical arrangement doesnt allow me to scroll nor click in the content it is showing (webpage)

[themaayur (Mayur Berad)]

As you can in these guide’s I have used VA/HA and had no issue. There must be something in the webpage.

Webview with Swipe refresh | Guide

So Welcome, Everyone today in this simple guide I will show how to make swipe refreshable webview using @vknow360 'sCustom Webview Extension So Let’s Begin • Components 1. Swipe Refresh Layout [image] Disable it in properties. 2. VA or HA As a Container for Custom Webview. 3. Custom Webview Extension. • Blocks 1. First you need to create webview using these blocks [image] If you want to create Multiple ( Unlimited ) Tabs Dynamically use this Guide 2. And the Main Part is here. [image] By…

Create Multiple (Unlimited) Webview/Tabs Dynamically | Guide

This is my Second Guide, Hope It will help you. Create/Remove/Switch Webview Follow the below steps to create/Tabs Webviews Dynamically 1. Components [image] [image] [image] [image] 2. Blocks Variables [image] Id- For Assigning a Unique Id for Each webview Url- Url’s for Webview. *You can add textbox to enter Desired Url Procedure [image] This Procedure will be used to switch the visibility of Webviews. Create Webview/Tabs [image] Webview will br…

[bruno_salter_mas]

My website works perfectly with normal webviewer, because it gave me issues with my site’s JS I followed counselling and started using Custom WV.
Cannot click links and menus in website with CWV…

[themaayur (Mayur Berad)]

It’s strange, can you share a test apk.

[bruno_salter_mas]

Sure. It accesses website by QR scanner, scan anything or the QR i send (my website)
Scan_3_customwebview.apk (6.8 MB)
Scan_3_customwebview.aia (471.6 KB)

[vknow360 (Sunny Gupta)]

Have you used VA as container is above apk?

[bruno_salter_mas]

VA doesnt let me click on anything; menus, links in the page I call in it. Everything is activated in Custom WV. Yes I use VA in the apk that I sent you.

[Vlad]

This works in emulator via companion:

1. INIT the webview components once. You don’t need to do that all the time.
2. I put some stuff in procedure block. It is easy to manage and call them.

Result in emulator:
and i can click everywhere

Modified AIA (yours, which you post here)
Scan_3_customwebview_new.aia (471.8 KB)

At the designer i add one more Vertical Arrangement :

So at Vertical_Bin placed all your items. In it, at last I placed WebViewBin,
Which takes whole free space ( WIDTH/HEIGHT : FILL PARENT )
WebViewBin is HIDDEN by default, and VIEWED when something is scanned.

Try it.

p.s. After the post i compiled the app, and tested with your QR code. It hangs. So something in the website should be fixed too. If you load the main site, all is fine. DEBUG the site. Note that Webview is not like normal browser ! Have some limitations and not all works well in it.
And dont forget to disable that “QR Scan js script” .

[bruno_salter_mas]

Well well, I’m really short of words to what u have done. Spending so much time (it would be for me for sure!!!) helping me Vladi.
I have always been very supported in this community since I met the Kodular project in february this year.

Everything amazing; The project, the people, support… real glory.
So it is a community of Koders helping out a community of Street Painters. Great!!

I will try later…

Thanks Vladi!!