Detect motion in live MJPEG file using Javascript? - javascript

I'm trying to program an application for an IP camera of mine. I want it to be able to take the IP address of the camera and detect motion (a change of a certain number of pixels in a certain space). I really have no idea how I'm going to go about this, and I can't find many tutorials. A lot of them are node.js, and the other ones use APIs or external libraries. I do not use APIs or any other external code. (I know it's a bit weird, but I have my reasons) I'm very sorry that this question probably wasn't the best, but I've been trying to find info on how to do this kind of thing and I can't find much on the web. Thanks in advance!
Edit: Some were confused as to whether I was using node.js. I'm using browser-based javascript.

You can use image moments to estimate motion between images.
Some CS reading about it ( or google it up ):
https://core.ac.uk/download/pdf/82353641.pdf
Event most basic moments will be sufficient for simple motion detection
Ages ago I developed open source project which also calculates moments ( in java )
https://sourceforge.net/projects/javaocr/
Even simple center of mass would be sufficient for simple motion detection ( higher order moments are necessary for pattern matching )
Also interesting reading would be on Hu moments

Related

Is it possible for real time access to mobile device camera?

So I'm wondering if it's possible for a website to be able A) access the mobile device's camera and B) have real time facial recognition capabilities? Essentially what Snapchat does, albeit much simpler, but in a web application opposed to a mobile application?
I already know the answer to (A), as found here: https://davidwalsh.name/demo/iphone-camera.php
And I even found an example that uses Amazon Rekognition, as found here: https://hackernoon.com/building-a-face-recognition-web-app-in-under-an-hour-345aa91487c
Only nuisance with the rekognition example I found was that it seems to take the picture AND THEN do the recognition, I'm looking more for something to do it while the camera is up (so you point the camera to someones face, and it does the magic there).
Disclaimer: I am not asking anyone to do any work for me here. I know I'm not providing any code samples, and that's because I'm just in the research phase and wanted to see if anyone here has any input on what I'm trying to achieve.
Something tells me this may not be possible, from my google searches I didn't quite find anything that I'm looking for, but close.

searching a large amount of text using javascript and html5 storage

I have a web app that relies on html5 offline storage features so that it can be accessed by the user without an internet connection. The app essentially just serves html pages and a little bit of css and javascript.
I am trying to add the ability to search the text served on these pages for key words, but because the app isn't guaranteed access to the server it needs to be able to perform these searches on the client side.
My thought is I can store the searchable text in the browser's web sql database and perform the search either through javascript or through the browser's sql api. I have a few question about the best way to do this:
1) I vaguely remember an article about how to implement something like this, maybe from airbnb? Does anyone remember such an article?
2) The text is 2,000,000+ words so I would assume that indexOf is going to break down at this data size. Is there any chance regex will hold up? What are some options for implementing the actual search? (libraries, algorithms, etc.) Any article suggestions for understanding the tradeoffs of string search algorithms if I need to go down that road?
Well, I just wrote a quick benchmark for you and was surprised to find that you could probably get away with using String.indexOf(). I get about 35ms per search, which is about 30 searches per second.
EDIT: a better benchmark. There appears to be some sort of initialization delay, but it looks like indexOf is pretty fast. You could play around with the benchmark and see if it looks like it will work for you.

What are good JS libraries for game dev? (HTML5)

If i decide to write a simple game both text and graphical (2d) what libs may i use? Assuming we are using a HTML5 compatible browser.
The main things i can think of
Rendering text on screen
Animating sprites (using images/css)
Input (capturing the arrow keys and getting relative mouse positions)
Perhaps some preloading resource or dynamically loading resources and choosing order
Sound (but i am unsure how important this will be to me at first). Perhaps with mixing and chaining sounds or looping forever until stop.
Networking (low priority) to connect a user to another or to continuously GET data without multiple request (i know this exist but i dont know how easy it is to setup or use. But this isnt important to me. Its for the question).
Well.... there's Rocket Engine. I haven't used it, but it appears (on the surface) to do much of what you want.
I'd also recommend HTML5 Gamer, a blog on the issues for building games in HTML5/JS
GameJs does this:
Sprites, SpriteGroups
Text rendering
input handling (key/mouse)
collision detection
sound
resource preloading
http://gamejs.org, Disclaimer: I'm dev of GameJs.
The stuff above works good and I did games with it. The API is similar to http://PyGame.org which some people like a lot.
Networking is planned.
If you're familiar with jQuery then gamequery is a good one to try. Here's a great demo of what you can do with it: brainsnackers.
Here are some of the features:
multi layer-sprite animations sprite
hierarchies (grouping) collision
detection swappable sound support
periodic callbacks keyboard state
polling free and open source license
Check out cake js. It's been around a long time and it's really nice to use - especially if you've used actionscript before.
The http://js1k.com contest just ended and the 2D platform game Legend Of The Bouncing Beholder (by marijnjh) was the winning entry. You might want to look over the source since it would provide a very easy to grasp overview of sidescrollers without needing to read lots of code.
Another good one is the two-player crazy pong which is a lot of fun.
Plus, 1kb games are just awesome.
i would use RenderEngine i think it has all you need and solves one of the most important problems that would be collision detection, and it also has sprite support...
Tutorial <- this is a great tutorial i found
i hope this helps
I can recommend Cometd for using ajax push networking (ie. comet)
What about createJS (createjs.com) or melonJS (melonjs.github.io/tutorial)?
CreateJS has great support for those items you mentioned, not so sure about networking though.
MelonJS has native support for reading Tiled tilemap .tmx files.

Processing language vs javascript?

I'm going to develop a comprehensive educational software which runs on the browser and has many visualization and simulation works (electrostatic and electromagnetic visualization, 2D and 3D).
Which language(Processing, javascript or something else) is the best toward my purpose?
The question is indeed broad but I will answer from the experience I've had.
Javascript is not really meant to do mathematical calculations, which is what might be necessary to calculate a lot of E&M phenomenon quickly (Especially if they are not represented as a closed form solution). It really goes into how much detail you want in your graphs as well (More steps = more calculations). You may find yourself needing to do more optimizations to make up for the performance difference.
I did some visualizations of antenna arrays (They had closed form solutions, only simple arrays) in Flash and it worked out ok. Javascript will definitely not be up to par with any 3D simulations you might want to do.
I wonder if Silverlight might be a better solution, because you may find more mathematics libraries for .NET than for Actionscript, that could save you a lot of work of writing the math out yourself (But you might end up doing this anyways because of the performance issues).
As others have suggested javascript is not that strong of a language when it comes to visualization.
Processing is a really good language for what you're trying to do, it's easy to learn and is Java based. Data visualization is built directly into the language, as well as temporal space (ie advance "1 tick" in time and have the visualization react to that.)
Also if you're interested in going that route I'd suggest picking up Visualizing Data which is pretty much a Processing primer.
Flash may be the more common application stack right now for what you are looking for, but Silverlight is looking primed to take the title from them based on the powerful features that it contains.
I would go Flex or Silverlight myself
Plenty of re-usable libraries
Native support for multimedia
Native support for graphics and animation
I'm a little late to the show, but what you want, has been implemented in JavaScript, and you'll find this incredibly useful. I recommend running it under Chrome as the JS processing engine is extremely fast. (You may even want to try Chrome 2 which is even faster)
http://ejohn.org/blog/processingjs/
http://ejohn.org/apps/processing.js/examples/basic/ (91 basic demos.)
http://ejohn.org/apps/processing.js/examples/topics/ (51 larger, topical, demos.)
http://ejohn.org/apps/processing.js/examples/custom/ (4 custom "in the wild" demos.)
See also: http://www.chromeexperiments.com/
I second LFSR Consulting's opinion: Processing is used a lot for educational purposes, it is free, and fast (Java is faster than Flash in general) and easy to learn, so you have faster results. It supports 3D, you can tackle Java libraries for simulation and computing, etc. And it has a great community! :-)
JavaScript is a bit light for such usage. JavaFX is hype, but it hasn't really 3D (although one used Java3D with it) and it is still a bit young.
Flash and Silverlight: no comment, not much experience in the field. OpenLazlo can be an alternative...
You really have two choices ActionScript in Flash or VB.NET/C#/other in Silverlight.
So first you need to decide which of these platforms you will target.
You may be able to split the problem into two parts, the user-interaction and display part, and the heavy calculations part.
If you can move the heavy calculations to a server then you can still show everything in javascript.
One difficulty with javascript is that it is interpreted and you will need to write more of the equations yourself, so there is a performance hit and development time, but it will work without any plugins, unless you don't want to do 3D in the canvas tag.
Flash and Silverlight may have better options, but then you are learning new languages and requiring plugins, depending on what version of Flash you want to use.
Check out processing.js, xcode, and iprocessing!
ProcessingJS is great for data visualization but lacks in interactivity.
You should probably try python. It is a really good language for educational and computational purposes it has a pretty decent community and the syntax is not so tough. Even though it was designed to for command line you can create front end gui's for it using some external package and it also provides packages like Scipy, Numpy and Matplotlib for advanced plotting and data visualization.

Programming coordinates-based game, like dots or checkers

I'm looking to learn some fundamentals on cartesian geometry or coordinates based game programming. Platform is irrelevant, although I'm most proficient in JavaScript, C, Objective-C. Ultimately being able to create something such as dots or checkers would be ideal. The idea is for me to learn how sprites work and how pathing works programmatically. My question to you folks is where is the best place to learn the fundamentals? Something that isn't math heavy because to be quite frank, anything further advanced than calculus to me at this point is a grey line and requires refreshing my memory.
If there is a particular book, site, or open source project -- that would probably help me the most.
Thanks for any ideas.
I think there's a few more steps to accomplishing your objective, which is understanding the basics of game programming. You mentioned understanding sprites and pathing, which are imperative to game programming, but I think that initially you should spend a little time understanding the programming and methodology behind general graphical user interaction.
Regardless of what language you will eventually program your game in, I think that learning in a modern language like Java or C# will provide you with a vast amount of libraries and will allow you to accomplish tasks like animation and Event Listeners much more simply.
Here is a list of guides and tutorials that I think will be extremely helpful to you just as they were to me and others:
This is an extremely-detailed tutorial for a Java Game Framework that includes full source code and a full walk through (with source code) of writing the infamous "Snake" game in Java, complete with a control panel, score board, and sound effects!
The book "Beginning Java 5 Game Programming" by Jonathan S. Harbour will introduce you to concepts such as 2D vector graphics and bitmap including sprite animation. Plus you can get it used on Amazon Marketplace for $12!
Here is an unbelievable tutorial on Sprite Animation that has more than 5 parts to it! Plus it's written by Richard Baldwin, a Professor of CompSci and an extremely reliable and knowledgeable source. For more tutorials by him, this is his site.
Between these sources you're going to possess the methodology of the parts that go into a game, which are applicable in any language, as well as the knowledge of how those parts can be actually implemented as well.
G'luck!
O'Reilly has a great tutorial on simple game development using Objective-C and Cocoa on the Mac. Lines of Action.
othello and the book is of course the renowned PAIP by Peter Norvig
A site I frequently visit is GameDev.net. They have a lot of resources for game programming in general. The forums are a great place to get more specific answers on game development.
On the site, visit the Articles and References page, which contains articles written by developers on various game topics.
You don't learn about a car engine by reading the Chilton's manual; you have to pop the hood and get your hands dirty!
Hope this helps.
I'm currently working on a checkers program using pygame. It's simple beyond imagination to get the graphics working, and the math that you need to achieve fluid movement is just simple vectors and vector animation.
Each rectangle or square on the board has a centerx and centery coordinate. The next square diagonal on the left is centerx - 82 and centery + 82 or the next diagonal on the right is centerx + 82 and centery + 82. A jump is just 2 diagonals. Make the functions separate to modularize your code and without much math you've got a simple checkers program. Easy.
Well, for Java, there's an API called GridWorld, (Its used as a case study for the AP Computer Science exam, which is why I'm familiar with it) It uses a coordinate system, so you might learn something from looking at it.
You will probably want to understand minimax and Alpha Beta pruning.
Sprite animation is going differ significantly based on what platform you choose to do your program on, and any generic reference for animating on that platform will get you through that. If you want to shoot for Java, Yoely's references look pretty good.
For the game AI, though, I recommend you check out Artificial Intelligence: A Modern Approach by Russell and Norvig. It looks intimidating, and understanding much of the book will take a working knowledge of high-level math concepts. However, it is engaging and well-written, and you can probably make it through the first dozen chapters or so without hitting any math landmines. The algorithms and concepts in that book will be more than enough to help you program AI for a simple game, and might even help you decide on one.
My suggestion would be to use a language/development environment that makes working with sprites easy.
Take a look at Scratch.
The Scratch web site contains thousands of projects that you can download and edit right in the development environment.
Here are some projects to get you started: http://scratch.mit.edu/tags/view/checkers
Plus, there is a good online forum filled with helpful people if you get stuck!
Once you make a game using Scratch, you can upload/share it right from the development environment or you can post it on your own web site (although that takes some doing).
Hope this helps.
http://www.gamedev.net/
This is probably one of the most well known game/graphics programming site on the net. Its forums are subject to computational geometry, algorithms and all levels of GPU programming concepts.
You would be able to get a lot of help here. There are many articles on the subject of game programming already on this site from which you can see examples and understand the thought processes behind putting together these kinds of systems.
:]
http://www.pygame.org/
Python is great to get started, and nice examples and tutorials available.

Categories