Camera Preview as a Fill, any way to crop it?

Solar2D iOS
#1

Hello,

I’m experimenting a bit with filling a shape with camera preview, I’d like to show just half of the camera preview (well I’d like to manage to mirror the camera preview as if the mirror plane is drawn straight through the half of the screen), but I can’t understand how to do it, after working on the size of the rect, with which I achieved some sort of that goal, but it stretched the camera fill, not leaving the camera preview the full size, I’m trying with effects, the  filter.linearWipe seems interesting, but it looks like it’s not working on camera fills, anything I obtain is a black screen.

Here is a sample code for what I’m trying to do:

local widget = require( "widget" ) display.setDrawMode( "forceRender" ) display.setStatusBar( display.HiddenStatusBar ) local halfW = display.contentWidth \* 0.5 local halfH = display.contentHeight \* 0.5 local x = display.contentCenterX local y = display.contentCenterY -- local mask = graphics.newMask( "maskframe.png" ) local shape = display.newRect( x, y, display.contentWidth, display.contentHeight ) -- local shape = display.newRect( halfW \* 0.5, y, display.contentWidth, display.contentHeight ) -- local shapeR = display.newRect( (halfW + (halfW \* 0.5)), y, display.contentWidth, display.contentHeight ) --shape.anchorX = 0 --shape.anchorY = 0 shape.fill = { type="camera" } shape.fill.effect = "filter.linearWipe" shape.fill.effect.direction = { 0, 0.5 } shape.fill.effect.smoothness = 0.00000001 shape.fill.effect.progress = 0.5 -- transition.to( object.fill, { time=4000, x=0.5 } ) -- shapeR.fill = { type="camera" } -- shapeR:scale(-1,1) --shape.fill.effect = "filter.sobel" --shape.fill.effect = "filter.pixelate" if "simulator" == system.getInfo("environment") then msg = display.newText( "No camera in simulator", x, 80, "Verdana-Bold", 12 ) msg:setFillColor( 0, 0, 1 ) else display.setDefault( "cameraSource", "front" ) -- Front-facing camera --display.setDefault( "cameraSource", "back" ) -- Back-facing camera end

Any advice or sample code on this subject?

Thank you for the help,

Gabriele

#2

Hi @Gabriele,

Did you try placing the camer-filled object (“shape”) inside a container, effectively cropping (masking) the portion outside the container bounds?

https://docs.coronalabs.com/api/library/display/newContainer.html

Best regards,

Brent

#3

Thank you for the hint, I will try this now, I didn’t thought about this possible solution, I’ll report back the result, but seems a clever solution.

#4

It worked like that:

local container = display.newContainer( display.contentWidth, 2\*display.contentHeight ) container:insert( shape, false ) container:translate( 0, 0 )

I now must study why I had to set height at 2*contentHeight, that’s looking weird to me, and why some filters can’t be applied to camera-filled rects.

Thank you very much.

#5

Hi @Gabriele,

Did you try placing the camer-filled object (“shape”) inside a container, effectively cropping (masking) the portion outside the container bounds?

https://docs.coronalabs.com/api/library/display/newContainer.html

Best regards,

Brent

#6

Thank you for the hint, I will try this now, I didn’t thought about this possible solution, I’ll report back the result, but seems a clever solution.

#7

It worked like that:

local container = display.newContainer( display.contentWidth, 2\*display.contentHeight ) container:insert( shape, false ) container:translate( 0, 0 )

I now must study why I had to set height at 2*contentHeight, that’s looking weird to me, and why some filters can’t be applied to camera-filled rects.

Thank you very much.

#8

Hi Gabriele,

I have a small doubt here. Is the above code supports both IOS and android??

Thank you.

#9

Camera fill only works on iOS. It will not be supported on Android.

#10

Hi Rob,

Thank you for quick response. Actually, My app needs to take a photograph of the user to register. I am trying the use case in this way, I want to resize and place camera view at the top and below that there will be 3 to 4 fields to complete the registration. I am facing the main trouble at resizing the camera view. I don’t know what you call this feature, camera fill or something. So, just guide me is there any other way to work out this in android?

Thank you

#11

Why don’t you use the media.capturePhoto() API, and once the photo is taken, use the resulting image on your form? That will work on both platforms.

Rob

#12

Hi Gabriele,

I have a small doubt here. Is the above code supports both IOS and android??

Thank you.

#13

Camera fill only works on iOS. It will not be supported on Android.

#14

Hi Rob,

Thank you for quick response. Actually, My app needs to take a photograph of the user to register. I am trying the use case in this way, I want to resize and place camera view at the top and below that there will be 3 to 4 fields to complete the registration. I am facing the main trouble at resizing the camera view. I don’t know what you call this feature, camera fill or something. So, just guide me is there any other way to work out this in android?

Thank you

#15

Why don’t you use the media.capturePhoto() API, and once the photo is taken, use the resulting image on your form? That will work on both platforms.

Rob