I need to capture an image from a webcam (tethered camera, etc.) into a form or html5 canvas so that I can save the image to the server. Also, I would like to be able to preview the image live in the page.
For example, I have a browser running at a registration check in station. I would like to take a picture of the attendee currently standing in front of the table, and submit that image into the database. Then I can use that image to print the attendee's badge with their picture on it.
I'm using rails and paperclip, though I doubt that matters.
Anyone done this before, or have some ideas how to do it?
There is a plugin for jQuery entitled 'jQuery Webcam Plugin' that provides a friendly and easy way to interact with a webcam. It actually relies on a small flash component (unfortunately), but it does a great job of making the interaction easy - as well as providing functionality to copy imagery direct into an HTML5 canvas.
Again, it's unfortunate that it relies on Flash, but I think any reliable solution is going to need flash at this point in time.
The plugin is available here: http://www.xarg.org/project/jquery-webcam-plugin/
At present, if you want to interact with a web cam from a web page you need to look at using a plug in. Flash has a mature interface to web cams, so it would be my first choice of tool.
There used to be a spec for native web cam support in HTML 5, but it has been spun out into its own, independent, specification. Currently there is no browser support for it outside of experimental Opera builds.
Android >=3.0 (on plenty of tablets and one phone soon) is supposed to support this. Searching for "html media capture" and "device api" will get you a lot more information.
On the not-even-alpha bleeding edge side, there are things like webrtc and the mozilla rainbow plugin.
Related
I want to record user Video with Webcam and save the recorded video to Server, using Ruby On Rails, which should work in all browsers .I have tried the below approaches, which did not solve my problem.
http://www.html5rocks.com/en/tutorials/getusermedia/intro/ - tried and not able to play / save the recorded video
http://www.xarg.org/project/jquery-webcam-plugin/ - verified and does not seem to support video recording.
http://nimbb.com/ - is a paid one
Please let me know, if any body has a standard solution for this (which works in All / Most of the browsers, preferably an open source).
Any help would be greatly appreciated. Thanks in Advance!
This is a pretty old question, but just came across it and thought I would at least offer a solution to all future visitors who stumble across this question:
The MediaStreamRecorder API is currently unimplemented in chrome, however some users have found alternative ways to get it working by stitching together .webp images into a .webm video. Now, it might not be the best idea to use that experiment, but other projects have taken that idea a lot farther by implementing a cross platform library that implements that idea (and other browser specific solution) of which the first is aptly called MediaStreamRecorder. Another option is RecordRTC which I have used myself in the past of which one advantage is that they have some specific server side Ruby code to get it working neatly (not that you need it if you want to do a simple upload, but sometimes you might want to do more than that).
Recording video in the browser is mostly a client side affair so the fact that you're using Ruby server side will not impact the solution.
The only solution that works consistently across desktop and mobile browsers would be one that implements the following:
desktop: a Flash video recording client + media server
mobile: HTML Media Capture
Some notes on your links:
The HTML5Rocks article mentions the HTML Media Capture draft/standard which only works on mobile browsers
The jQuery webcam plugin uses Flash to access the webcam but it can't record video (it doesn't connect to a media server)
Commercial hosted solutions include nimbb, Pipe and ziggeo
Commercial self hosted solutions include HDFVR (which supports Ruby)
I'm working with a DirectShow application that exports as a Firefox plugin for video streaming.
To the best of my knowledge, it seems as though the plugin is being rendered on a separate window from the web page. I'd like to edit the application to allow html elements over the plugin much like flash allows with wmode='opaque' or 'transparent'. Another option that would work is to pass mouse events through the application (such as mouse move and mouse down).
I've been reading up on put_MessageDrain and put_Owner, but I'm not sure how to apply these to the application or if they will work.
I'm also aware that iframe shimming may work, but since I have access to the source code of the application I'd like to add the functionality directly rather than use a work around. Is iframe shimming my best option? It seems like the easiest option.
The application currently uses Windowless mode and is always on top of everything else on the web page.
The way video is displayed with DirectShow video renderers, you cannot make it transparent without providing your own video renderer filter, or custom allocator/presenter object for one of the standard video renderers. DirectShow renderers display video with DirectDraw or Direct3D surface which stands alone from hosting window and is not interacting with host in a way supposed to get you combined picture with transparent video and something else as well.
I've been reading up on put_MessageDrain and put_Owner
These are for Windowed mode, you seem to use Windowless which assumes that you are providing a hosting window and rectangle to cover opaquely. Renderless, the third mode VMR-7/9 and EVR offer you is the one where you provide allocator/presenter and override the presentation.
Windows SDK (for some you might need to look for an older version, not the latest) provides with samples: Renderless, VMR9Allocator, EVRPresenter which demo the renderless mode.
Coursera has these interactive questions in the middle of their video lecture
how could I go about implementing this myself,
or better yet, does this feature exist for public use somewhere?
Furthermore, I'm trying to decide which HTML5 video player / platform to invest in and the key criteria would be feature-rich (so as to not reinvent the wheel / spend lots of time implementing video player features) as well as highly customizable (for those custom needs).
I.e. which player should I use to get the quiz up,
but in the near future I would also need to add the speed feature that Coursera has
I need Closed Captions support
and would like to overlay slides every now and then
plus all the expected features of switching between different source resolutions (360p, 720p etc), it should work in IE, Firefox, Chrome, Safari, Android and iOS native browsers etc
Candidates
In terms of customizability and feature-set, SublimeVideo seems to come on top, but I don't know when they will support subtitles.
Haven't researched Flowplayer much, would that be better for my purposes?
Jwplayer is good for all the standard features, and includes subtitle support, but I haven't really seen any plug-ins, aesthetic skinning aside, deep customization does not really seem to be their focus / strength?
Or videojs
Or something else yet ?
Flowplayer and Jwplayer are amazing players and you could do what you want, but in the free version you can't remove their branding. I try to stick to opensource projects you you don't worry about licenses.
I've done something similar as you need with Mediaelementjs. It supports all you need at the moment, and they will support the variable speed at some point on the future as announced in their website. However it has been like that for more than a year now since I started watching, so probably your "near future" is before their "coming soon".
I think your best free option will be Videojs. They also support all you need. For the variable speed there is this plugin.
Basically you set up a listener in the timeupdate event, and when it reaches the point that you need, you attach the quiz html to overlay the video area.
I have used flowplayer extensively. I'm just now starting to dive more into their new HTML5 version. The licensing for flowplayer is reasonable. It does have a plugin for doing subtitles and the cue point functionality works great. I also like that they have the Flash version that works well for fallback and I still use it for rtmp streaming.
I have built a video presenter with synchronized slides using the flash version which I'll be changing over to have an HTML5 version. I use it to produce speaker videos with Powerpoint presentations. Sometimes we have surveys (live) so I have also been planning to build in the option for a survey slide.
You can take a look at what I have built as an example here (it has some lose ends). Example synchronized video slide presentation (I have no affiliation with Flowplayer. WebVideoDesk, branded on the linked page, is a service I am planning to launch someday.)
I have a jQuery Mobile website I created for a friend/client of mine. It only has 6 pages or so (2 of them are dialog windows). The site has HTML5 video with fallback for flash support via the videojs library. All videos are encoded properly in mp4, ogv (theora), and webm and so far play on every device I have used.
My problem lies bandwidth, the purpose of the program really needs to be an application because these are informational videos that may need to be viewed at any time, even with no web access (web access is required for first login to verify credentials).
I was left with 3 solutions, try writing native apps for all the platforms myself in their native languages, use Sencha Touch (which I am comfortable enough with extJS to do), or taking my existing jquery mobile app that is 100% functional including log-in and some backend package management to assign users a package of videos (there are multiple packages each with between 8-20 videos), and follow the jQuery Mobile tutorial for getting your app ready for PhoneGap, I believe its only enabling two settings, and both are to enable "cross-domain" requests, since my current web app would be running as localhost, it would see the scripts as external pages.
My main question/problem is for one, I have never used PhoneGap; aside from their Hello World android tutorial, and I know there are other all-in-one frameworks out there now: PhoneGap, Titanium, Corona, Adobe Flex (which I am installing while writing this tutorial, to see what it has to offer. If it has features like encoding videos automatically for the target device (video resolution changing), or even has local video playback features at all that may work.
Does anyone know which of the current frameworks have the ability to install a set of videos to the sdcard, (totaling around 6mb per install), and play them natively (by that i mean, in the devices native player, not inline inside of a webview). Which on android phones anyways, my current videojs based player plays the files natively in everything I have tried it on.
I just need a push in the right direction, if there is a PhoneGap plugin that I don't know about that allows videos to be played from the sd card, that would be terrific. Although I am not very happy with the speed of the android and blackberry webview controls. So something that uses 100% native controls would be great. I hope you guys can come up with some ideas, you can see the current app in action at m.yourvideobenefits.com email:abc#tool.com password: demo
You should view it from your phone if you want to see it properly, but if you do not have a smart phone; keep in mind that when viewing this page certain desktop browsers, the videos become their actual size after they are through loading. This is because i have autoload="true" in the video tag (which is ignored on most phones, but believe it or not, setting autoload="true" is what actually allowed the videos to not play inline on certain devices. A bug on the device, I am sure...but without this tag the videos played inline on iPhone 4 with the latest iOS version.
You could do it very easily with phonegap; you already have your web page, so it would be much less work, probably.
You could get the videos from inside your apps bundle in ios, and then it wouldn't be hard to select the one with the best resolution for the device being used. You could also download the videos at the perfect format and resolution the first time your app plays from your server using the file api. That convined with the storage api is nice for actualizations.
There's a plugin I use for android, because video tag is sometimes bugged or doesn't work at all in older versions, https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer.
It only plays from web or sdcard, but that's rarely too bad.
I can't help you with black berry, but I'm pretty sure there must be a way of doing it. And, anyway, appcelerator doesn't support it yet, so you would probably had to do it natively. Even if there isn't a plugin for black berry, you'd probably have to chose between native developement and html5 player inside phonegap. I won't give you my opinion about it here, for I'm not the one to give it and Stack Overflow says I shouln'd give it anyway.
I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.