Using The Device Camera In Your NativeScript Mobile App

I’ve been doing a lot of NativeScript development lately because I’ve found it to be a pretty nifty platform. If you’re unfamiliar with NativeScript, it is similar to Ionic Framework and React Native in a sense that you can use JavaScript to build iOS and Android mobile applications. I previously wrote about using the native device camera in Ionic Framework as well as using the native device camera in React Native. This time I figured it would be appropriate to do the same, but with Telerik NativeScript.

In this guide we’re going to see what it takes to take pictures with the native device camera using NativeScript and display the pictures on the screen.

Let me start by saying that this guide works best with a device rather than a simulator. As of now (Xcode 7), you cannot simulate a device camera in iOS and you have limited camera support for the Android simulator.

With that said, from your Terminal (Mac and Linux) or Command Prompt (Windows), execute the following to create a new NativeScript project:

tns create CameraProject
cd CameraProject
tns platform add android
tns platform add ios

It is important to note that if you are not using a Mac, you cannot add and build for the iOS platform.

Now this application we’re making is going to be very simple in functionality. We’re going to display a placeholder image on the screen with a button. When we press the button, it will launch the camera and allow us to take a picture. When we take the picture, the placeholder image will be replaced with the picture we took. Everything that comes after is up to your imagination.

Crack open your project’s app/main-page.xml and include the following UX code:

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
    <StackLayout>
        <Label text="Take a picture" class="title" />
        <Image id="myImage" />
        <Button text="Take" tap="tapAction" />
    </StackLayout>
</Page>

We’re using a simple StackLayout with a Label, Image, and Button element. Take note of the id that we gave to the Image element and the tap event we gave to the button. We’re going to use both of those in our JavaScript file.

Now open your project’s app/main-page.js file and include the following code:

var cameraModule = require("camera");

var myImage;

exports.pageLoaded = function(args) {
    var page = args.object;
    myImage = page.getViewById("myImage");
    myImage.src = "https://placehold.it/150x150";
    page.bindingContext = {};
}

exports.tapAction = function() {
    cameraModule.takePicture().then(function(picture) {
        myImage.imageSource = picture;
    });
}

We are first including the camera module. This allows us to use the native device camera. We are creating a global variable called myImage which will hold the Image element from our XML. This variable is only global to the functions for this particular screen.

In the exports.pageLoaded function you see this:

exports.pageLoaded = function(args) {
    var page = args.object;
    myImage = page.getViewById("myImage");
    myImage.src = "https://placehold.it/150x150";
    page.bindingContext = {};
}

We are getting the Image element by the id we set and we are assigning a remote web image as the image source. This is our placeholder image. If you don’t use an https resource you will have to fiddle with Apples App Transport Security (ATS) in iOS 9.

Finally we have our exports.tapAction function as seen below:

exports.tapAction = function() {
    cameraModule.takePicture().then(function(picture) {
        myImage.imageSource = picture;
    });
}

The function launches the camera and the picture returned is set to our Image element, replacing the placeholder image that is there.

Conclusion

It was just as easy, if not easier to use the native device camera with NativeScript as it was with similar technologies like Ionic Framework or React Native. We saw how to take a picture in iOS and Android and display the picture in an Image element in the UI of our application.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.