Planificación de un complemento de cámara cordova con imagen de superposición transparente

Estoy escribiendo y la aplicación que necesita para mostrar una imagen transparente sobre la cámara, por ejemplo, como una guía para la composición. La aplicación debe enviarse al menos en iOS y Android.

Hasta ahora, he encontrado un plugin con una fuente iOS que funciona (okstate-plugin-camera-overlay, disponible en Github ), y una posible solución de trabajo para Android .

• ¿Cómo puedo superponer una vista nativa encima de CordovaWebView de PhoneGap en Android?
• Cordova Android status Bar configurado para transparente
• Notificación local repetida cada día en PhoneGap Android
• Plugin de servicio de fondo de Android en el teléfono
• Salir de la aplicación cuando haga clic en el botón de androide teléfono?

Ninguno de estos es satisfactorio, tanto compilar y ejecutar con una serie de advertencias y peculiaridades. Creo que quiero planear un nuevo complemento con esta funcionalidad y una implementación limpia y mínima.

¿Dónde puedo buscar direcciones para crear un plugin lean que soporte ambas plataformas y para una forma de decorar la funcionalidad de la cámara de la manera menos intrusiva en ambas plataformas?

actualizar

Ver los comentarios: Hago un tenedor en cordoba-plugin-cámara y lo hice funcionar para iOS. Ahora necesito instrucciones para crear una superposición transparente sobre la cámara en Android.

Actualización 2

Estoy utilizando con éxito la versión del plugin que Weston Granger ha modificado , y no tiene ninguno de los problemas que afectan a la versión original. Funciona para mí en iOS y Android con igual suavidad.

Este es el código que estoy usando

Estoy utilizando la versión del plugin que Weston Granger ha modificado

Esta es la parte relevante del código. Se mostrará la cámara detrás de una imagen.

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(); }); 

En cuanto a la plantilla html para la imagen, es sólo una página con cuerpo transparente y una imagen. La imagen debe tener un área transparente, si desea ver a través de la vista previa de la cámara. He mostrado también los botones, pero este es el código que debe adaptar a sus necesidades.

 <!-- 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 -->