NativeScript & Camera Tutorial

In this post we will give you information about NativeScript & Camera Tutorial. Hear we will give you detail about NativeScript & Camera TutorialAnd how to use it also give you demo for it if it is necessary.

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 iostns 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" >    <Page.actionBar>        <ActionBar title="My App" icon="" >        </ActionBar>    </Page.actionBar>    <ScrollView>        <StackLayout >            <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.

Hope this code and post will helped you for implement NativeScript & Camera Tutorial. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github