Javascript API Calls
Here are all the available API calls for the JPEGCam Javascript library. Everything is under a top-level global 'webcam' namespace.
webcam.set_hook( HOOK_NAME, USER_FUNCTION );
This allows you to set a user callback function that will be fired for various events in the JPEGCam system. Here are all the events you can hook:
- onLoad
- Fires when the Flash movie is loaded on the page. This is useful for knowing when the movie is ready to receive scripting calls.
- onComplete
- Fires when the JPEG upload is complete. Your function will be passed the raw output from the API script that received the file upload, as the first argument.
- onError
- Fires when an error occurs. If this hook is not defined, the library will display a simple JavaScript alert dialog. Your function will be passed the error text as the first argument.
Example:
webcam.set_hook( 'onComplete', 'my_callback_function' );
function my_callback_function(response) {
alert("Success! PHP returned: " + response);
}webcam.set_api_url( URL );
This allows you to set the URL to your server-side script that will receive the JPEG uploads from the Flash movie. Beware of cross-domain restrictions in Flash.
Example:
webcam.set_api_url( '/path/to/myscript.php' );
webcam.set_swf_url( URL );
This allows you to set the URL to the location of the "webcam.swf" Flash movie on your server. It is recommended to keep this file in the same directory as your HTML page, but if that is not possible, set the path using this function. Beware of cross-domain restrictions in Flash. The default is the current directory that your HTML page lives in.
Example:
webcam.set_swf_url( '/path/to/webcam.swf' );
webcam.set_quality( QUALITY );
This allows you to adjust the JPEG compression quality of the images taken from the camera. The range is 1 - 100, with 1 being the lowest quality (but smallest size files), to 100 being the highest quality (but largest files). This does NOT control the resolution of the images, only the JPEG compression. The default is 90.
Example:
webcam.set_quality( 90 );
webcam.set_shutter_sound( ENABLED, URL );
This allows you to enable or disable the "shutter" sound effect that the Flash movie makes when a snapshot is taken. Pass in a boolean true or false to the function. It defaults to true. If set to false the sound effect will not even be loaded. You can optionally pass a second argument to this function, which should be a URL (relative to page or fully qualified) to an MP3 sound effect for the shutter sound. This defaults to 'shutter.mp3' in the current directory relative to the HTML page. These values cannot be changed after get_html() is called (see below).
Example:
webcam.set_shutter_sound( true, 'shutter.mp3' );
webcam.get_html( WIDTH, HEIGHT, SERVER_WIDTH, SERVER_HEIGHT );
This returns the necessary HTML code to embed the Flash movie into your page. Pass in the desired pixel width & height, which not only controls the visual size of the movie, but also the JPEG image width & height. Standard sizes are 320x240 and 640x480.
You can optionally pass a desired server image width and height. If these differ from the video width and height, the captured images will be resized to match just prior to upload.
Example:
document.write( webcam.get_html(320, 240) );
webcam.snap();
This instructs the Flash movie to take a snapshot and upload the JPEG to the server. Make sure you set the URL to your API script using webcam.set_api_url(), and have a callback function ready to receive the results from the server, using webcam.set_hook().
Example:
<a href="javascript:void(webcam.snap())">Take Snapshot</a>
webcam.configure( PANEL );
This launches one of Flash's configuration panels, used to setup camera devices, privacy settings, and more. Pass in one of the following strings which sets the default panel "tab" in the settings dialog: "camera", "privacy", "default", "localStorage", "microphone", or "settingsManager".
Example:
<a href="javascript:void(webcam.configure('camera'))">Configure...</a>webcam.freeze();
Optional, new in v1.0.4. This is not required if you use webcam.snap(), described above. This captures an image from the webcam but does NOT upload it. Instead, the image is displayed "frozen" in the Flash movie, and the user may take further action. For example, you may provide separate "Upload" and "Reset" buttons to upload the frozen image and/or reset the camera.
Example:
<a href="javascript:void(webcam.freeze())">Freeze</a>
webcam.upload();
Optional, new in v1.0.4. This is not required if you use webcam.snap(), described above. This uploads the captured image to the server, previously frozen with webcam.freeze(). This is provided as its own function so you can have separate "Capture" and "Upload" buttons for the user.
Example:
<a href="javascript:void(webcam.upload())">Upload</a>
webcam.reset();
Optional, new in v1.0.4. This resets the frozen image, previously captured with webcam.freeze(), and restores the live webcam feed for further capturing.
Example:
<a href="javascript:void(webcam.reset())">Reset</a>
webcam.set_stealth( ENABLED );
Optional, new in v1.0.9. This sets or disables "stealth" mode (defaults to disabled). When enabled, this causes the image to be captured and uploaded without interrupting the video preview. Meaning, the snapshot is not "frozen", but instead the webcam video continues to be played. Using this mode you can, for example, capture and upload multiple snapshots at preset intervals.
Example:
webcam.set_stealth( true );
thanks so much!!!! your code is awesome!!!do us also a "Save As" Dialog box when clicked on a Save button type.
Hey avinash.chebbi,
Unfortunately, a "Save as" dialog is not something JPEGCam can do. If you want the user to be able to download the captured image to their own local PC, you can do it yourself. After the image is captured and saved to your server, have the browser "redirect" to it (using an IFRAME, or open a new window). But, in your server-side code that is going to serve up the image, you need to send back a Content-Disposition HTTP header, instructing the browser to download the image instead of viewing it. This causes the "Save as" dialog to appear (depending on browser/platform the actual behavior is slightly different). Here is an example with PHP:
$download_filename = "name_of_image.jpg"; header("Content-disposition: attachment; filename=" . $download_filename);Good luck.
is it possible to pass a name parameter to the server side code? for example, embed the user's id in a hidden filed and passing to the server script so that the file name that is created includes the passed parameter.
A user already asked this question over on the IdeasAndSuggestions page. Scroll to the bottom to see the question and answer.
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!
Hello, could you suggest me an equivalent form of test.php in classic .asp?
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.
Thanks in advance.
@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!
Thanks a lot. Is there any specific reason for posting image directly to the server than as part of a form?
@praveen.baratam: Yes. If you wanted to submit a form with the binary image data, you would have to get the raw bytes out of Flash and into JavaScript?. Such a thing is incredibly slow and memory intensive, not to mention difficult because Flash converts it to XML when you use ExternalInterface?. The data would have to be base64 encoded, which would make it even larger. Having Flash submit the data directly is much faster and more efficient.
In grails, to save image:
In Django 1.2: model example:
class Validation(models.Model): image = models.ImageField(upload_to="validation")views example:
from django.contrib.sites.models import Site from django.core.files.base import ContentFile from django.http import HttpResponse from django.views.decorators.csrf import csrf_exempt @csrf_exempt def post_webcam_image(request, email): filename = 'webcam.jpg' validation.image.save(filename, ContentFile(request.raw_post_data)) return HttpResponse("http://%s%s" % (Site.objects.get_current(), validation.image.url))I have a problem, I need to take many photos in a car parking all day in the door, but when the systema has taken mor than 50 pic, the flash freeze, just black, HELP Please !!
I am trying to save the image to new URL and I am not able to. Can you please help me. When I am printing the URL on test2.html it displays it as http://' but I am passing the same URL string given you. I haven't made any changes to shutter.mp3 test.php test2.html webcam.js webcam.swf
Hi there..how brilliant you are..it's working on my pc server but why I can't access the camera through the web from internet/outside PC. thank you and your early is appreciated.
soni
bom exemplo em java, valeu.
Can I use two webcams simultaneously on one page??, thanks
Which webcam devices are supported?
HI there,
thanx for this toolHi, How set to take picture with output file format is bmp?
I'm using ajax to change the captured image in an img tag, but in Internet Explorer and Safari gives the error and the browser is closed or restarted. Could anyone help me?
only on internet explorer i have this problem: res://ieframe.dll/acr_error.htm# and the browser stopped. only back after cleaning the cache.
The flash always crashes when we click "Cancel" and "Submit" (version: 1.0.9)
Am I the only one getting a low resolution on my webcam? It used to work well when I was working on my cousin's Mac. But then I had to return it and when I got my app running on pc, I've realized webcam on flash wouldn't do so well neither in windows nor in Ubuntu, for the webcam video gets loaded on low resolution no matter the WidthxHeight?? settings...I saw earlier somewhere round here that flash 9 was a requirement, Is flash 10 causing this? My pictures are all pixelated!! Please Help!
If you want to load the swf from a different domain than your POST url, you have to add a cross-domain policy file at http://<post_destination_domain>/crossdomain.xml like this:
<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*"/> <allow-http-request-headers-from domain="*" headers="*"/> <site-control permitted-cross-domain-policies="master-only"/> </cross-domain-policy>
(obviously instead of '' you should limit this to the actual domain where your swf is loaded from)
for more infos see http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html
just cost me 2 hours to figure this out correctly, thought it may save someone some time...
there is a way to put my flash in portrait position? i need to recomplie it?
I am very confused. Also a noob. I downloaded the sample to a new folder on my computer and when I try to take a snapshot it says Error not loaded yet. I havent even edited anything yet. What do I need to do to make it save an image?
i have 2 webcams and i want to use both of its to take different picture on the same time. how can i di that? pleas help me............
Hello everyone,
I have a problem with the given example. I didn't do anything just extracted and pasted in server's (apache server) root folder. Initially, it seems working perfectly, I can able to see myself via webcam. The real problem is, when I click "Take Snapshot", it says "Error: Movie not loaded yet".
Will anyone, give a hint or solution to solve this problem?
Hi,
I was wondering if there was a way with this plugin or any others to access the webcams zoom in/out functionality??!!!! also, is there a way so if the user accepts that flash can access the webcam once, that the permission screen over the webcam does not come up again??
Thanks!
It took some time to figure this one out: the upload wasn't working. I sniffed into the TCP traffic and there wasn't any when calling webcam.upload() !
The problem was the URL: it contained : and ? characters (well formed.) The solution: pass an absolute URL http://example.com/foo:bar/?_SESSION_ID=1234 instead of /foo:bar/?SESSION_ID=1234
I want to "un-reflect" the photo. It's possible?
how to use it in a jsp script?
Thank you for this great library. Is there a way to know when the camera is ready? not the flash movie, but the camera itself. It takes a little time to start showing the images on the screen which doesn't correspond to the OnLoad? event. Thank you.
Great lib !! I'm wondering if there will be an event-callback on clicking the hardware button on the webcam, so I will be able to use a webcam handheld and trigger the script by clicking the webcam button?
Great Library!!! Tons of THANKS for keeping this open source... I got a query if there is a way to make it more user friendly my points are: 1. i wanna pop that menu directly which let user give option to remember the option to allow... 2. wanna pop some messages like "Camera not found on system" and so other error or guidelines messages.. 3. Effects like flash etc... and many more like that to make it professional otherwise you have left some wonderful footprints to get inspire by this project... Thanks again Gaurav Mehra
Error: Movie not loaded yet
I got this error when I tried to upload the image to a different server from which I had loaded the HTML (and JS and SWF). When I put everything on the same server it worked. So do in face beware of crossing domains.
can some one tell me why the player is not showing properly here... http://www.binary-elites.com/hims/patient/index/add username : arif password : 123456
its working properly on other pages...
thanks in advance