NativeScript & Camera Tutorial

In this tutorial section we'll be covering how to use the device camera with NativeScript using JavaScript. We'll see how to create a demo NativeScript project and then how to access the phone camera to take some pictures in Android and iOS mobile apps and save them to phone gallery.

Create NativeScript project

Lets get started by creating a new NativeScript project using Telerik NativeScript CLI so open your terminal on Linux/MAC or command prompt on Windows then run :

tns create CameraDemo 

Next navigate to your project root folder then add your target(s) platform(s) , either Android ,iOS or Both of them :

tns platform add ios
tns platform add android

Add Camera plugin for accessing device Camera

At the root folder of your project run the following command to install the NativeScript Camera plugin :

tns plugin add nativescript-camera

Requesting permissions

For newer Android and iOS APIs make sure you explicitly request permissions to use the user's camera using

camera.requestPermissions();

Creating the user interface

Lets create a simple user interface with a button ,when clicked ,launchs the user camera to take pictures :

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">

    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">

        </ActionBar>
    </Page.actionBar>
    <ScrollView>
        <StackLayout class="p-20">

            <Button text="Take Picture" tap=""></Button>

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

Now on your view model .

Start by importing the required modules

var Observable = require("data/observable").Observable;
var camera = require("nativescript-camera");
var imageModule = require("ui/image");

Then create a view model and export it

function createViewModel() {
    var viewModel = new Observable();

    viewModel.picture = "https://placehold.it/300x300";

    var options = { width: 300, 
                    height: 300, 
                    keepAspectRatio: false, 
                    saveToGallery: true };


    viewModel.takePicture = function() {

        if(!camera.isAvailable()){
            console.log("Camera is not available on this device")
        }
        else
        {
            camera.takePicture(options)   
                .then(function (imageAsset) {

                    viewModel.set('picture', imageAsset);

                }).catch(function (err) {
                    console.log("Error -> " + err.message);
            });
        }     

    }

    return viewModel;
}

exports.createViewModel = createViewModel;

Conclusion


We have seen how to use the Camera plugin for NativeScript to access user's camera in order to take pictures on Android and iOS mobile devices and save them to Phone device gallery.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status