How can I do video capture in the browser? - javascript

Ideally what I was initially looking for is an implementation of the HTML5 Media Capture API with a polyfill rolling back to Flash, however, my research has concluded that the API is in its infancy and is yet to be taken up by any of the major vendors, and in addition to that, Flash means for doing what I need seem scarce.
I need to be able to take webcam input from a camera, show a live preview, record, and play back that recording, nothing more, no upload to server necessary, all local.
Are there any decent Flash solutions? Or other means of achieving this?
I have found a lot of references to Red5, to clarify, would that refer to this: http://www.red5-recorder.com? Is this really the tool to use or are there better alternatives?

I ended up using http://nimbb.com for this, the free version has some limitations but gives the basic functionality needed met my criteria for the project.
In addition to my needs it also allows users to upload recordings to the Nimbb website and share over social, which can't hurt!

I too am looking around for the same feature. The best I found was Open-Tok, they do all the work
http://www.tokbox.com/opentok/plugnplay#VideoMessages
My problem is my site is adult in nature, so the people recording the videos would more than likely be naked. This is against the terms of service for Open-Tok I do like their offering.

Related

Service for recording (camera or screenrecord) directly in browser

I'm creating a service and want to implement a way for the users to easily record a video and upload it directly in the browser. I've looked into Wowza and red5. It would probably be easiest if the video would go straight to their server for perfomance. Does anyone have any experience with either one of them, or even more so, have any other alternatives that would work? I'm building the site in Django, but I'm somewhat afraid of hosting the whole service on my own service considering the performance.
Thanks.
Take a look at this article. It explains how to capture audio and video with HTML5 only. However, the browser support for this is horrible. The best and easiest way in my opinion is to make a own app with AS3 and PHP. It's fairly easy to do and gives you the best options for customization.
Building such app in AS3 (Flash) and using Wowza as a backend is simple enough.
I personally participated in such projects.

How do I use jsmad?

jsmad is a new JavaScript based MP3 decoder (GitHub, demo), but it seems to be lacking any documentation at all. I can't really work out what a lot of the demo is doing either, and the actual JavaScript seems minified.
Is anyone able to write up some documentation here for someone that just wants to play MP3 audio, please? It looks like a few people are giving up because of the lack of documentation.
I sent an email over to Amos Wenger, one of the developers for jsmad, who had this to say:
Hi there!
Yes, we are very much aware of the lack of documentation. There are
two reasons for that:
First, the bad news: jsmad only does MP3 -> raw audio, whereas people
expect a much more complete piece of software (similar to HTML5 audio,
which does HTTP streaming, buffering, decoding, audio sink, UI
controls, events etc.) As I mentioned in my jsmad slides at jsconf.eu,
we need to flesh out several other components before we have a real
competitor for Flash-based audio playback on your website. So in a
way, the lack of docs is because we don't want end-users to start
deploying it on their website just yet! It's not ready for prime time.
At ofmlabs (Official.fm's R&D division, among other stuff) we had a
lot of internal projects going on, and have only recently been able to
re-focus on open source. So that's the good news: we'll have more time
to spend on stuff like jsmad, and will probably work on the missing
parts (buffering, proper demuxing - probably via aurora.js, etc.)
As for 'docs', there are a little in my slides (mentioned above), and
well mhd.js is not minified so you can always take a look at
http://jsmad.org/mhd.js ;)
Cheers, Amos
So it looks like jsmad isn't up for public use just yet, but we can look forward to further support in the future. :)

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.

resize, rotate, crop then save images online.... ActionScript or JavaScript?

Which is a better approach for this?
ActionScript3 or JavaScript+PHP?
And if anyone came across an open source tool with either I'd really appreciate it.. after a long search, the only good example i found was this http://www.ajax-image-editor.com but I'd rather have a flash alternative.. Also I don't need all the extra functions such as filters.
Thanks.
Flash and Actionscript would certainly have their advantages, but I know no Open Source solution in that field. In Javascript, there is the Prototype based Cropper. There is at least one more good open product out there, but I forgot the name.
This is more of a front-end technology choice. Neither Flash nor JS can store an image on the client side on their own. Both will behave like RPC clients, sending requests to the server to execute.
Whether you choose Flash or JS depends upon your needs (Flash would allow more manipulations than JS) and skills.

When do you really need to use Flash?

There are a lot of flash effects that can be achieved with jQuery.So when do you really need to use Flash instead of javascript?
Quite simply, when you need to do something that jQuery can't do. This includes video/audio, complex animations, cross-browser vector graphics, multi-file uploads, etc. The list goes on.
Of course, you could always write your website in HTML/jQuery and only use Flash for the necessary parts. That way it's a win-win situation, and your application degrades gracefully for those that don't have Flash.
Flash should be considered a 'last resort' in my opinion, and it's one that is shared with many others. Some people use flashblock, so they'll never see it. Users on mobile devices won't see it either.
There are few areas left for flash currently, and HTML5 will likely eliminate one of them.
Only when I have no choice...or asked by my boss
Flash features:
Compiled byte code versus interpreted
2D and 3D geometry libraries
Animation and audio libraries
Total control over Fonts/layout/design
Binary network calls as well as Xml and JSON
I'm not crazy about Flash for brochure or forms sites but it sure is nice for online games.
If your dislike of Flash comes from a dislike of Adobe, check out the Haxe programming language. It can target the Flash runtime.
if you need something which cant be done by JQuery then go for flash. otherwise stick to JQuery.
It is good for times when you want to make screen scraping harder. A major real estate site I worked with used Flash to make it much more difficult for a competitor to scrape agent data.
Sure this could of been done with images but Flash was just easier for us to implement.
Flex, which runs on top of Flash, is a very nice platform for building applications. In my opinion, it's far better than trying to coerce HTML and JavaScript into being a platform for GUIs. Also, if you have a graphics designer, they will have a much easier time designing the look and feel with the WYSIWYG tools available in the Adobe tools.
However, for traditional web sites, I'd stick with HTML/CSS/JavaScript. Don't use Flash if all you need is simple effects.
Flash is a frontend tool that should be considered when there are requirements that make a project much easier to develop. I know that there are alot of Flash haters, and I understand the reasons. However, each developer should use the tools available to them that would allow the job to get done effectively and quickly. PHP, HTML and JS have its limits, just like AS3 does as well, but each has something that can help deliver a project.

Categories