I am starting a new project where i need to have image recognition in a browser application that runs on desktop browsers, iOS and Android. The images should be scanned by using either the webcam or the device camere. So i assume using HTML5 with javascript is the way to go. The only problem is that i cannot find a decent library for this. I did find libraries that compare images by pixelarrays, and libs that can do face tracking and stuff, but none that suits my needs at first sight.
Anyone know how i can best approach this problem?
Thank you.
You will first need to find a solution on how to import your local pictures into a canvas element on your website. Either you upload them to the server first, or (if you want to use live pictures from webcams), you could use this jQuery plugin: http://www.xarg.org/project/jquery-webcam-plugin/
It uses some Flash, but as far as I know, there's no other way to get webcam pictures into the browser easily.
From canvas element you can read the pictures into pixel arrays and then use existing libraries (maybe transcode them into javascript) to do whatever you like.
There is another more recent (without JQuery) Library available to stream webcam content into canvas.
http://cbrandolino.github.io/camvas/
In HTML5 you can definitely do it through JavaScript with a bit of browser detection, here are some useful links:
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
This little javascript project used google images to recognize the content of the image:
https://github.com/xc0d3rz/npm-imagerecognition
Probably could be helpful to solve part of your problem.
Related
I am trying to send image frames to a tensor flow library on a server. I got it all setup using pure React JS, but implementing it on react-native is giving me a lot of problems.
It seems impossible to get the frames from the webRCT stream, and even without the webRCT I can't find a way to even get frames from any video in react-native.
Has anyone found a good solution to this?
Have you tried a library that can do this for you? Maybe this one can help:
https://github.com/react-native-webrtc/react-native-webrtc
Instead of "pure" ReactJS you need a bit of configuration for both Android & iOS after installing the module.
I've been searching how to implement a web application which provide the functionality to edit videos. just like the youtube Editor. What are best and free libraries out there for building a web app like this?. A library which support react would be great!.
This might be the one you are looking for html5-videoEditor. This is more of a proof of concept than a fully functional web-application. Right now it allows you to load videos into the browser, they get automatically uploaded via WebsSocket to a node.js application, where those assets get transcoded (H264/WebM/OGG). Then you can create a composition (=new video), copy videos to the stage, trim them, transform them, stack them and then finally encode them on the server-side using AviSynth and ffmpeg Currently each encoding job will produce a H264 encoded video.
I want to load the image with the minimum size of 2KB. I am unable to use any server technology here. Is it possible to know the size of the image using JavaScript or jQuery?
It is possible using html5 stuff (if you can't use server-side).
http://www.html5rocks.com/en/tutorials/file/dndfiles/
or though Flash app since almost everyone have it installed.
You would have load this image via AJAX and then use content-lenght property. Check this out.
I'm looking a quick way to add an (multi) image unloader with client side crop to an ASP.NET MVC site and for some reason the search seems to be much more complicated than I thought :(
upload image (can be via form post or custom, just has to work with ASP.NET)
custom crop possibility before upload
(preferred) multiple images at once
It doesn't matter if js/jquery, silverlight or flash is used, it just has to work, its an internal application and I can force people to have the necessary plugins installed.
Basically this is exactly what I want:
http://i-load.radactive.com/
But they are out of business and it seems impossible to get a license :(
**UPDATE**
This should be an all in one solution, I currently do not have the time to figure out how to connect multiple components.
I'm willing to purchase a component that does this, but I simply can't find one, which I find rather strange.
An internal application where you are comfortable with ASP.NET then Silverlight would be the good direction to look in.
There is free multiple file uploader which is designed to work with an ASP.NET server end here: http://silverlightuploader.codeplex.com/
There are number of ways to manipulate an image in Silverlight, either natively or with other Silverlight tools such as: http://writeablebitmapex.codeplex.com/
Finally you can re-encode images to common formats such as PNG with: http://imagetools.codeplex.com/
Whether you could actually combine these as is to acheive your goals would be another matter.
Can you do file input/output using Javascript without using ActiveX, submitting a form to a server, or other extensions?
The reason I ask is after hearing all about HTML5 I thought I might take the time to find out what all the hype is about but I can't see any way to create regular applications.
An example of what I thought I might be able to do would be to create a simple text editor in the browser using only HTML5 and Javascript, where I can open and save files from the disk. After that I was thinking to try and create some kind of icon editor using the canvas tag. But without any kind of file IO each example is rather pointless (in my opinion that is). So, is this possible? And if so how would I go about doing it?
Thank you!
Yes. See this Mozilla demo which extracts EXIF data from a local image. The W3C is developing an API.