8

I am writing and app which needs to show a transparent image over the camera, for example as a guide for composition. The app has to be shipped at least on iOS and Android.

So far, I have found a plugin with a functioning iOS source (okstate-plugin-camera-overlay, available on Github), and a possibly working solution for Android.

None of these is satisfying, both compile and run with a host of warnings and quirks. I think I want to plan a new plugin with this functionality and a clean and minimal implementation.

Where could I look for directions for creating a lean plugin supporting both platforms and for a way of decorating the camera functionality in the least intrusive way on both platforms?

update

see the comments: I make a fork in cordoba-plugin-camera and made it work for iOS. Now I need directions to create a transparent overlay over the camera in Android.

update 2

I am using successfully the version of the plugin that Weston Granger has modified, and it has none of the problems that plague the original version. It works for me on iOS and Android with equal smoothness.

This is the code I am using

I am using the version of the plugin that Weston Granger has modified

This is the relevant portion of code. It will show the camera behind an image.

CameraPreview.startCamera({
    x: 0,
    y: 0,
    width: screen.width,
    height: screen.height,
    camera: "back",
    tapPhoto: true,
    previewDrag: false,
    toBack: true
});
CameraPreview.setOnPictureTakenHandler(function (picture) {
    savePicture(picture);
    CameraPreview.hide();
    CameraPreview.stopCamera();
    history.back();
});
$("#clickButton").click(takePicture);
$("#switchCamera").click(CameraPreview.switchCamera);
$("#exitButton").click(function () {
    CameraPreview.hide();
    CameraPreview.stopCamera();
    history.back();
});

Regarding the html template for the image, it is just a page with transparent body and an image. The image should have transparent area, if you want to see through the camera preview. I have shown also the buttons, but this is code you should tailor to your needs.

<!-- camera.html -->
<style>
    body {
        background-color: transparent;
        background-image: none;
    }

    div.cameraButtons {
        position: fixed;
        text-align: center;
        background-color: black;
        bottom: 0px;
        width: 100%;
    }
</style>

<div class="cameraContainer">
    <img align="center" src="assets/{{frame_image}}" />
</div>

<div class="cameraButtons">
    <a id="switchCamera" style="float: right; margin-right: 8px">
        <i class="material-icons md-48" >camera_rear</i>
    </a>

    <a id="clicButton" >
        <i class="material-icons md-48" >photo_camera</i>
    </a>

    <a id="exitButton" style="float: left;">
        <i class="material-icons md-48" >backspace</i>
    </a>
</div>
<!-- /camera.html -->
Community
  • 1
  • 1
mico
  • 1,816
  • 1
  • 18
  • 27
  • you are linking 2 plugins, start by reading their source code – jcesarmobile Nov 18 '15 at 12:50
  • Well, I have chosen to fork cordova-plugin-camera and to integrate a few lines from okstate-plugin-camera-overlay. I noticed that this is what the developers of the latter had done. Most of the changes between the two where actually updates to the original plugin and only a few lines where really implementation of functionality. It seemed straightforward to fork the standard plugin and integrate the modifications. It actually worked in a few hours. Now, I am looking for a way to integrate the same functionality on the Android side. I think I might post a pull request when I am done. – mico Nov 18 '15 at 20:28
  • 1
    the core plugin uses an intent to the camera app in android, and you don't have any control over the camera app, you will have to create your own plugin that uses camera direct http://developer.android.com/training/camera/cameradirect.html – jcesarmobile Nov 18 '15 at 20:51
  • The page you are referring to should be the tutorial I was looking for. So far, I have learned that I might want a TextureView rather than a SurfaceView to superimpose a transparent picture to the camera view. Everything else seems to be covered in the article. I was hoping to be able to integrate everything cleanly in the standard plugin and maybe file a pull request, but it seems that I will have to use two plugins or combine what I have and what I miss in a custom plugin, which will have to be kept manually in sync with cordoba-plugin-camera when the difference is some 50 lines of code. – mico Nov 18 '15 at 21:23
  • Hi @mico, did you eventually succeed in building a working overlay plugin for both Android and ios? I am looking for a very basic plugin which will basically enable me to display a transparent png or html over the camera app. I was unable to find one on my internet searches – Shai Aharoni Apr 05 '16 at 08:14
  • In the end, I got some success with [Cordova CameraPreview plugin](https://github.com/mbppower/CordovaCameraPreview). I used the setting with the camera in the background, set a transparent bg for the body and superimposed an image with and alpha of 0.4. This worked for me. I was even able to save the overplayed image loading the picture in a canvas and then doing some image edit in the canvas. To save the edited picture in the gallery, I used org.devgeeks.Canvas2ImagePlugin. – mico Apr 06 '16 at 09:21
  • @micro can you please paste your answer, how did you achieve that.It will be a great help. thanks – sandeepKumar Nov 10 '16 at 05:12
  • @micro thanks for replying, i understand your updated code, but i didn't get how do you superimpose a image or canvas over camera.Maybe i am missing something, if you can please explain, i will be thankful. – sandeepKumar Nov 12 '16 at 05:32
  • I have added my html template, you will see that it all boils down, as stated in the documentation, to a transparent body and an image on display. Oh, by the way, it's mico, not micro. Details are important. – mico Nov 13 '16 at 10:24
  • @mico i am sorry for that Mico, extremely thankful for your help. – sandeepKumar Nov 14 '16 at 04:52
  • Thought this would be something that might get me covered, but after spending hours on google, SO, and github, I just couldnt make this plugin work with toBack:true option. It just doesnt wanna overlay, no matter what I do/make transparent. Can you mico or @sandeepKumar confirm if this worked for you/still working? – Marko Jan 19 '17 at 19:06
  • Yes, it works for me. It's in the Google Play Store and in the Apple AppStore. – mico May 13 '17 at 22:41

0 Answers0