Camera

@nativescript/camera #

Contents #

• Intro
• Installation
• Use @nativescript/camera
  • Request for user permissions
  • Check if the device has a camera
  • Take a picture
  • Take memory efficient picture
  • Saving a picture to the file system
• API
  • Functions
  • CameraOptions interface

Intro #

A plugin that allows you to take a picture and optionally save it on the device storage.

Installation #

To install the plugin, run the following command in the root directory of your project:

npm install @nativescript/camera --save

Use @nativescript/camera #

Request for user permissions #

Both Android and iOS require explicit permissions for the application to have access to the camera and save photos on the device.

To ask a user for permission to access their camera and the photo gallery, follow these steps:

1. Specify to the system the permissions your app from the user

On Android, you specify the permissions in App_Resources/Android/src/main/AndroidManifest.xml. However, this plugin specifies the required permissions for you.

On iOS, App Store Guideline 5.1.1 requires apps to clarify the usage of the camera and photo library. To add the clarifications, modify app/App_Resources/iOS/Info.plist and add them as the values of the NSCameraUsageDescription and NSPhotoLibraryUsageDescription keys, respectively.

<key>NSCameraUsageDescription</key>
<string>enter your camera permission request text here</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>enter your photo library permission request text here</string>

2. Prompt the user for permissions

To prompt the user to grant or deny your app access to their camera and photo gallery, call the requestPermissions() method.

import { requestPermissions } from '@nativescript/camera';

requestPermissions().then(
    function success() {
        // permission request accepted or already granted
        // ... call camera.takePicture here ...
    },
    function failure() {
        // permission request rejected
        // ... tell the user ...
    }
);

Check if the device camera is available #

Before calling the takePicture method to take a picture, call the isAvailable() method to check if the device has an available camera.

const isAvailable = camera.isAvailable()

Checking if the device has a camera #

Before you take a picture, you should check if the device has an available camera. To do so, call the isAvailable() method. This method will return true if the camera hardware is ready to use or false otherwise.

This method returns true if the camera hardware is ready to use or false otherwise.

Take a picture #

To take a picture, call the module's takePicture() method.

// JavaScript
const camera = require("@nativescript/camera");
const { Image } = require("@nativescript/core");

camera.takePicture()
    .then(function (imageAsset) {
        console.log("Result is an image asset instance");
        var image = new Image();
        image.src = imageAsset;
    }).catch(function (err) {

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

// TypeScript
import * as camera from "@nativescript/camera";
import { Image } from "@nativescript/core";

camera.takePicture()
    .then((imageAsset) => {
        console.log("Result is an image asset instance");
        var image = new Image();
        image.src = imageAsset;
    }).catch((err) => {
        console.log("Error -> " + err.message);
    });

Take memory efficient picture #

By default, the camera.takePicture() method takes a huge image (even mid-level devices with a 5MP camera produce a 2580x2048 image, which in bitmap means approximately 15MB). So sometimes taking such a big picture is just a waste of memory. The camera.takePicture() method accepts an optional CameraOptions parameter that allows you to adjust the size and other aspects of the picture.

// TypeScript
import { Image } from "@nativescript/core";

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

camera.takePicture(options)
    .then((imageAsset) => {
        console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
        console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
        console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
    }).catch((err) => {
        console.log("Error -> " + err.message);
    });

Saving a picture to the file system #

To save a picture with the width & height that you have defined, use the imageAsset and save it to the file system as follows:

import { ImageSource, knownFolders, path } from '@nativescript/core';

ImageSource.fromAsset(imageAsset)
        .then((imageSource: ImageSource) => {
        const folderPath: string = knownFolders.documents().path;
        const fileName: string = "test.jpg";
        const filePath: string = path.join(folderPath, fileName);
        const saved: boolean = imageSource.saveToFile(filePath, "jpg");

        if (saved) {
            console.log("Gallery: " + this._dataItem.picture_url);
            console.log("Saved: " + filePath);
            console.log("Image saved successfully!");
        }
    });

This could be used to create thumbnails for quick display within your application.

API #

Functions #

CameraOptions interface #