Take picture function gets hang in ios


#1

System Version: MacOS Sierra 10.12.6 Xcode 8.3

Plugin Used : nativescript-camera

device used to install app: iPad (version 9.3.5)

Snapshot of code: capture picture function def

public takePicture() {
Camera.requestPermissions();
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);
});
}
Tried ways to resolve : Added NSPhotoLibraryUsageDescription and NSCameraUsageDescription keys inside .plist file

No error is thrown but camera doesnot opens up.

Though it is working absolutely fine in android
Please suggest


#2

requestPermissions() returns a promise, you are not supposed to immediately call takePicture(). Wait for the promise callback, then take picture.

You may refer the example in the plugin repo.


#3

thanks for the suggestion.

I have tried to incorporate the following changes but what i can see is the changes does not get reflected to js file even after running [tns build ios]…due to which in runtime i don’t see any change


#4

That must be something with your environment. Try to delete platforms, even JS files if possible then build again.


#5

i tried by deleting the js file and then clean build it again…

now the js file is not created and while running [tns run ios]…it throws error searching for js file

actually i deleted hooks folder by mistake…i think only after that it is not compiling…is there any way to get it back or i need to create a new project


#6

Try deleting your node_modules and do npm install again.


#7

thanks for the suggestion…it really worked and i could see js file is created…
but camera still doesnot appear even after permission is given

below is the console log
CONSOLE LOG file:///app/app.component.js:16:20: in capture image project
CONSOLE LOG file:///app/tns_modules/@angular/core/bundles/core.umd.js:3054:20: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
CONSOLE LOG file:///app/app.component.js:21:24: permission given


#8

it actually does not completes the take Picture operation…somehow it gets hang in that partcular function…infact there is no error as well


#9

i am using nativescript-camera@4.0.2


#10

Do you have any other devices to test apart from your iPad where you claim it fails?
Can you give a try with Playground?


#11

its working fine in android(tested in nexus 7 tablet device)…
we are not using swift so will playground will be helpful…i don’t have idea on it


#12

I meant the NativeScript Playground, if you create an example and share I will be able to test it from my end - without having to configure project in local machine.


#13


created a simple camera project…pls check…


#14

Since you have no frame (page-router-outlet) in your example, the camera is never launched. You must have at least one frame (page-router-outlet) in your application for iOS Camera to work. If you implement take picture in home component instead of app component, it works.


#15

i tried again by adding (page-router-outlet) in app.component.html
but still no change.

meanwhile i have also downkloaded another source code from github and my camera is actually working in that…but again they have also not used (page-router-outlet)
in any html file…I did not understand the actual reason why camera was not working in my previous…i am sending you the codes through nativescript playground…could you please have a look and suggest me


#16

#17

This playground didn’t work for me.


#18

If i don’t add any routing module ,
neither do i add (page-outlet) in app component file

will it work in that case for ios ??


#19

page-router-outlet is nothing but a frame which is responsible for navigation. Camera plugin relays on frame navigation which won’t be present in your app until you have at least one page-router-outlet.


#20

I am using angular 6 and after doing all the suggested changes(addibg page-router-outlet and subscribing request permission method)…when i am trying to run the app …
i am getting some logs like this…

CONSOLE ERROR [native code]: ERROR TypeError: undefined is not an object (evaluating ‘Object(nativescript_camera__WEBPACK_IMPORTED_MODULE_1__[“requestPermissions”])().then’)
“componentView”: null,
“componentRendererType”: null,
“publicProviders”: {
“PageRouterOutlet_82”: {
“nodeIndex”: 1,
“parent”: “[Circular]”,
“renderParent”: “[Circular]”,
“bindingIndex”: 0,
“outputIndex”: 0,
“checkIndex”: 1,
“flags”: 147456,
“childFlags”: 0,
“directChildFlags”: 0,
“childMatchedQueries”: 0,
“matchedQueries”: {},
“matchedQueryIds”: 0,
“references”: {},
“ngContentIndex”: -1,
“childCount”: 0,
“bindings”: [],
“bindingFlags”: 0,
“outputs”: [],
“element”: null,
“provider”: {
“deps”: [
{
“flags”: 0,
CONSOLE ERROR [native code]: ERROR CONTEXT {
“view”: {
“def”: {
“nodeFlags”: 387366913,
“rootNodeFlags”: 16777217,
“nodeMatchedQueries”: 2,
“flags”: 0,
“nodes”: [
{
“nodeIndex”: 0,
“parent”: null,
“renderParent”: null,
“bindingIndex”: 0,
“outputIndex”: 0,
“checkIndex”: 0,
“flags”: 16777217,
“childFlags”: 147456,
“directChildFlags”: 147456,
“childMatchedQueries”: 0,
“matchedQueries”: {},
“matchedQueryIds”: 0,
“references”: {},
“ngContentIndex”: null,
“childCount”: 1,
“bindings”: [],
“bindingFlags”: 0,
“outputs”: [],
“element”: {
“ns”: “”,
“name”: “page-router-outlet”,
“attrs”: [],
“template”: null,
“componentProvider”: null,
“_desc”: “platform device”,
“ngMetadataName”: “InjectionToken”
},
“tokenKey”: “InjectionToken platform device_15”
},
{
“flags”: 0,
“token”: {
“_desc”: “page factory”,
“ngMetadataName”: “InjectionToken”
},
“tokenKey”: “InjectionToken page factory_81”
}