infusion / jquery-webcam

A webcam wrapper plugin for jQuery

jQuery Webcam Plugin

Description

A small wrapper library to be able to communicate with a Flash webcam via JavaScript.

Example

Please note: The camera doesn't work if you have any dom-errors on your page!

The Flash object will be embedded into the following Div:

<div id="webcam"></div>

jQuery("#webcam").webcam({

	width: 320,
	height: 240,
	mode: "callback",
	swffile: "/jscam_canvas_only.swf", // canvas only doesn't implement a jpeg encoder, so the file is much smaller

	onTick: function(remain) {

		if (0 == remain) {
			jQuery("#status").text("Cheese!");
		} else {
			jQuery("#status").text(remain + " seconds remaining...");
		}
	},

	onSave: function(data) {

		var col = data.split(";");
    // Work with the picture. Picture-data is encoded as an array of arrays... Not really nice, though =/
	},

	onCapture: function () {
		webcam.save();

 	  // Show a flash for example
	},

	debug: function (type, string) {
		// Write debug information to console.log() or a div, ...
	},

	onLoad: function () {
    // Page load
		var cams = webcam.getCameraList();
		for(var i in cams) {
			jQuery("#cams").append("<li>" + cams[i] + "</li>");
		}
	}
});

If you want to draw the picture onto a canvas, have a look at the source of the page on my blog, linked below.

Further examples and documentation

For further details and code examples take a look at the demonstration and documentation page on:

https://raw.org/article/camara-support-in-html5-and-javascript/

License

Copyright (c) 2013, Robert Eisele Dual licensed under the MIT or GPL Version 2 licenses.

jquery-webcam's Issues

新版的谷歌浏览器打开允许摄像头之后，是空白的界面，而且摄像头指示灯也没有亮

新版的谷歌浏览器打开允许摄像头之后，是空白的界面，而且摄像头指示灯也没有亮

May anybody provide other size of webcam jscam.swf file?? (240x180size or 160x120size)

I'm trying to resize the size of webcam, but I failed. (240x180size or 160x120size)
You know, if I want to change the size of webcam, I should recompile using the source code in src directory.
Even if I didn't change any source code, compiled jscam.swf file is not working.
(Only the jscam.swf file in the repository is working well)

I think that the fail reason is difference compile circumstance.
To compile, I installed swfmill-0.3.2, gc gcc++ gcc-c++, libxml2 libxml2-devel, libxsit libxsit-devel, libpng-devel using yum or repo file in the internet.
My compile source code and execute swf file OS circumstance is Centos 7 x86_64.

If anybody can compile source code, please give the 240x180, 160x120 changed jscam.swf file.

Or, any idea or advice is welcome.

Support the video?

hey,Support the video?

how to change dimensions in jscam.as file and jscam.xml file .

hi

i am using jquery webcam plugin,its working perfectly.but i change the webcam dimensions,i had changed in .js .but i don't know how to change in jscam.as and jscam.xml files.
can any one help plz. thank in advance

How can I set the source of an img element as being the picture taken by the webcam?

Hello.

I am trying to put the image/picture taken by the WebCam in an img element in my page, in the onSave event. How can I do it?

$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "/download/jscam_canvas_only.swf",
onTick: function() {},
onSave: function(data) {
var col = data.split(";");
var img = image;

        for(var i = 0; i < 320; i++) {
            var tmp = parseInt(col[i]);
            img.data[pos + 0] = (tmp >> 16) & 0xff;
            img.data[pos + 1] = (tmp >> 8) & 0xff;
            img.data[pos + 2] = tmp & 0xff;
            img.data[pos + 3] = 0xff;
            pos+= 4;
        }

        if (pos >= 4 * 320 * 240) {
            ctx.putImageData(img, 0, 0);
            pos = 0;
        }

        // How to put the image in an HTML element?
        $("img").src(the_image_taken_by_the_web_cam);
    },
    onCapture: function() {},
    debug: function() {},
    onLoad: function() {}
});

Custom compiled SWF won't start webcam

I cloned your code and and ran make on my machine with the original code. It successfully finishes and results in a SWF, but the SWF won't start the camera (I only get a white background). It does run the Main function however, and I know it was able to find a camera. Do you know what could be wrong? Am I missing a dependency or something? Here are the details of my machine:

• Linux 2.6.15-1-486 #2 Mon Mar 6 15:19:16 UTC 2006 i686 GNU/Linux
• swfmill 0.3.0
• Motion-Twin ActionScript2 Compiler 1.14 - (c)2004-2008 Motion-Twin
• No flash libraries, just the required dependencies of the libraries above.

Note that the included SWF works fine. I just need one that creates bigger images. Maybe you could include SWFs for 640*480 and 720p?

Reverse Webcam Output

Normal webcams flip the output around the vertical access so moving left in front of the webcam actually moves you left on screen. This is way more natural and it would be awesome to have this. It's easy to do when exporting, but the value of having things flipped is on the live streaming side, not the capture side. I don't have an AS workflow setup, but something like this: http://www.actionscript.org/forums/showthread.php3?t=152236 shouldn't be too hard?

I'm honestly a little astonished this isn't a native option on the camera object. Maybe it's been updated since that thread discussed it many years ago? Didn't see anything obvious in the Camera docs, though.

jQuery webcam plugin - how to output bigger images?

Hey!

This issue is based on "jQuery webcam plugin - how to output bigger images?" on stackoverflow.

Could you change the hardcoded dimensions in the jscam.as as described in the answer 1?

// jscam.as
166. for (var i = 0; i < 240; ++i) {
becomes: for (var i = 0; i < Stage.height; ++i) {

169. for (var j=0; j < 320; ++j) {
becomes: for (var j=0; j < Stage.width; ++j) {

166. for (var i = 0; i < 240; ++i) {
becomes: for (var i = 0; i < Stage.height; ++i) {

169. for (var j=0; j < 320; ++j) {
becomes: for (var j=0; j < Stage.width; ++j) {

Cheers,
Pablo Cantero

PLEASE! Mirror the images on cam

Hi it is possible embedd a mirrored cam...
I think like a property in init setting

es.
{
mirrored: true,
width: 320,
height: 240,
mode: "callback",
swffile: "/jscam_canvas_only.swf"
}

mirrored property set the video image on cam mirrored

PLEASE!

how to close camera

I can't close camera until I close the explorer, is there any function to close camera when I save photo!

Store Image directly into local directory

hey friends, i am trying to make an html page which would work locally and want to save the images locally, can you please help. I've seen the example and reached till where you can see the video on the flash canvas but unable to save the images. please help!!
Regards

Camera image is distorted on Firefox and Safari

After changing resolution of the swf file (instructions from #5), I have an issue of the camera displaying on different browsers. The image is displayed correctly on Chrome; however, it looks wider (full camera view?) and distorted when displayed on Firefox and Safari. I guess that the new compiled resolution does not fit the actual camera resolution, which makes the distortion. Do we have any solution for this?

Webcam is not showed using jscam.swf

Hi,

I am running a script to upload the images once they are taken, however, once I use swffile: "webcam/jscam.swf", it doesn't show the webcam. If I use swffile: "webcam/jscam.swf", it is showed. I am using Ubuntu. I have tried compiling the .swf files but I don't get anything new.

I have seen another issue in this repository and tried to copy those .swf from that solution but I get the same result as well.

Any thoughts?

Kind Regards

Add Callback "Camera started"

first off thanks for this great piece of code.
i have a suggestion to make: could you add a callback for when the user accepts the flash plugin?
right now i'm using the hack

debug: function (type, string) {
      if ( string == 'Camera started' ){
        // do something here
      }
}

it would be nice form a user interface point of view, as you can hide the action button that triggers the camera, ask user to accept the flash request, etc. I can live with this hack, but maybe having a real callback would help others to come up with nicer user interfaces.

save('/webcam.php') example doesn't seem to fire

I'm trying to get the .save method to send the picture as an HTTP post, I'm not seeing any requests made in the console or in the request logs - how does this method work?

The example shows;

webcam.save('/upload.php');

But I'm not seeing that fire.. The example is otherwise working, the image is displaying on the page..

Anyone have any idea?? Thanks!

Stop Stream

I was wondering if there was a way to stoping a stream mode capture? Thanks in advance

recompile flash on mac?

i don't have access to a Linux machine, so how do I compile the .as-File on a mac (after resizing)?

I tried using flash und flashbuilder and to install this swf-mill thing but I didn't succeed either way. I'm not very experienced using terminal applications though, neither coding with ActionScript.

Is there a tutorial how to do this? Or can anyone explain?

Your help is very appreciated!

The link to documentation page is broken

Hello,
The link to the documentation/examples page given -
http://www.xarg.org/project/jquery-webcam-plugin/
seems to be broken, right now.

Request to correct.

streaming video enhancement

Do you know what's needed to add support for recording video? Have you tried it already?

IE8 Error: Object doesn't support this property or method

I am trying to implement webcam plugin in a web project, in all browsers works fine, instead of IE8, when I try to capture the webcam screen an error shows up

Error: Object doesn't support this property or method when trying to webcam.capture();.

I am trying to figure it out, but cannot find a solution for it. It is possible to make it work?

Support for displaying multiple cameras at the same time?

Hey, I would like to display the feeds from several cameras at the same time... But it looks like it creates a global variable window.webcam - is it possible to have several camera feeds active?

jQuery-webcam Not working

Dear @infusion
i am trying to run the basic example you provided , but i dont got anything .
i am doing same as you , providing a

and adding the Jquery libraries , and the Jquery codes , but there is nothing to appear .

Regards

How to get the return value when using save mode saving image file

after save file success,I want to get the return information from the save handler,can I and how?

Error stringFlash movie not yet registered

I display the webcam in a modal dialog. When I click take picture, sometimes I get an error:

typeerror
stringFlash movie not yet registered!

It doesn't happen all the time. When I get the error I close the modal window and when I open again it is working

Documentation not proper + saving video through webcam not mentioned

Hi,
Please tell me whether I can save the entire webcam video to my local system or not if yes then how? also more informed documentation would be nice.

Setting other camera not working

When i call webcam.setCamera(index of second camera) then its being executed but the camera doesn't change.

I'm testing this with a windows surface pro 2.

Custom compile only makes jscam.swf, not jscam_canvas_only.swf

Can you give some tips on make-ing a canvas-only version of the Flash file? I just want to recompile to change the cam dimensions.

Thanks!

switch between "callback" and "stream" modes dynamically.

Hey - I'm using your jquery webcam library, but I want to be able to switch back and forth between camera and video. Is that possible? What's the best way to do so. I tried to just switch the window.mode to stream from capture, but I'm guessing that doesn't work because you've already instantiated the flash object. Is there any other way to accomplish this? Thanks for any help you can provide!

External Interface calls not working

Hi. Im pretty new to actionscript and when I try running the swf file I keep getting the error message: "Flash movie not yet registered!". Now, I searched the web for similar issues and the main ones were not including the allowScriptAccess param, yet this has already been accounted for in previous patches. So could anyone PLEASE nudge me in the right direction?

Changing the resolution of the saved image...

Hello fellow developers,

I have have a question for you, I am using this plugin combined with asp.net. And it works almost perfect. but I have a problem, the resolution of the saved images are 320 x 240 and I prefer them to be 1024 x 768. How can I change this?

Bart.

add wmode to the html snippet

Adding and wmode="transparent" solves the issue that the flash file can't be hidden/overlapped with CSS.

Resizing Woes

Hi all,

I've been at this plugin for the past couple of days, really just trying to understand how exactly to make the output on the canvas not the tiny 320x240 that it is by default. I've tried:

1.) Changing all of the widths and heights in the src files and JS so that they are 640x480, and recompiling, but this doesn't seem to change anything except the size of the webcam and the canvas itself (though the image is still just 320x240, and the rest of the canvas is either black or white).

2.) Downloading a fork from another repo that has recompiled it for the right size, but that doesn't work either.

3.) Switching to jscam.swf, since that is the only one that is affected by compiling, but I just get a white screen. This happens even if it isn't embedded on a page (i.e. open directly as a file).

Is there something I'm missing? I've actually got this over on bitbucket, but I could happily stick my code up on GH if people wanted to take a look.

setCamera Method

i have two Camera,how to change the default Camera? use setCamera method ? but it is not work

not working in modern browsers

I guess the reason is jscam_canvas_only.swf which is flash and Adobe do not support flash anymore. What should I do ?

Reverse Webcam Output

Normal webcams flip the output around the vertical access so moving left in front of the webcam actually moves you left on screen. This is way more natural and it would be awesome to have this. It's easy to do when exporting, but the value of having things flipped is on the live streaming side, not the capture side. I don't have an AS workflow setup, but something like this: http://www.actionscript.org/forums/showthread.php3?t=152236 shouldn't be too hard?

I'm honestly a little astonished this isn't a native option on the camera object. Maybe it's been updated since that thread discussed it many years ago? Didn't see anything obvious in the Camera docs, though.

problem in storing pics....

i run this script in my localhost everything working fine,but when i shoot. the snap it is not store in my local directory...Help to solve the problem?,

i'm using xampp version
Apache 2.2.21

• MySQL 5.5.16 (Community Server)
• PHP 5.3.8

Thank's and Happy regards
Kiran

AS3 version

I had lots of issues with this. There is an AS3 version thats make easier to use.
https://github.com/fatlinesofcode/JS-Webcam

Need to edit src/jscam.as as well if changing size

The docs on the home page don't make it clear. I thought you only needed to edit the src/jscam.xml file if you wanted to recompile the Flash for a new size of cam.

Turns out the height/width are hard-coded into src/jscam.as as well (in two places for each), so be sure to edit that file.

Doesn't seem to work with IE9

I realize that this will come as somewhat of a shock given the reliable and steadfast browser Internet Explorer has come to be known as, but the plug in doesn't seem to work with IE (I'm running IE9).