How to build a custom QR Code system similar to Snapchat's Snapcode

ionic-v1
1

I am looking to implement a custom QR system for my social application. I have looked into a normal QR Code generator and Barcode Scanner. However I am looking at developing a custom designed QR Code. An example of this kind of implementation is the SnapCode by Snapchat, or Facebook Messenger’s new feature to share your messenger profile. Scannable Profile Codes.

Here are existing implementations:
Barcode Scanner: https://github.com/wildabeast/BarcodeScanner/
QR Code Creator: http://stackoverflow.com/questions/30789900/ionic-cordova-qrcode-generate-example
But this is the generic square QR code style.

I have some preliminary QR designs in place, which would be the basis of the code, our QR code would look more like that of FB. See image below:

image

From my research I know that the following is the step:

  • The profile code will be each users Unique ID (6 to 8 digits)
  • Each image will have 4 “dots” that are fixed for all codes
  • The code generator will “create” an image that fits the logic and rules for the code scanner
  • The scanner just needs to be able to detect that specific format, using the dots for better detection

Any help on this matter would be greatly appreciated. Thanks

1 Like
2

Hey did you find out anything on how to do this. I am just starting myself.

3

guys if you are trying to create color or fancy QR code and You are using angular or ionic,
the solution is here.

  1. add the plugin EasyQRCodeJS.
  2. add in HTML

“<div #qrcode>”

  1. add in ts file
    options = {
    text: ‘https://www.tersesoft.com/contact-us’,
    colorDark: ‘#010600’,
    dotScale: ‘0.3’,
    backgroundImageAlpha: ‘0.3’,
    // autoColor: ‘true’,

    // logo: ‘…/…/assets/logo2.png’,
    logoBackgroundColor: ‘#010600’,
    backgroundImage: ‘…/…/assets/terseLogo12.png’,
    // PI: ‘#d7beea’,
    PO: ‘#0320F7’,
    timing_H: ‘#6274FB’,
    timing_V: ‘#6274FB’,
    AO: ‘#0320F7’,
    };
    @ViewChild(‘qrcode’, { static: false }) qrcode: ElementRef;

ngAfterViewInit() {

// Options

// Create new QRCode Object
// tslint:disable-next-line:no-unused-expression
new QRCode(this.qrcode.nativeElement, this.options);

}

1 Like