Lansa Mobile/Web Barcode Scanner

[Balaji]

Hello ,

1.Its possible to use Barcode Scanner (xDemoLANSAMobileBarcodeScanner Example is present but will run only in lansa mobile app)to run on android phone without installation of Lansa mobile app.

2.Can we access Desktop/Laptop camera access from WEB(xDemoLANSAMobileCamera example) or in mobile without Lansa mobile app.

Regards,
Balaji

[Dino]

Balaji,

LANSA Mobile is what gives to the LANSA Web Pages the possibility of access your device's features such as the camera and barcode scanners. Those widgets basically ask LANSA Mobile to do something, like take a picture, get a barcode, and return the information to the LANSA Web Page.

Now, if you have another way to bring access to the camera or capture barcodes in a mobile device, you can create a widget that uses that resource, then use that widget in your Web Page.

[Dino]

Ill come back to this later, but using this page:
https://www.kirupa.com/html5/accessing_ ... _html5.htm

I was able to create a widget that activates the webcam, just a simple widget, but still working in detailsv(not showing the image right now), the force is not strong in me regarding widgets...

so maybe as an starting point this is a widget I called HtmlWebCam that have only one method, showVideo (notice that page I indicated at the beginning also calls to add an stopVideo):

Code: Select all

function( PROTOTYPE, WIDGET )
{
  PROTOTYPE.onCreateInstance = function()
  {
    this.Caption = 'Shows Video from WebCam';
  }

  PROTOTYPE.onRealizeControl = function( parentDiv )
  {

    //<div id="container">
    //	<video autoplay="true" id="videoElement">
    //	
    //	</video>
    //</div>
    parentDiv.appendChild( document.createElement('video') );
    parentDiv.setAttribute('autoplay', true);
    parentDiv.setAttribute('id', 'videoElement');

    //#videoElement {
    //	width: 500px;
    //	height: 375px;
    //	background-color: #666;
    //}
    parentDiv.style.width = '500px';
    parentDiv.style.height = '375px';
    parentDiv.style.backgroundColor = '#666';

  }

  PROTOTYPE.showVideo = function()
  {
    // Implementation...
    var video = document.querySelector("#videoElement");

    if (navigator.mediaDevices.getUserMedia) {
      navigator.mediaDevices.getUserMedia({ video: true })
        .then(function (stream) {
          video.srcObject = stream;
        })
        .catch(function (err0r) {
          console.log("Something went wrong!");
        });
    }
    return false;
  }
  // Done
  return WIDGET.Completed;
}

widget1.jpg (65.44 KiB) Viewed 32412 times

You can use this widget for example in a web page:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#HTMLWebCam) Name(#HTMLWebCam) Displayposition(1) Height(321) Left(64) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(64) Width(569)

Evtroutine Handling(#Com_owner.Initialize)
#HTMLWebCam.showVideo
Endroutine

End_Com

[jimwatterson]

Good work Dino. Widgets are a bit of a dark art to me.

I'd like to take this opportunity to say that this whole topic illustrates, EXACTLY, what PWAs are supposed to provide. If you've watched any of LANSA's continuous stream of webcasts on the topic they constantly hammer this point, except that nothing is ever delivered or even promised.

Look at this website.

https://whatpwacando.today/

LANSA should be implementing this functionality and getting it into the product. Its no use boasting about your low code prowess and then expecting all your users to create their own widgets for the simplest things.

[Dino]

Outside of marketing, future product enhancements, product directions, pwa and things like that, I see widgets as a way to add functionality to the product and keep it isolated in a black box, a bit like the "builtins", they are things that I need at a given point of time. Eventually, if enough users show interest or the market show the direction, we may get a new control, a new widget or something as an enhancement and to replace one for another should be simpler. I have seen people using widgets for different kind of captchas, face "rekognition", javascript particular transformations, most times one time trick.

Notice that in my example of widget, there are several restrictions to use that facility, compatibility, etc. Not sure if at the end of that light is a way to capture a barcode. To capture barcodes I have seen alternative specific devices that are way faster and optimized that the normal cellphone camera and they can return the barcode straight to an input field making it easier to get more barcodes per minute with less mistakes. all depend on your intention with the barcode.

for causal use, most times cellphone cameras can capture a QRcode and open the website with the URL indicated, no need to program anything today. That URL could be a LANSA web page (or a tiny web address pointing to a LANSA url)

[jimwatterson]

Widgets provide a facility to fill in the gaps in production functionality which is great for niche requirements but for core functionality LANSA needs to deliver the tools users needs, especially if you are marketing yourself as a modern low-code tool maker. VLWEB is the most important advance in LANSA technology for many, many years and I find it incredibly frustrating that development has stalled just when something great has started to emerge.

[Balaji]

Hello Dino,

Thank you for the reply.

Its possible to use .Net Component to access mobile Camera/Barcode scanner and after that the .net component can be use in Lansa web to access the camera.

If yes then can you provide me an example it will be very helpful to me.

Thanks in advance.

[Dino]

I know you can enroll .net components in the repository, they were typically .dll, but no idea if other kind of .net components are now available that could be suitable for a web application or a pwa application or if they can be used outside of the windows realm.

[jimwatterson]

I don't think ActiveX or COM objects will help. I believe that MS Internet Explorer is the only browser that still fully supports, IE not Edge! If any other browser could be coerced into supporting them, it would take a deep dive into settings and agreeing to take risks multiple times.

[jimwatterson]

Just and update I was able to use wrap a widget around a java script library called Quagga.js

https://serratus.github.io/quaggaJS/

This requests access to the camera and displays the video stream in a window. It can be configured to recognize a range of barcodes and an event can be detected and fired off to the VLWEB application. I have successfully tested this i windows, android and iOS. I have also configured my VLWEB app as a PWA and this also worked fine.

Quagga is open source and doesn't support QR codes but there are others that do. If you are willing to pay a subscription then scandit.js is more feature rich.