It seems that most webcams have the lower limit of 320x240. I would like the uploaded images to be half that size, yet when I change the parameters in the script to that the capture doesn't work. Any ideas on how to dynamically resize the image BEFORE it is saved to the server? This would eliminate the need for running a second script to resize them.

Hmm, I'll look into that. It may indeed be possible. Thanks for the suggestion!

Hey everyone, I just uploaded JPEGCam 1.0.5 which has the option to resize the images inside Flash just prior to upload. Thanks to pooralb for the suggestion!

Here is a test page showing an example resize: http://bowser.macminicolo.net/~jhuckaby/jpegcam/test_resize.html

Enjoy!

I found the resize update is nice and useful. Could you also add cropping as well? For example, I would like to capture the center part of the web cam, say 200 x 200 size. I think adding a boundary for the area to assist the user will also be a good idea.

I would like to see this feature because I found that if I set the size of the camera to a non-standard size (200 x 200). The camera will not work if the user hasn't allowed the camera in the standard size (e.g. 320 x 240) before.

I have just found an article which may help :)

http://manewc.com/2008/03/12/as-3-actionscript-image-crop-project-part-ii-copying-bitmap-data/

I have just found that the webcam permission form does not show when the size of the swf is too small - a blank white area will be left there. The smallest size possible for the SWF is 214px (w) x 137px (h).

But if you have allowed the webcam before and let flash player to remember the settings, the capture can still function even when the capture interface is smaller than the one specified above.

So the need of cropping is not so immediate now :)

hi there.

would it be possible if we can have the user enter a unique id as the filename for the image through a html text field. so, after clicking "Take Snapshot" button the data from the text field will be used as the filename.

i hope you won't mind me asking. thank you sir.

Gb!

This is something you can do yourself, outside of JPEGCam. Simply provide a text field on your page, and when the button is clicked, grab the value from the text field and add it to your server URL using webcam.set_api_url(). Just add the filename as a query string parameter. For example:

var filename = document.getElementById('ID_OF_TEXT_FIELD').value;

webcam.set_api_url( 'http://yourserver.com/yourscript.php?filename=' + escape(filename) );

Hi

Thank you for providing this great code for capturing images fm webcam. I havent tested it yet, but from seeing the user's response, am sure it should work. I have a request for you. Can you provide us a code sample where in I can use this with Java/jsp instead of php. ie., I want to store the image to a database on the serverside using a java code

Hello,

do you have a "upload to server" script in Perl?

Thanks Paul

Hello,

do you have any method to save the generated image´s url in a var to manage it in php or javascript code, after to take the snapshot ??

Thanks Marchello

Hi, I'd like to upload the picture using VB or C# .net, do you have any idea of how to do this?

Thanks,

Julio

Hi, Do you can add one feature for saving the image in bigger resolution than preview image?

hi, i want to convert php code which saves frame as jpeg to CAKEPHP action. How can i do this. It uses $HTTP_RAW_POST_DATA. How would i pass this data to controller's action. Please help me!

Hey great code! Is there any way to resize the image to a higher resolution? What I want is the browser to show a 320x240 jpegcam window, but for the saved image to be 640x480.

I want the picture to be higher res, but I do not want to give up the screen real estate during the capture. Is this possible?

onlineventures: Unfortunately the library doesn't support that yet, but I'll add it to the feature list. Thanks!

Thanks for being so responsive. I don't want to press my luck but-

Currently I have jpegcam set to do server side timestamps on the pictures. I find this incredibly useful for the business I run, but perhaps more people could benefit from it if it were implemented client side?

I think that would be a seldom used feature, but it would be really easy to implement. Flash can draw text (or any primitives) on the bitmap before submitting to the server. I can implement this in the next version.

It would be great to have the "mirror" feature, I mean to have the captured video being horizontally inverted like you were looking at yourself in the mirror.

It will be very nice to provide API allowing JS to manipulate image data and then bring them back to jpegcam (as frozen image, for example). We already have excellent image manipulation tool, HTML5 canvas element (http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element) and can do much with it. The only problem is how to transfer image data between jpegcam, JS and canvas.

It will be very nice to have something like ImageData? object (http://www.whatwg.org/specs/web-apps/current-work/#imagedata) allowing JS to access pixel data of image, but I'm not sure if it possible at all and will it work fast enough.

But there is a little bit tricky but working solution - we need just analogue of toDataURL() method (http://www.whatwg.org/specs/web-apps/current-work/#dom-canvas-todataurl) for webcam. After getting data: URL from it JS can create img element giving it such URL as src and then use it with canvas 2D context's drawImage method. Then, after doing modifications, JS can obtain an image data back using toDataURL() of canvas and load it back to jpegcam with something like fromDataURL() call.

Can you add toDataURL() and fromDataURL() methods to webcam please? It should be easy but give us very powerful abilities

I would like to have a page in which I design that will feature all the photos taken.

Hi J,

Jpegcam is a great piece of work, congratulations.

I am going to use this in a GPL project I am working on so thanks for providing it with an open source license. It's a testimonials plugin for the Joomla CMS.

I could really use an audio and/or video recorder as well, and if you are interested I would be willing to pay you for your time. Please feel free to contact me at daniel@ the site I linked to above.

Cheers, D.

Hi

Help me

I need to use JpegCam? in my grails project, but when I make a snap, always I have javascript mistake. I don't know if the problem is in test.php, I made a function in my controller and I call this function in javascript:

<script language="JavaScript">

webcam.set_api_url( '/pruebaImages1/foto/webcam' );

webcam.set_swf_url ( '/pruebaImages1/js/webcam/webcam.swf'); webcam.set_shutter_sound(true,'/pruebaImages1/js/webcam/shutter.mp3');

webcam.set_quality( 90 ); // JPEG quality (1 - 100) webcam.set_shutter_sound( true ); // play shutter click sound

</script>

Thanks

Hi, can someone tell me how to put a watermark on images?

I find a solutions,

<? function watermark($SourceFile?, $WatermarkFile?, $SaveToFile? = NULL)

{

$watermark = @imagecreatefrompng($WatermarkFile?)

or exit('Cannot open the watermark file.');

imageAlphaBlending($watermark, false);

imageSaveAlpha($watermark, true);

$image_string = @file_get_contents($SourceFile?)

or exit('Cannot open image file.');

$image = @imagecreatefromstring($image_string)

or exit('Not a valid image format.');

$imageWidth=imageSX($image);

$imageHeight=imageSY($image);

$watermarkWidth=imageSX($watermark);

$watermarkHeight=imageSY($watermark);

$coordinate_X = ( $imageWidth - 5) - ( $watermarkWidth);

$coordinate_Y = ( $imageHeight - 5) - ( $watermarkHeight);

imagecopy($image, $watermark, $coordinate_X, $coordinate_Y,

0, 0, $watermarkWidth, $watermarkHeight);

if(!($SaveToFile?)) header('Content-Type: image/jpeg');

imagejpeg ($image, $SaveToFile?, 100);

imagedestroy($image);

imagedestroy($watermark);

if(!($SaveToFile?)) exit;

}

And after

$result = file_put_contents( $filename, file_get_contents('php://input') ); if (!$result) {

print "ERROR: Failed to write data to $filename, check permissions\n";

This code:

// The image should be located in a non public directory

$image_location = 'dir/test.jpg';

// Locate the watermark file wherever you choose (remember PNG format)

$watermark_location = 'watermark.png';

// Watermark the image and send it to the browser

watermark($image_location, $watermark_location, $image_location);

it work perfect, hope this help!

Hi, tnks a lot for the app, here is a little contribution to comunity: upload the in a ASP.NET C# page:

if (Request.InputStream.Length > 0)
        {
            try
            {
                string fileName = string.Format("{0}.jpg", DateTime.Now.Ticks);
                string imgPath = Server.MapPath(fileName);

                System.Drawing.Image img = Bitmap.FromStream(Request.InputStream);

                img.Save(imgPath, ImageFormat.Jpeg);

                Response.Clear();
                Response.Write(string.Format("http://192.168.1.64/ImageEditor/jpegcam/{0}", fileName));
            }
            catch (Exception ex)
            {
                Response.Clear();
                Response.Write(string.Format("http://192.168.1.64/ImageEditor/jpegcam/book.jpg"));
            }
        }

Does anyone have a working example of either classic asp (preferred) or asp.net (as above) that works with the test.html without changes or for studying, can you post what changes are made to your test.html to make it work against an asp page that accepts the stream?

Hello! This has a real thoughtful API. As a webapp designer I cant stop myself from wishing a small feature. Why should the display-freeze and image-capture be linked together. Lets say i want to upload periodic snapshots every 2 secs, I wouldnt want the user-display to freeze every time i capture and upload.

FREEZE & CAPTURE - UPLOAD (Right now possible with this api)

(OPTIONAL FREEZE) - CAPTURE - UPLOAD (Wished feature)

I am not a flash programmer, so forgive me if i am asking something that cannot be done. I wish a capture() API call can copy the Bitmap data with out freezing or affecting the display.

@praveen.baratam: Implemented in JPEGCam 1.0.9, which was just released. Please see the new test page for example, or the updated API Docs for the new set_stealth() function. Thanks for the feature request!

Hi I have a page (test.html) where the Jpegcam is:

I need to save the files names to be the first name textbox: I tried the code as mentioned above it is not working. Any advice?

{{{var filename = document.getElementById('first_name').value;

webcam.set_api_url( 'test.php?filename=' + escape(filename) );}}}

This is the PHP code:

<?php
/* JPEGCam Test Script */
/* Receives JPEG webcam submission and saves to local file. */
/* Make sure your directory has permission to write files as your web server user! */

$filename = date('mdHis') . '.jpg';
$result = file_put_contents( $filename, file_get_contents('php://input') );
if (!$result) {
	print "ERROR: Failed to write data to $filename, check permissions\n";
	exit();
}

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/' . $filename;
print "$url\n";

?> '

@530112: When you say it "isn't working" what do you mean? The PHP code you pasted is still auto-generating the filename based on a date stamp. You should change this:

$filename = date('mdHis') . '.jpg';

To this:

$filename = $_GET['filename'];

hi! Can you explain this a bit more:

var filename = document.getElementById('first_name').value; webcam.set_api_url( 'test.php?filename=' + escape(filename) );

where should I paste the following code in html page for it to be sent to the PHP page? In the PHP page, I know how to receive the variable but I fail to get it to be sent with the HTML page.

Can you show an example of how it works?

Excellent work! Would it be possible to save a duplicate thumbnail size image with the same upload button click and save it in a separate folder?

there would be one more event to consider, the onUnload. When the page is closed the camera should be released. Not only the camera but everything should be released.

In grails, to save image:

String filePath = "c:/image.jpg"
InputStream inputStream = request.getInputStream();

OutputStream out=new FileOutputStream (filePath);
byte[] buf = new byte [1024] ;
int len;
while((len=inputStream.read(buf))>0) out.write(buf,0,len);
out.close();
inputStream.close();

In grails, to save image:

String filePath = "c:/image.jpg"
InputStream inputStream = request.getInputStream();

OutputStream out=new FileOutputStream (filePath);
byte[] buf = new byte [1024] ;
int len;
while((len=inputStream.read(buf))>0) out.write(buf,0,len);
out.close();
inputStream.close();

In grails, to save image:

String filePath = "c:/image.jpg"
InputStream inputStream = request.getInputStream();

OutputStream out=new FileOutputStream (filePath);
byte[] buf = new byte [1024] ;
int len;
while((len=inputStream.read(buf))>0) out.write(buf,0,len);
out.close();
inputStream.close();

Hi,

Thanks for the code! Here's my feature request:

Add a get_raw_jpeg() call. It would look like:

encoder = new JPGEncoder( jpeg_quality ); return encoder.encode( bmpdata );

Thanks!

I decided to see if I could write the get_raw_jpeg myself. I ended up changing it to get_raw_jpeg_base64 instead. The code looks like:

encoder = new JPGEncoder( jpeg_quality );
return Base64.encode(encoder.encode( bmpdata ));

The Base64 implementation comes from http://www.foxarc.com/blog/article/60.htm

Jeff

Hi

Great code.

Is it possible to predefine a specific camera, either usb or ip camera, to use, instead of the user's webcam?

Thanks

I want to understand how this actually works? If anyone can shed any light for me - james1892@live.co.uk Please get intouch.

How can I change where the images are saved?

I hope Increase the back of png image.Thanks!

http://mydomain.com/webcam.swf?http://youdomain.com/backgroud.png
For example
http://www.fototrix.com/makeover/webcam-overlay.swf?template=Short/womens-0156.png

Hi, I also subscribe to the higher resolution snap, with a smaller resolution preview. Did anyone find a way to this??

@gramhorst This has been available since version 1.0.7. Here is a test page that demonstrates the feature: http://bowser.macminicolo.net/~jhuckaby/jpegcam/test_resize_enlarge.html

Nice one. Please provide sample to code to implement it using java / JSP. I want to update the image in database also.

Does anyone have problem on linux platform? The webcam works fine but flash doesn't see it

Hello,

I developed a web site monitoring and sharing photos live with jpegcam and everything works fine.

http://www.01spider.com/

Thank you very much for this work and tools.

Thank you again for this great piece of software. I have a feature request:

Some webcams (most likely the cheapies which are most common) have a 2-3 second "initialization time" where the screen is black and/or pixelated. Can you somehow construct a hook where we can have an action - in my case display the take picture button - when the webcam is fully initialized.

Some of my underpaid employees who don't have incentive for quality work just snap the picture as soon as possible leading to less than desirable results.

Please include a mirror feature which horizontally flips the video. It's very hard to line up a photo when it's not acting as a mirror. Thank you for this wonderful software.

Hello,

Is it possible to detect (and have a cb) when the user authorize the webcam access?... It would be great for inlining instructions :)

Hi, How Can I detect if the computer has a webcam. Perhaps this API could have some method to call? webcam.computer_has_webcam() # true or false

Something in this line ... If you have any idea or workaround, please let me know.

Hi,

Will be it be feasible to capture videos from webcam?

Thanks, Surbhi.

Hi, I'm wondering if there is any javascript guru on this board, I try to implement Jpegcam so that it automatically captures pictures at intervals of 2 minutes without having to use the take snapshot button. but i'm stuck. I used Setinterval, anyone with any ideas. Thanks

hi all ,

has anyone tried this package from a https url and had success with it?? did you modify test.html and test.php ? if so can you post the changes???

gwen

Hi, is there a roadmap for the implementation of getting base64 data? this would be a great api, since you can get the picture right away by the data: protocol.. and save the base64 strings on the background.

Thanks..

please add this to jpegcam:

http://danielmclaren.net/2008/03/use-javascript-to-take-a-screenshot-of-a-flash-movie

Thank you so much.. you 've really made my life so easy.. :)

Hi! Thank you for the library, it's really time-saving. Can anyone suggest the best way of implementing franes and other overlays for photo-fun? I just can't figure the trick.

As anyone can tell me the mark of water or where to put that post before

Is there a way to improve the quality of the image? I use jpeg quality = 90 but it's not what I mean. With webcam software I get much better pictures than those taken with jpegcam. I get huge pixels when I use jpegcam.. why? Is it possible to change it?

Really fond of jpegcam. Ran into it last month and already got it running along with JSF. Only thing is, I desperatly need to improve image quality. Couldn't help noticing image shots are great on OS X with some anti-aliasing going on at 640x480. But what about other OS', did you guys tested it on them? Both my Windoze and Linux machines aren't taking pictures with as much rendering quality, so can someone please tell me that it's actually possible to somehow tweak something round just so I can capture some really neat photos outside iWorld?

Really fond of jpegcam. Ran into it last month and already got it running along with JSF. Only thing is, I desperatly need to improve image quality. Couldn't help noticing image shots are great on OS X with some anti-aliasing going on at 640x480. But what about other OS', did you guys tested it on them? Both my Windoze and Linux machines aren't taking pictures with as much rendering quality, so can someone please tell me that it's actually possible to somehow tweak something round just so I can capture some really neat photos outside iWorld?

Really fond of jpegcam. Ran into it last month and already got it running along with JSF. Only thing is, I desperatly need to improve image quality. Couldn't help noticing image shots are great on OS X with some anti-aliasing going on at 640x480. But what about other OS', did you guys tested it on them? Both my Windoze and Linux machines aren't taking pictures with as much rendering quality, so can someone please tell me that it's actually possible to somehow tweak something round just so I can capture some really neat photos outside iWorld?

I've created an extension for Yii framework that embeds jpegcam. You can find it here: http://www.yiiframework.com/extension/yii-jpegcam/

About image quality (see my last comment) I see that I'm getting bad results with Ubuntu 11.04 and integrated webcam on a Toshiba laptop. I'm using the plugin on a website and I see other users get perfect pictures; I don't know if they use Mac or Win.

It is easy to add on oneself , but it would be nice if there was a built in self-timer button function available.

optional mirror mode would be a nice feature as well, with option to save final image mirrored or not.

Hi, can someone tell me how to put a watermark on images?

Hey I am using JPEGCam 1.0.9. As I have a doubt one.. Can I remove that Privacy setting configuration completely.. I want to make it by default allow and make it allowed always!!!

actually I want to make my pic size to 100 100.. I have checked once I have set the privacy settings to allow and tick remember it.. then I can change swf's size... webcam.get_movie(100,100);

bt by default I can't change the size.. that's why asking, Is there any way??

I've done this http://blog.assorium.ru/creations/photo_maker/ And wanna translate and add facebook comments for not russian people

Any idea on how can I get the bytes from the js webcam var after snaping a pic and then pass them to an input type hidden?

I am trying to use a webcam as a barcode scanner. I have found some opensource code that scans an image for a barcode, so how could I use this to take snap shots automatically every fraction of a second?

I can not use or someone to help me

<? function watermark($SourceFile??, $WatermarkFile??, $SaveToFile?? = NULL)

{

$watermark = @imagecreatefrompng($WatermarkFile??) or exit('Cannot open the watermark file.'); imageAlphaBlending($watermark, false); imageSaveAlpha($watermark, true); $image_string = @file_get_contents($SourceFile??) or exit('Cannot open image file.'); $image = @imagecreatefromstring($image_string) or exit('Not a valid image format.'); $imageWidth=imageSX($image); $imageHeight=imageSY($image); $watermarkWidth=imageSX($watermark); $watermarkHeight=imageSY($watermark); $coordinate_X = ( $imageWidth - 5) - ( $watermarkWidth); $coordinate_Y = ( $imageHeight - 5) - ( $watermarkHeight); imagecopy($image, $watermark, $coordinate_X, $coordinate_Y, 0, 0, $watermarkWidth, $watermarkHeight); if(!($SaveToFile??)) header('Content-Type: image/jpeg'); imagejpeg ($image, $SaveToFile??, 100); imagedestroy($image); imagedestroy($watermark); if(!($SaveToFile??)) exit; }

And after

$result = file_put_contents( $filename, file_get_contents('php://input') ); if (!$result) {

print "ERROR: Failed to write data to $filename, check permissions\n"; exit(); } This code:

// The image should be located in a non public directory

$image_location = 'dir/test.jpg';

// Locate the watermark file wherever you choose (remember PNG format)

$watermark_location = 'watermark.png';

// Watermark the image and send it to the browser

watermark($image_location, $watermark_location, $image_location);

as this image can be stored in a database as a blob? I've tried and I have not managed to do

Watermark is not working solution

Is it possible to set another hook for when the user clicks "Allow" in the Flash request to use webcam dialog? Right now you cannot tell if the user allowed his/hers webcam to be used and if you run .snap() then it will save an empty background. I'm looking for something like on dailybooth.com.

Tks, first Can you add this feature ? Let user choose upload picture or take photo and then choose the area he want to upload to server. Tks alot ^^

I would like rq code detection. maybe a hook to the current still image that can be called and the image examind on the webclient and if the qr code is detected then call the snap function.

I use 2 active webcams on my computer. Each webcam has its own purpose. So, I want to dislay 2 webcam canvases in a single HTML page. How to implement jpegcam in this need?

Hi

Wow great work! I saw at one point - someone asked about a crop feature - I see you have the re-size ability any chance it could be controlled by a mouse selected area??

Basically what we do now is capture picture (at 5meg resolution) from webcam save then open with Photo shop crop down to area we want then compress and save jpeg and then upload to server.

So if we could have large hi res display from webcam crop to area we want and compress save and upload to server all from one place would be big time saver

Be very happy to donate or pay for the project...

Thanks again for great project

eddy

Hi Great work man .. but i am stuck in some problem..I want to resize my image to 240*150 but operation is not performing well when using with freeze and upload function ..what should i do and one more thing do i need to include webcam.as file with all the rest of the file

Hi , Can this be used to upload black & white Picture?

How do I set the position of the panel of the camera?

Everything works fine, but use a masterpage aspx file and the panel appears in the top left of the screen, there is a way to put in any position of the screen?

I'm sort of new to this so excuse me if this is a silly question...

But why do I get an error when I run your example (test.html) on my local machine?

This is the error message:

ERROR: Movie is not loaded yet

However, when I upload the files to my server it works fine.

I'm on Mac OS X and running this in Chrome.

How to use this library to upload images to server using jsp ?

Hi, I am using the plugin and its working fine. However, I have a complaint about the image quality, which I have seen a few prior posts about without answer.

Example: Is there a way to improve the quality of the image? I use jpeg quality = 90 but it's not what I mean. With webcam software I get much better pictures than those taken with jpegcam. I get huge pixels when I use jpegcam.. why? Is it possible to change it?

When I take pictures with my webcam versus saving them through the plugin there seems to be a huge loss of data and image quality. What could be the cause of this / how can we fix it? Please answer

Thanks!

Is this project dead? Please contact me regarding this question. It seems like good solution, but we need to implement something that can be updated progressively. Sorry for my bad english.

anyone pl provide me the source code for capturing images and saving them.

watermark with picture and text

this works for me at: http://www.fotka.mci.sk/

change test.php like this:

<?php

function watermark($SourceFile?, $WatermarkFile?, $SaveToFile? = NULL){

//make folder with TTF file $font = 'font/VeraBd?.ttf';

$watermark = imagecreatefrompng($WatermarkFile?) or exit('Cannot open the watermark file.'); imageAlphaBlending($watermark, false); imageSaveAlpha($watermark, true); $image_string = file_get_contents('php://input') or exit('Cannot open image file.'); $image = imagecreatefromstring($image_string) or exit('Not a valid image format.'); $imageWidth=imageSX($image); $imageHeight=imageSY($image); $watermarkWidth=imageSX($watermark); $watermarkHeight=imageSY($watermark); $coordinate_X = ( $imageWidth - 10) - ( $watermarkWidth); $coordinate_Y = ( $imageHeight - 10) - ( $watermarkHeight); imagettftext($image, 12, 0, 10, ($imageHeight-10), 0, $font, date('d. m. Y ') . " wwww.fotka.mci.sk"); imagecopy($image, $watermark, $coordinate_X, $coordinate_Y,0, 0, $watermarkWidth, $watermarkHeight);

if(!($SaveToFile?)) header('Content-Type: image/jpeg'); imagejpeg ($image, $SaveToFile?, 100); imagedestroy($image); imagedestroy($watermark); if(!($SaveToFile?)) exit;

}

$filename = date('Y_m_d_H_i_s') . '.jpg'; $url = 'http://' . $SERVER['HTTP_HOST'] . dirname($SERVER['REQUEST_URI']) . '/' . $filename;

$image_location = $filename;

$watermark_location = 'logo/logo.png';

watermark($image_location, $watermark_location, $image_location);

print "$url\n";

?>

notice: dismiss question marks e.g. in: $SourceFile?? etc.