Embedding in NativeScript-Vue

I’ve got Barcode Scanner working with NativeScript-Vue by calling scan() function, but I can’t figure out how to use the embed feature, it keeps returning Frame errors. This is what I’m doing:

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Home"/>
    <StackLayout>
      <Button class="btn btn-primary" @tap="onScan">Scan</Button>
      <BarcodeScanner
		class="scanner-round"
		formats="QR_CODE, EAN_13"
		beepOnScan="true"
		reportDuplicates="true"
		preferFrontCamera="false"
		@scanResult="onScan">
	</BarcodeScanner>
    </StackLayout>
  </Page>
</template>

<script>
const BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;

export default {
	components: {
		"BarcodeScanner": require("nativescript-barcodescanner").BarcodeScannerView
	},		
	data () {
		return {
			scanner: null
		};
	},		
	async created() {
		this.scanner = new BarcodeScanner();
	},
	methods: {
		onScan() {
			this.scanner.scan({
				formats: "QR_CODE, EAN_13",
				showFlipCameraButton: true,   
				preferFrontCamera: false,     
				showTorchButton: true,        
				beepOnScan: true,             
				torchOn: false,               
				resultDisplayDuration: 500,   
				openSettingsIfPermissionWasPreviouslyDenied: true //ios only 
			}).then((result) => {
				console.log({
					title: "You Scanned ",
					message: "Format: " + result.format + ",\nContent: " + result.text,
					okButtonText: "OK"
				});
			}, (errorMessage) => {
				console.log("Error when scanning " + errorMessage);
			});
		},
		scanResult(result) {
			console.log(`Format: ${ result.format }, Value: ${ result.text }`);
		}
	}
};
</script>

[JarriddW]

I Struggled with this for a while as well.

The problem I found was that people are trying to embed when this will not work at all with android. Instead you MUST use a method call if you want this to work with android(and iOS). Functionality remains the same.

I will say that the documentation confused me to where I gave up and had to come back at a later stage, then realizing how silly I was in all my frustration… I did however get it to work! (after reading through the documentation several times)

This is how(using NativeScript-Vue):

In your: _ app.js/main.js_ Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)

In your page.vue

(may contain some unnecessary code within elements and camera is imported because I am using this elsewhere in my app as well and have used its permission request in my solution)

<template>
    <Page class="page">

        <ActionBar class="action-bar">
                <label text="Test" />
        </ActionBar>

        <ScrollView>
            <StackLayout ~mainContent>
                <StackLayout class="home-panel">

                    <Button class="btn btn-outline" text="Scan QR code" @tap="scanQrCode"/>

                    <Label class="h4 text-center m-t-15" text="Scan Result Text: " />

                    <TextView class="h4 text-center" width="81%" editable="false" :text="scanText"/>

                </StackLayout>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import * as Camera from "nativescript-camera";

    const BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
    var barcodescanner = new BarcodeScanner();

    export default {

        data() {
            return {
                mainContentText: "",
                scanText: null
            };
        },

        methods: {

            scanQrCode() {

                Camera.requestCameraPermissions()
                    .then(() => {

                        barcodescanner.scan({
                            formats: "QR_CODE",
                            cancelLabel: "Close",
                            cancelLabelBackgroundColor: "#FFFFFF",
                            message: "Use the volume buttons for extra light",
                            showFlipCameraButton: false,
                            preferFrontCamera: false,
                            showTorchButton: true,
                            beepOnScan: true,
                            torchOn: false,
                            closeCallback: function () { console.log("Scanner closed"); },
                            resultDisplayDuration: 500,
                            orientation: "portrait",
                            openSettingsIfPermissionWasPreviouslyDenied: true
                        }).then((result) => {
                            console.log("Scan format : " + result.format);
                            console.log("Scan text :   " + result.text);

                            this.scanText = result.text;
                        },
                            (error) => {
                                console.log("No scan: " + error);
                            }
                        );

                    }).catch(e => { console.log('Error requesting permission'); });
            },
        },
    };
</script>

The above code is what allowed me to eventually get the barcode scanner working in my own NS-Vue app.

My mistake was including the embedding Code from the docs as seen below:

(Do NOT include this)

<BarcodeScanner
    row="1"
    height="300"
    formats="QR_CODE, EAN_13, UPC_A"
    beepOnScan="true"
    reportDuplicates="true"
    preferFrontCamera="false"
    @scanResult="onScanResult"
    v-if="isIOS">
</BarcodeScanner>

I hope this helps someone get the nativescript-barcodescanner working on their NS-Vue app!

[mdiaz00147]

I Struggled with this for a while as well.

The problem I found was that people are trying to embed when this will not work at all with android. Instead you MUST use a method call if you want this to work with android(and iOS). Functionality remains the same.

I will say that the documentation confused me to where I gave up and had to come back at a later stage, then realizing how silly I was in all my frustration… I did however get it to work! (after reading through the documentation several times)

This is how(using NativeScript-Vue):

In your: _ app.js/main.js_ Vue.registerElement('BarcodeScanner', () => require('nativescript-barcodescanner').BarcodeScannerView)

In your page.vue

(may contain some unnecessary code within elements and camera is imported because I am using this elsewhere in my app as well and have used its permission request in my solution)

<template>
    <Page class="page">

        <ActionBar class="action-bar">
                <label text="Test" />
        </ActionBar>

        <ScrollView>
            <StackLayout ~mainContent>
                <StackLayout class="home-panel">

                    <Button class="btn btn-outline" text="Scan QR code" @tap="scanQrCode"/>

                    <Label class="h4 text-center m-t-15" text="Scan Result Text: " />

                    <TextView class="h4 text-center" width="81%" editable="false" :text="scanText"/>

                </StackLayout>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import * as Camera from "nativescript-camera";

    const BarcodeScanner = require("nativescript-barcodescanner").BarcodeScanner;
    var barcodescanner = new BarcodeScanner();

    export default {

        data() {
            return {
                mainContentText: "",
                scanText: null
            };
        },

        methods: {

            scanQrCode() {

                Camera.requestCameraPermissions()
                    .then(() => {

                        barcodescanner.scan({
                            formats: "QR_CODE",
                            cancelLabel: "Close",
                            cancelLabelBackgroundColor: "#FFFFFF",
                            message: "Use the volume buttons for extra light",
                            showFlipCameraButton: false,
                            preferFrontCamera: false,
                            showTorchButton: true,
                            beepOnScan: true,
                            torchOn: false,
                            closeCallback: function () { console.log("Scanner closed"); },
                            resultDisplayDuration: 500,
                            orientation: "portrait",
                            openSettingsIfPermissionWasPreviouslyDenied: true
                        }).then((result) => {
                            console.log("Scan format : " + result.format);
                            console.log("Scan text :   " + result.text);

                            this.scanText = result.text;
                        },
                            (error) => {
                                console.log("No scan: " + error);
                            }
                        );

                    }).catch(e => { console.log('Error requesting permission'); });
            },
        },
    };
</script>

The above code is what allowed me to eventually get the barcode scanner working in my own NS-Vue app.

My mistake was including the embedding Code from the docs as seen below:

(Do NOT include this)

<BarcodeScanner
    row="1"
    height="300"
    formats="QR_CODE, EAN_13, UPC_A"
    beepOnScan="true"
    reportDuplicates="true"
    preferFrontCamera="false"
    @scanResult="onScanResult"
    v-if="isIOS">
</BarcodeScanner>

I hope this helps someone get the nativescript-barcodescanner working on their NS-Vue app!

Definitively it works. The only thing is that it won’t work on the playground app, you must run it in a real device, since nativescript preview app does not ships with all the required plugins.