Nativescript-camera is not working in ios device


#1

takePicture function does not return anything in ios (version 9.3.5)

Code snippet:

public takePicture() {
takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: true }).
then((imageAsset) => {
console.log(‘in take photo’);
imageAsset.getImageAsync((image) => {
this.imagesArray.push({imgsource:image});
})
},
(err) => {
console.log("Error -> " + err.message);
});

}

trried adding requestPermission but it throws error [CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating ‘Object(nativescript_camera__WEBPACK_IMPORTED_MODULE_1__[“requestPermissions”])().then’)]

package.json:
“dependencies”: {
@angular/animations”: “~6.0.0”,
@angular/common”: “~6.0.0”,
@angular/compiler”: “~6.0.0”,
@angular/core”: “~6.0.0”,
@angular/forms”: “~6.0.0”,
@angular/http”: “~6.0.0”,
@angular/platform-browser”: “~6.0.0”,
@angular/platform-browser-dynamic”: “~6.0.0”,
@angular/router”: “~6.0.0”,
“nativescript-angular”: “~6.0.0”,
“nativescript-camera”: “0.0.8”,
“nativescript-na-camera”: “^1.2.0”,
“nativescript-theme-core”: “~1.0.4”,
“reflect-metadata”: “~0.1.8”,
“rxjs”: “~6.1.0”,
“tns-core-modules”: “~4.1.0”,
“zone.js”: “^0.8.26”
},


#2

using console.log inside /node_modules/nativescript-camera/nativescript-camera.ios.js…

I can check that it is entering requestCamerePermissions function with camerastatus (3) and permitting the acess…
Infact i tried doing console in takePicture method as well but i did not get any cache.

Is there any issue with UIImagePicker Library??


#3

Does it work for you in non webpack build?


#4

yes in non webpack build…even after adding request permission its not throwing any error…

but its camera is not opening


#5

Camera may not open if you don’t have a page router outlet in your app.

Please share the exact possible code you have in your component.


#6

app.component.html

<page-router-outlet></page-router-outlet> 
<!-- <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>```

#7

package.json

"dependencies": {
    "@angular/animations": "~6.0.0",
    "@angular/common": "~6.0.0",
    "@angular/compiler": "~6.0.0",
    "@angular/core": "~6.0.0",
    "@angular/forms": "~6.0.0",
    "@angular/http": "~6.0.0",
    "@angular/platform-browser": "~6.0.0",
    "@angular/platform-browser-dynamic": "~6.0.0",
    "@angular/router": "~6.0.0",
    "@nstudio/nativescript-camera-plus": "^1.0.6",
    "nativescript-angular": "~6.0.0",
    "nativescript-camera": "^4.0.2",
    "nativescript-fancyalert": "^1.2.0",
    "nativescript-imagepicker": "^6.0.3",
    "nativescript-theme-core": "~1.0.4",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~6.1.0",
    "tns-core-modules": "~4.1.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "babel-traverse": "^6.26.0",
    "babel-types": "^6.26.0",
    "babylon": "6.4.5",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.7.0",
    "typescript": "~2.7.2"
  }```

#8

app.component.ts

import { Component } from "@angular/core";
 var imagepickerModule = require("nativescript-imagepicker");
import {takePicture , requestPermissions} from "nativescript-camera";
var fs = require('file-system');
import {Page} from "ui/page";
import {Image} from "ui/image";
import {ObservableArray} from "data/observable-array";
import { ImageSource, fromNativeSource } from "image-source";
import {ListView} from "ui/list-view";
@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent { 
public imagesArray:ObservableArray<any>;
public counter = 0;
public uploadTask;
constructor(private page:Page){
    this.imagesArray=new ObservableArray();
}
 takePhoto() {
     var that =this;
      requestPermissions().then(
        (resolve) => {
            console.log('permission given');
    takePicture({
        width: 300,
        height: 300,
        keepAspectRatio: true,
        saveToGallery: true
    }).
        then((imageAsset) => {
                imageAsset.getImageAsync((image) => {
                this.imagesArray.push({imgsource:image});
            })             
        }).catch((err) => {
            console.log("Error -> " + err.message);
        });
    },
    (reject) => alert('pesrmission rejected')
);
}
}


#9

I doubt you can have page-router-outlet and a StackLayout in your app component - the router may be replaced with your layout.


#10

replaced with (AbsoluteLayout)…but no change


#11

app.routing.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";


import { DashboardComponent } from "~/pages/dashboard/dashboard.component";
import { AppComponent } from "~/app.component";

const routes: Routes = [
    { path: "", redirectTo: "/dashboard", pathMatch: "full" },
    { path: "dashboard", component: AppComponent},
    {
        path:'login',
        loadChildren:'~/pages/login/login.module#LoginModule'
    }
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }```

#12

do you want me to clean build and try again ? or it should reflect by recompiling itself


#13

Let me rephrase my statement, you can’t have 2 components at your root level. You can have only one, either router outlet or any other component / layout.


#14

thank you so much…it finally worked


#15

just one more thing…i want to customise it like(the requirement is to display a count down of 3s and then click image as well as the image shall be in circular with some background)…is it possible using nativescript-camera plugin or some other plugin should be used

Pls suggest


#16

I don’t think you can customize camera view with nativescript camera plugin, you may try this one.


#17

ok let me try wit that


#18

Hi,
takePicture is now working for nativescript-camera-plus


#19

its working now…