I have a Flash app that I'm looking to port into HTML5. The app allows the user to take photo of themselves and then gives them some Bitmaps to overlay, scale, position over their face (like a beard or whatnot) and then saves the newly produced image out to a PHP listener.
I wrote the original, so, I can port the bulk of it pretty easily, but have no idea how HTML5 tackles the usage of the computer's camera and can't seem to find anything online that points to this.
Any help greatly appreciated.
There is a W3C Device API that will allow capturing data from the camera. However, I am not aware of any browser supporting it. This appears to be a future implementation. But, one I think will become reality soon since Adobe just gave Flex to Apache http://incubator.apache.org/flex/.
Once the Device API is implemented, it will be accessed via getUserMedia. To see where they are in completing the spec, take a look at the public mailing archive: http://lists.w3.org/Archives/Public/public-media-capture/
More can be learned here: http://www.w3.org/2009/dap/
i dont think a camera api is exposed to html5. You will need to use a flash or silverlight shim.
Unfortunately, you will need a small flash app to access the web cam, and expose that data via the HTML5 canvas.
Here is a lightweight jquery plugin:
http://www.xarg.org/project/jquery-webcam-plugin/
Related
I am but a meager systems guy and this seems to be a programmer's domain so be gentle. This is my first post on this site.
I work at a high school and for our presentation software for announcements and such we use XSplit. This is similar to OBS and allows us to use a green screen. To share it with the rest of the users on the network, XSplit has a built in webserver which lets users visit a persistent URL and view the the live stream in Flash.
Since Flash is now slowly being shunned by Chrome and will likely go that way with all browsers, the logical next step for anything using Flash seems to be to get to HTML5.
So here I am, trying to get from Point A (OBS/XSplit/presentation software), to Point B (HTML5 code on a website doing .
OBS and XSplit can be output to existing streaming services like Twitch, YouTube, etc. but these lack certain privacy requirements, or persistent url requirements we have. Alternatively you can output to RTMP, but this of course cannot be fed directly into HTML5.
I believe I have to get my RTMP stream somehow converted into something else before I can plug it into HTML5, but not sure what the best thing to use is, and how much coding I would have to do, as I am not a coder.
There is another thread on this, but doesn't have a whole lot of info for dummies like me. Has anyone here successfully accomplished what I'm describing? Or know of a tutorial for this adventure?
Thanks
This will be difficult to do without a coding background, or budget to use a commercial product. What you need to do however is set up and nginx server with the rtmp module, use that to convert rtmp to dash, then use something like dash.js, to build a web player. There are may places online that describe how to do this.
Alright, well, I figured it out. It's probably not the cleanest way to do it, but it's a 'for dummies' way of doing it without having to get into too much coding/command line. Here it is for anyone who lacks coding skill but would like to accomplish what I was asking about:
First of all follow this guide https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/ to get to the point where you have your OBS/XSplit type software viewable as rtmp://yourip in VLC
In VLC, using the Stream feature where you pick your rtmp://yourip as your source, and HTTP as the destination, and Theora + Vorbis (OGG) as your selection for the stream to be transcoded to.
Simply take your new http://yourip:8080 stream and plunk it into a
video width="720" src="http://yourip:8080" autoplay
type="video/ogg; codes=theora" /video" or something similar and you should be able to play it in Chrome, at least. (Dunno how to post that with the < things)
I'm sure there's some optimization to be done but seems to play pretty well.
Again, probably better ways to do it especially if you're dealing with people using different browsers/mobile devices, etc. But for my purposes where I just need to get a bunch of people on a local network using Chrome to view a stream which isn't Flash based, this does the trick.
I'm working on an HTML5 radio player in Meteorjs. See http://radio.meteor.com/ or http://github.com/guaka/radio-meteor
I want to display the song that's currently playing. How can I do that?
I'm not sure if resorting to server side would be a great idea as the server would have to fetch metadata for a growing number of streams (I want to allow people to add more channels).
Browsers compatibility is not that much of an issue, as long as it will work in Phonegap. I don't care about all browsers (i.e. IE) as long as I can make it fails gracefully.
I think Pulling Track Info From an Audio Stream Using PHP might be an answer than can work for Meteor (server side).
It should be possible via filereader on the client end, browser compatibility would be a bit of trouble.
Have a look at:
http://ericbidelman.tumblr.com/post/8343485440/reading-mp3-id3-tags-in-javascript
Maybe not actual now, but can help somebody else. I use this one package to getting metadata about streaming audio
Is it possible to use Web Audio API server-side (e.g. in Node.js)? I'd like to process "offline" my audio files in order to apply audio effects (https://stackoverflow.com/a/8101383/553341).
Have a look at https://github.com/sebpiq/node-web-audio-api
Most of the AudioNodes are not implemented, but in the future it might become useful.
Not at the moment, no. You'd basically have to adapt the webkit source code and do all the plumbing yourself.
I've been given a task where I must generate a PDF file, then the customer performs an electronic signature in a certain area on the document.
It will be used on a tablet (I don't know much about it). It must be also be a part of web application, and I've been told that HTML5 can handle this nicely.
Could anyone give me a tip how to start working on this? I have hardly any experience with HTML5.
Sorry for the "very" late reply but I got the same work recently
I am using sencha 2 touch, in which am using a PDF viewer in js Itself try this
https://github.com/SunboX/st2_pdf_panel
For the signature part try using this
https://github.com/SimFla/SimFla-signaturePad
mind you signature pad needed a lot of changes.
else another solution would be using Mozilla's pdf.js, display that on the canvas and use the same canvas to draw on the signature.
Thanks. Do share if you have already solved this.
There are also commercial solutions, with an API that allows integration into your environments. Check out Namirial.com (former xyzmo), on www.xyzmo.com or www.significant.com
I have an HTML based application i want to add video conference any idea please. I want exact functionality like Skype. I have checked Skype API but it does not support video in HTMl. Any idea how i can implement in java script of Java.
You will probably have to work with node.js for setting up a bidirectional client-server-communication with WebSockets (some examples). If you haven't heard of it, you can think of node.js as serverside JavaScript.
You will also need (something like) the Media Capture API to capture video and audio devices.
Try googling some of these keywords and you will find tons of examples how to work with them.
Good luck!