Need ability fo flip webcam image horizontally
|Status:||Closed||Start date:||20 Oct 2013|
|Target version:||PiBox - 0.7.0|
|Severity:||02 - High|
This feature is needed, for example, if the webcam is mounted upside down on the back window of the trailer.
ffmpeg supports the hflip option, as in
What needs to happen is the web page needs to set this flag on the session and then piboxd restarts the command. Unless the webcam
RM #238: Fixed webcam.tmpl to use div wrappers to allow flipping the wrapper for the image without flipping the controls.
#4 Updated by Hammel about 7 years ago
- Status changed from New to In Progress
- % Done changed from 0 to 10
Now that I've settled on mjpg-streamer for webcam playback, this won't be so easy. What has to happen is:
- The inbound image from V4l2 has to be pre-processed before it is passed to the JPEG library.
- The UVC driver for V4l2 may provide image processing capabilities with the V4L2_CID_HFLIP user command but its not clear if all webcams will support this. See the Linux USB Video Class (UVC) driver documentation
in the linux kernel (Documentation/uvcvideo.txt).
- The JPEG library doesn't provide image rotation/flip.
If V4L2_CID_HFLIP were added to input_cmd():input_uvc.c and it worked that would be the easiest solution. Here's a snippet that might show if it works or not though this may be v4l1 and not v4l2.
If not, that would leave processing internal to mjpg-streamer. It looks as though a processor could be added in cam_thread() at about input_uvc.c:710. Here a YUV image has been compressed into a jpeg buffer or a jpeg image has been read from the camera and placed in the buffer. In either case we have a jpeg image ready to be rotated. The question is: what library can I use to rotate a jpeg image?
#5 Updated by Hammel about 7 years ago
- File shflip.c added
- % Done changed from 10 to 20
I compiled the attached program and ran it. The output shows the available v4l2 controls for my webcam, and that the HFLIP/VFLIP options are not available:
Control Brightness Control Contrast Control Saturation Control White Balance Temperature, Auto Control Gain Control Power Line Frequency Control White Balance Temperature Control Sharpness Control Backlight Compensation
#6 Updated by Hammel about 7 years ago
- % Done changed from 20 to 30
css transforms work on the desktop but I think the processing power required is too great for it to work on Android phones. I don't think I can use client side processing for this. It will have to be server side processing, and that probably means flipping the image inside of mjpeg_streamer.
#7 Updated by Hammel about 7 years ago
- % Done changed from 30 to 40
mjpg_streamer works with mjpeg images from the cameras. It will only assume YUV from the camera if you tell it. If it is YUV, the image must be converted to MJPEG first. This slows the stream down considerably since it isn't hardware accelerated with the DSP on the Pi. And even if it was, I'd still probably have to do a transform on it and that would take more CPU cycles. It's just likely to be too slow.
Fortunately I found that the CSS transforms work just fine if I reduce the size of the image captured from the camera. I dropped it to 288x216 (320x240 would probably work too) but at 30FPS. Then I applied an X-axis rotation using CSS transforms. This is equivalent to a flip. I checked that flipping the camera over got a right-side up image. The trick is to apply the flip to the div container and not to the <img> tag. This also means the controls I added in the div with the image are flipped, so they have to be moved out of the div and properly aligned, probably by creating a top level container with two div's: one for the image and one for the controls.
I tested the flipped image on my phone. It was slow but worked. I tested it on my Galaxy Tab 2 and it worked just as well as on the desktop. So the problem with the phone is probably just hardware - not enough horsepower there.
I may want to provide additional tweak options that get passed to piboxd to change the size of the image and frame rate. I'd rather not have the client side doing scaling either in order to squeeze out as much performance on that side as possible.Now I need to:
- Fix the webcam.tmpl to have a wrapping div with two divs, with one of them a new div for the controls.
- Update the pibox.css to support the new div layouts.
- Possibly find some icons to use in the buttons. The fam-fam-fam icons would probably be sufficient.
- If possible, add some scaling buttons and support in pibox.php for restarting the stream with new resolution settings in piboxd.
#8 Updated by Hammel about 7 years ago
- % Done changed from 40 to 80
Fixed webcam.tmpl to use div wrappers to allow flipping the wrapper for the image without flipping the controls.
Flip top/bottom border stylings so the appearance of the video player border remains the same on flips.
I'll look for some icons to make the buttons prettier and look into adding a scaling button to make the image bigger or smaller.