NativeScript Advanced Camera

A highly customizable NativeScript camera plugin that can easily be embedded in a view.

NOTES:

• This plugin is still in development, so for now forget highly customizable. 🙂
• For feature requests and bugs, feel free to open a new issue.

Table of contents:

• Prerequisites
• Installation
• Usage
• Features
• Properties
  • Common Properties
  • iOS Specific Properties
• Methods
  • Common Methods
  • iOS Specific Properties

Prerequisites

• NativeScript 7+

Installation

$ tns plugin add nativescript-advanced-camera

Usage

Angular 11+

HTML Template: home.component.html

<AdvancedCamera height="300dp" width="300dp" backgroundColor="black" (loaded)="onLoaded($event)"></AdvancedCamera>

Component: home.component.ts

import {EventData, isIOS} from "@nativescript/core";
import {AdvancedCamera} from "nativescript-advanced-camera";

registerElement('AdvancedCamera', () => AdvancedCamera);

@Component({
    selector: "Home",
    templateUrl: "./home.component.html"
})
export class HomeComponent {
    private cam: AdvancedCamera;

    public onLoaded(event: EventData) {
        console.log('Cam Loaded');
        this.cam = <AdvancedCamera> event.object;
    }
    
    public record(): void {
        console.log('Start Recording');
        this.cam.record();
    }

    public stop(): void {
        console.log('Stop Recording');
        this.cam.stop().then((file) => {
            const path = isIOS ? file.path : file.getPath();
            console.log(path);
        });
    }
}

Features

Note: To add features to this list, feel free to open a new issue.

Feature	Android	iOS
Start & Stop Video Recording	✔️	✔️
Take Photos	❌	❌
Write Video / Photos to Library	✔️	✔️
Switch between Front / Back Camera	❌	❌

Properties

Common Properties

Property	Type	Description
writeFilesToPhoneLibrary	Boolean	Enable / Disable saving the files to phone library.

iOS Specific Properties

Property	Type	Description
shouldKeepViewAtOrientationChanges	Boolean	Enable / Disable keeping the view with the same bounds when the orientation changes.
shouldRespondToOrientationChanges	Boolean	Enable / Disable the video following device orientation.
writeFilesToPhoneLibrary	Boolean	Enable / Disable saving the files to phone library.

Methods

Common Methods

Method	Description
record()	Starts recording a video.
stop()	Stops the video recording and returns a Promise that gives the video file.

iOS Specific Methods

Method	Description
resetOrientation()	Reset and redraw the preview layer orientation.