search

jhuckaby / webcamjs

HTML5 Webcam Image Capture Library with Flash Fallback
MIT License
2.49k stars 1.11k forks source link

Flash cropping parts of the image #34

Closed birla closed 9 years ago

birla commented 10 years ago

I'm using flash capture method in Chrome for taking a snapshot with the input coming from a CCTV camera (aspect ratio 16:9). The image is getting cropped from all edges except the left even though I have not specified any such settings. The same input when captured with getUserMedia there's no cropping though the snapshot is skewed (stretched).

jhuckaby commented 10 years ago

The 16:9 stretch in Chrome getUserMedia is a known Google bug, still unfixed. Unfortunately, Flash has a number of issues with certain cameras, including random cropping, colored padding, etc. I don't believe this is a bug in WebcamJS, but if you could, please try to reproduce it on the old JPEGCam demo (which has no cropping code), so we can be sure:

http://bowser.effectgames.com/~jhuckaby/jpegcam/hd.html

If you see the same cropping effect on JPEGCam, then it is most likely a Flash driver bug with your particular camera. You can try telling Adobe about it if you want.

Thanks.

birla commented 10 years ago

@jhuckaby, I currently don't have access to that camera but I will try when possible. However, based on prior experience I can confirm that it's not a Flash driver bug since I previously used the https://github.com/infusion/jQuery-webcam plugin without any cropping issues. I had to move away from it since the uploading the image was done directly in the SWF (by giving it a server endpoint) instead of returning the dataURI like in webcamjs.

birla commented 10 years ago

@jhuckaby I finally got access to the camera and I tested the link that you shared along with HTML5. The JPEGCam flash implementation give results similar to the webcamjs flash, while the HTML5 manages to keep more of the image while still cropping some parts. I have saved the actual and captured images on the following url: http://imgur.com/a/aE8Ib (yellow highlight indicates cropped image parts).

jhuckaby commented 10 years ago

Okay, thanks for letting me know. Since https://github.com/infusion/jQuery-webcam is working for you without any issues, I'll have to study their source code and see what they are doing differently.

It looks like jQuery-webcam supports grabbing the image client-side, and placing it into a HTML5 Canvas. They then extract a Data URI from the canvas, and upload it to the server in JavaScript using jQuery. Instructions are here: http://www.xarg.org/project/jquery-webcam-plugin/

Scroll down to the "Alternative method to the upload via Flash" section to see their example.

Would this help you? It sounds like you abandoned jQuery-webcam because it uploaded from the Flash movie itself, but they seem to support JavaScript / AJAX upload as well!

jhuckaby commented 10 years ago

Okay, it looks like jQuery-webcam uses Flash 8 / ActionScript 2, and a XML movie clip to show the "video". WebcamJS is entirely different, using Flash 9 / ActionScript 3, and no clips. So that might explain the difference. I am not sure how to fix this tho. I'll try contacting Adobe. For now, if jQuery-webcam works for you, I'd recommend you keep using it.

birla commented 10 years ago

@jhuckaby Thank you for investigating so fast. The dataURI implementation of jQuery-webcam some how missed my eyes, I will try using that again until the issue in webcamjs gets fixed.

Thanks again and best of luck, if you need any help is testing let me know.