Customize Camera Ionic


#1

I want to create the app with Ionic to upload video in anywhere.
So I need to capture video and select video from gallery.
I want to add the gallery button in camera page like native camera app, but If I install camera plugin, there is not gallery button.

The red circle will be to set gallery button.

How can I solve this problem?


#2

Which one exactly? There are multiple.
What platforms are you targeting?


#3

For all platform I need.


#4

This answers one of the two questions I asked.


#5

Commonly when we capture video using media capture plugin, the camera screen is like as following.

But I want to add selecting gallery button in this page like as following.

The red circle in above screen is that I wanted to add the gallery button.


#6

So this: https://github.com/apache/cordova-plugin-media-capture Correct?
Are you using this directly or via Ionic Native?

(Why not just post this link so we, trying to help you, know what exactly you are using instead of having to google ourselves?)


#7

I am using via Ionic native.
And the capture video code is like as following.

      let options: any = {limit: 1, duration: 20, quality: 0};

      MediaCapture.captureVideo(options).then((_data: any) => {
        let i, len, size: number;
        let fileName, path, type: string;
        for (i = 0, len = _data.length; i < len; i += 1) {
          fileName = _data[i].name;
          path = _data[i].fullPath;
          type = _data[i].type;
          size = _data[i].size;
        }

        if (path){
          // Call File upload function
          this.uploadFile(path, fileName, type);
        }
      }, (_err: CaptureError) => {
        console.log(_err);
      });
    }

So I can capture video in camera page that I attached above.
But I want to select video from gallery in camera page also.


#8

Great, now we know what you are actually using. This should have been in the first post.

So now on to maybe help you:

The interface being shown is definitely defined by the OS, not by the plugin itself.

The Cordova plugin offers no options to customize this in any way, there probably also is no way to simply edit the code of the plugin to change this as the UI really is not part of the plugin, but from the OS (no .xib or anything in the plugin unlike in some other plugins e.g. barcodescanner).

The code triggering the OS UI is somewhere in here I think: https://github.com/apache/cordova-plugin-media-capture/blob/master/src/ios/CDVCapture.m#L213-L275 (Equivalent for Android is here and much clearer: https://github.com/apache/cordova-plugin-media-capture/blob/master/src/android/Capture.java#L293-L305)

So you could try to understand the iOS code, find out which “Class” is used to display the OS UI and then find out if there are actually options to add the gallery button somehow. If so, you could fork and edit the plugin and use your fork. But you would probably also have to handle that somehow, so maybe more work.


#9

Thank you @Sujan12.
It’s very helpful. I also think to modify plugin.But It’s difficult to implement like you said.
So I want to find to implement easy way. :slight_smile:
I will modify the media capture plugin for my requirement.


#10

HI Donbelar, I’m also facing similar issue . Did you get any solution for it?


#11

Nope, unfortunately I didn’t solve yet.


#12

If you still trying to implement it, just have a look at this once http://ionicframework.com/docs/native/camera-preview/ it may be helpful.


#13

Hey @Donbelar, most likely the plugins trigger the native camera which has different UI that varies from the operating system version, so the image you sent is your camera UI from your OS version. Modifying what you want to modify is not possible in the way you want.

You can use another plugin, though, and it may solve your problem, but you gotta customize it entirely.

Take a look at this tutorial, which can lead you to a good solution: https://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/