Accessing The Device Camera In A NativeScript Angular Application

More than a year ago when I started playing around with vanilla NativeScript I encountered the camera module. Previously I had even written a tutorial on using the camera in a vanilla NativeScript application. The NativeScript framework has come a long way and now includes Angular support so I figured it would be a good idea to see how to use the camera with this framework.

We’re going to see how to access the native device camera and take pictures within a NativeScript Android and iOS application built with Angular.

The application we build is going to be simple by design to put emphasis on the camera module. Our goal can be demonstrated in the below animated image:

When we press a button on the screen it will launch the camera. Depending on the version of iOS or Android, you may be asked for permission. Because I’m using emulators, the results are a little weird in comparison to what you’d see on the device.

Creating a New Camera Project with the NativeScript CLI

We’re going to create a fresh project in an effort to keep this application simple and easy to understand. From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following:

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

In the above list of commands, the --ng tag indicates we are going to be creating an Angular with TypeScript project. It is important to note that if you’re not using a Mac with Xcode installed you cannot build for iOS.

The great thing about NativeScript is that it can access native device APIs without the need to use a plugin. Hence we are ready to start development.

Adding the TypeScript Logic and XML UI

We are creating a single page application for simplicity. Starting with the TypeScript logic, open the project’s app/app.component.ts file and include the following code:

import { Component } from "@angular/core";
import * as Camera from "camera";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public picture: any;

    public constructor() {
        this.picture = "https://placehold.it/200x200";
    }

    public takePicture() {
        Camera.takePicture().then(picture => {
            this.picture = picture;
        });
    }

}

In the above TypeScript we are importing the camera module, but before we use it we are defining a public variable to hold our pictures. This variable will be initialized to a placeholder image so we don’t end up with emptiness.

Within the takePicture method we launch the camera and after the picture was taken, it is set to our public variable which is bound to the UI.

Moving onto our application UI, open the project’s app/app.component.html file and include the following XML markup:

<ActionBar title="{N} Camera Example"></ActionBar>
<StackLayout horizontalAlignment="center" verticalAlignment="center">
    <Image [src]="picture" width="200" height="200"></Image>
    <Button text="Capture" (tap)="takePicture()" class="btn btn-primary"></Button>
</StackLayout>

In the above XML we have a image bound to our public TypeScript variable. When the button is pressed, the takePicture method is called and when finished, the image is updated to whatever was chosen.

Including Camera Permissions for iOS App Store Approval

We’re not in the clear yet. Later versions of iOS have a strict requirement that must exist in the iOS info.plist file. Failing to add this requirement will result in your application being declined from the App Store.

Open the project’s app/App_Resources/iOS/Info.plist file and include the following keys:

<key>NSPhotoLibraryUsageDescription</key>
<string>Used to find saved pictures</string>
<key>NSCameraUsageDescription</key>
<string>Used to take pictures</string>

The keys can be added via Xcode if you prefer, but it will prevent errors such as:

The app’s Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.

You need both the NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys for this to work.

Conclusion

You just saw how to use the camera module within a NativeScript iOS and Android application built with Angular. Previously we saw how to use the camera in a vanilla NativeScript application, but this time we’re doing it with a very popular framework. There are a lot of great things you can do with the device camera, just remember to configure the permissions and iOS related requirements.

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.