search

silvanmelchior / RPi_Cam_Web_Interface

A web interface for the RPi Cam
MIT License
1.53k stars 492 forks source link

Preview zoomed in #642

Open xxLeoxx93 opened 2 years ago

xxLeoxx93 commented 2 years ago

Hey,

I use a cameramodule with OV5647 sensor on my Pi Zero 2 with latest PiOS. My problem is: The preview is cropped in by almost 2x. Does anyone know why?

My Settings (can post all, but everything is default besides this.): image

Thanks!

roberttidey commented 2 years ago

The OV5647 is the sensor used in the original Pi camera module V1 so that should be fine.

That module works fine under Buster OS. I have also tested it under the latest Bullseye OS which was recently released but you do need to use the legacy camera stack for this to work., The latest install.sh script should enable this.

If you are using Bullseye, can you confirm you have used the latest install and also check your /boot/config.txt file to ensure the legacy stack is enabled. ( should have line start_x=1 near the end)

It would also be useful if you could say what browser you are using and include a screenshot of what the preview looks like compared to taking a still image set to same resolution.

xxLeoxx93 commented 2 years ago

Thanks for your help! I've realized that the rotate function is causing it. Ihought it will capture as usual and then rotate but that's not the case. Without rotation now it works fine. Thanks anyway!

xxLeoxx93 commented 2 years ago

@roberttidey Would it be possible to rotate just the preview by 90 degrees? I'm only useing the imagestream as a webcam in my smart home system (domoticz) and right now it's either 90 degrees rotated or correct and croped.

roberttidey commented 2 years ago

I think you can do this by getting css to rotate the display of the preview image object in the index.php file

I haven't tried it yet but here are some pointers.

The relevant object is img id="mjpeg_dest"

To rotate the view one needs to add a new class attribute e.g. rotate90 and then use css like

.rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }

The small complication here is that the class attribute for the img object is calculated using the function getLoadClass() so you would need to add the class attribute rotate90 into that function rather than directly in the img object.

See https://stackoverflow.com/questions/20061774/rotate-an-image-in-image-source-in-html