jhuckaby / webcamjs Goto Github PK
View Code? Open in Web Editor NEWHTML5 Webcam Image Capture Library with Flash Fallback
License: MIT License
HTML5 Webcam Image Capture Library with Flash Fallback
License: MIT License
For example, I have square element for my capturing. I don't know user's webcam aspect ratio and i'd like to have ability to know it, because if I don't, all images will be stretched from rectangle to square.
The image is not getting captured, In IE 11. It works fine in other browsers.
The error is
SCRIPT:438 Object doesn't support property or method '_snap'
I found that webcamjs can‘t work on IE8 but IE9 can, do you have any solution to fix it?
The problem is "object doesn't support getContext method or attribute at line 400, char 3"
Thanks!
With the basic demo on Safari on mac, it seems notification from flash are not received because the live parameter is never true.
I have an other issue with IE8 which doesn't support canvas to render snapshot.
HD Demo does not work for me.
Not just frames. Would be awesome!
//Adam
Would love to see it back!
//Adam
How does the lib deal with mutiple cameras ? It there a possibility to select which camera to use ? or does it only select the webcam ..
webcamjs is very useful for my web project.
Is there any way to control TWO webcams installed in a computer?
thanks
Hi,
thank you for this script : it is perfect for my needs and work very well
but how can i rotate the preview canvas? and so snap image that are rotated ...
some users of my website use external webcam in portrait mode, so a 90 degree rotation could be useful, maybe passing a parameter, sorry i'am not so good in js, i try to modify your code but i didn't come up with anything
hope you can help
When I try snapping photo, I get the above mentioned error in a popup. There is no error recorder in the console. Has anyone experienced similar problem in past?
I'd like to flip the webcam image so that it would act like a mirror (ie: if I move my head to the right it should follow on the screen instead of going the other way).
Is this already possible?
Thanks!
Another odd one, trying to recreate reliably.
//Adam
Hi,
what should I do to suppress the "Could not access webcam" when no camera is available. Some of my users have camera, others have not, I don't want to display the error message.
I have been trying webcamjs and it works perfectly in Google Chrome.
But when I tried it in Firefox and Internet Explorer it does not work at all.
Tried even using your demo url and it doesn't work.
If I click at Take Snapshot I get: "Webcam.js Error: Webcam is not loaded yet"
So this is only working in Chrome for now.
Bizarre (:
//Adam
By adding 2 lines, it is easely fixed.
localStream = stream;
localStream.stop();
First one on the attach: function
function(stream) {
localStream = stream;
// got access, attach stream to video
video.src = window.URL.createObjectURL( stream ) || stream;
Webcam.loaded = true;
Webcam.live = true;
Webcam.dispatch('load');
Webcam.dispatch('live');
},
And the last one in the reset: function
if (this.userMedia) {
localStream.stop();
delete this.canvas;
delete this.context;
delete this.video;
}
Thank's
Hi,
I am a newbie. can you please tell me that how can I save the still image in my local drive.
Thanks in Advance
so that we can access this repo via bower?
I try to test in chrome on ipad but camera doesn't load
I don't know why but I get this error whenever I try to capture image. Can somebody tell the reason? I am using Chrome for testing.
Hello,
I wanna know if there is a way to change the resolution of the camera without changing face's proportion. The camera needs to be a rectangle to face's proportion be ok. Is there any way to change it to a square and keep face's proportion?
First of all this library is really great, kudos to developer :) One issue I am facing is when using with IE 8 its not showing preview preview is loaded and half and then stops loading, any idea how to solve it ?
Hello, this is great project. Just one question - when I use webcam.js from smartphone, it displays video from the face-facing camera on the phone, but I would need to switch to the back (primary) camera. How can I achieve this? Thanks.
Hi,
First of all, thanks for the great work with webcamjs.
I am currently experiencing weird behavior of the flash version on OSX Safari, I cannot find a solution for fixing the height of my video and living the width auto. This doesn't occur on other browser with OSX, neither with Safari 5.1 on Windows, I just give width and height and it resize the webcam with no black stripes on the top and bottom.
Did you ever experienced that ? Do you have any idea how to fix that issue ?
Hi
Love your script! 😄 But in the README.md, in 'Submitting Images to a Server', you use
var data_uri = Webcam.snap();
But it fails with 'Please provide a callback function...'. I need to save the Image in a variable for further use.
Thank you! ¡Saludos desde Perú!
please help me update this photobooth
Adding if (this.preview_active) this.unfreeze();
to the top of the reset
function will fix an issue where calling reset()
while frozen breaks any successive freeze()
calls when re-attached.
Hello. If I use webcam as HTML5 element I can control stream and define whether webcam turn off. But how can I define whether webcam is turned off if I use it as flash element? Is there any event or hook?
I can subscribe to the onended event of stream. And it works good when webcam stays unavailable (unplug it from computer). Is there the same event for flash?
I tried to change your webcam.as by adding else-branch to activityHandler. But it couldn't help.
What do you think if I add timer to your actionscript which will check camera? Is it good practice?
Ipad-2 (IOS 8) Opera and Chrome did not detect camera.
There is no reset of params and size of image remains the same from one area to another.
I've solved this problem, but I can't create a branch to commit changes.
Many thanks for a excellent script.
It all works perfectly, however i'm wondering if its possible to sync when a image is uploaded to my server and when it is loaded and displayed on my website. At the moment I'm using timers for everything, maybe there is a better way to make it more fluid and smooth? So when image is uploaded it sends a signal to my website to reload the image rather than using timers.
Here is the code I'm using:
(JUST UPDATED ABOVE LINK AS IT EXPIRED!)
Hi!
After update Adobe Flash, capturing by Flash module wont work.
Ive use a JPEGCam v1.0.9 and its came wont work (just black screen in capture and when saving image to server). Alsoo Ive see demo (http://pixlcore.com/demos/webcamjs/demos/flash.html) and this wont work too - browser stops plugin (crash) after sometime freezing.
I cant see anything how to fix it.
Something like http://pixlcore.com/demos/webcamjs/demos/crop-large.html , but I need to have a large live preview (for example 320х240 or 240x240) and small crop (for example 48x48, just for making a small avatar). Is it possible?
Hello and congrats for your library. It's very good.
My problem is that library doesn't work with WebBrowser in VisualStudio. My browser is IE10 and, after add excanvas.js, it works perfectly: but, when I add the content in a webBrowser inside VisualStudio, it crashed.
The error is generic: "SCRIPT ERROR" in file webcam.js.
Do you know what cuold be the problem?
Thanks
[UPDATE]: Analyze the code, the error break out at block 'getMovie' [line 284]. Maybe the error is similat to 'Object doesn't support property or method '_snap''. It seams not find the callback.
Can you help me?
Is it possible for this to have the video go directly to a canvas? I see that the snap shots can be put to canvas but can the video? I have tried but been unsucccessful. Thanks!
Would it be possible from the current base code?
I was hoping if i could use this library on a mobile website and it would open up the rear camera/front camera according to users choice, it would be great. Then i wont be required to use jquery mobile library.
i have error Webam.dispatch('uploadProgress', progress, e); on webcam.js (line 368)
must be Webcam.dispatch('uploadProgress', progress, e);
When I start the webcam in the flash version and the first time, I get a different flash overlay, as the next start.
the first panel must be concluded with a close button. Is there also an event for this close button?
this is more a question than an issue
great lib 👍
wait for your updating
Thanks very much for this! It works great, except when I place it in a jQuery tab. It works fine if it is the active tab displayed when the page is loaded, but not if it is in a secondary tab. The content for the tabs is not loaded via AJAX but is straight HTML elements. The call to attach is within the $(document).ready(), but I've tried it on its own as well. I've tried attaching in the jQuery tabs show event callback, but it still doesn't work there.
I just ran into the problem of having to raise the z-index of the div containing the webcam (particular app problem, nothing to do with webcam.js per se).
I implemented an additional callback hook to inform me when Flash gets loaded. Works nicely for IE8 and Safari7, probably everywhere else, too.
line 145:
// flash fallback
var div = document.createElement('div');
div.innerHTML = this.getSWFHTML();
elem.appendChild(div);
// tell the world
this.dispatch('flash');
Firstly, thanks for all your hardwork on this plugin! It's really great. It works well. However, I've noticed in IE when using the fallback it doesn't fire the custom events mentioned here:
https://github.com/jhuckaby/webcamjs#custom-events
On chrome and getusermedia supported browsers I'm using the live event to fire events to change the look and feel so I know the camera is ready. If I do this on IE, it doesn't do it all. Is there common fix for this? Or is this a feature that is not supported for the Flash fallback?
(I tested this in IE11 btw)
Thanks.
I was able to run the demos on my iMac in Safari 7.0.x, it properly fell back to the flash choice, showed the streaming video and captured the snapshot.
I am also running a Windows 7 virtual machine (VMware Fusion) on the iMac. When I run the demo pages in IE11, it properly falls back to flash and asks if I want to allow access to the webcam. It also properly shows the streaming video. But when I click the "Take Snapshot" button, it does not capture the photo. I debugged down to the line of code in webcam.js:
// flash fallback
var raw_data = this.getMovie()._snap();
But the error is " Object doesn't support property or method '_snap' ".
I'm not at all familiar with flash programming but I see in the flash code there is a call to add a callback for the _snap external interface.
I am running a recent download of Flash (Adobe Flash Player 13 ActiveX, v13.0.0.214).
Any thoughts or suggestions?
Is there a easy way to expand this software using websockets so clients can view even frames from the webcam on a canvas, etc? At the moment I'm using the following bit of javascript to refresh the image, but the fps are uneven and choppy:
Hello, I am using a Dell Venue Windows 8.1 Pro 64-bit with an 8 Megapixel back camera. When using the camera app on the Venue, it takes a very high quality photo. When using webcam.js, the preview is very wavy and grainy, and the final snapshot is as well. I've tried different settings in "Webcam.set", but still poor image quality even when I attempt to match the resolution of the camera app. Any ideas? I've attached two files....one is a screen shot of the webcamjs, the other is an photo taken in the Venue camera app. You can see a lot more detail in the camera app photo.
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.