How could I make the camera with customized button overlaying the camera view?


#1

I need to make the customized camera acting as snapchat or instagram.


#2

That’s something I’d be really interested in as well, but I haven’t been able to find anything available as far as plugins go. I think you would need to use native code. I’ll be looking into this myself for a project though. If things work out really well I might even make a plugin for it. It all depends on how much I can get done before the end of the month.


#3

Thanks Kris,I would appreciate it if you could let me know when the plugin is done, or you could have the customized camera view done on your own.
Yours,
Louis


#4

There are two solutions available. I cant get any of them to work though



#5

Thanks Lawrence, I will have a test on my side on those solutions.


#6

Take a look at this thread:

This is only for IOS, but if you add the SwiftyCam Cocoapod to your project and implement the code that I have at the bottom of this thread, that’s pretty close.

I am stuck though, the camera is not launching and asking for permission, I think because it tries to do so before the DOM is done rendering. I know it’s close to working because when I put the on the first page when the app loads, it works, but if I navigate to another screen for the camera it does not.

If anyone can help me troubleshoot, we’re pretty close.


#7

I tried both the solutions i.e. NickIliev/NativeScript-cameraApp-poc and SamuelGRwebfab/Nativescript-NG-CameraPreview.
The first one is in javascript, but I need Typescript code. Is it available in Typescript?

I downloaded the second demo from “https://github.com/SamuelGRwebfab/Nativescript-NG-CameraPreview”. But it gives me following errors when I compile it:

Installing tns-android
/home/divyesh.sharma/Downloads/Nativescript-NG-CameraPreview-master/cameraPreview
±- UNMET PEER DEPENDENCY @angular/common@2.4.5
±- UNMET PEER DEPENDENCY @angular/compiler@2.4.5
±- UNMET PEER DEPENDENCY @angular/core@2.4.5
±- UNMET PEER DEPENDENCY @angular/forms@2.4.5
±- UNMET PEER DEPENDENCY @angular/http@2.4.5
±- UNMET PEER DEPENDENCY @angular/platform-browser@2.4.5
±- UNMET PEER DEPENDENCY @angular/router@3.4.5
±- UNMET PEER DEPENDENCY rxjs@^5.0.1
±- tns-android@2.5.0
±- UNMET PEER DEPENDENCY tns-core-modules@2.5.0
`-- UNMET PEER DEPENDENCY zone.js@0.7.8

Can someone please help me here?