Is there a way to detect whether a browser supports the HTML5 Media Capture API for a mobile website I'm building? I can only seem to find solutions for detecting getUserMedia() support.
I would like to be able to present mobile users one of two scenarios:
User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.
User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter.
User's browser supports the API, so two upload buttons are displayed, one activating the camera and one activating the image gallery.
There's no way (at the moment) to create 2 separate HTML buttons: one for (just) the library & one for (just) the camera (
I've covered all the possible HTML Media Capture options in this article)
Use
<input type="file" accept="image/*;"> and you'll be prompted to choose between capturing a photo or selecting an existing one:
User's browser doesn't support the API, so just one upload buttons is displayed, hopefully activating the gallery if their browser supports the accept parameter
Support is as follows:
Android 2.2+ and iOS6.0+ support the above code
Android 3.0+ supports capture and takes the user straight to the camera
iOS6 through 10 do NOT support capture (prompt is always shown)
desktop browsers do NOT support HTML Media Capture
Detecting support resumes to detecting the above browsers.
Support reference: this 2013 O'Reilly book and my testing
You can use modernizr, on the docs page you can see in the table of features supported and detected that they detect both the HTML Media Capture and also the getUserMedia
Related
I'm building an audio chat web application using WebRTC. So I trying to build that if any external audio device get plugged-in to the system my application automatically start using that microphone and when that external device plugged out application start using system default microphone (as Hangout do).
Is there any event that notify me about device plugged-in plugged-out information?(For chrome browser)
Is there any way to know which device to use in all the listed device that we get from browser so that we actually get an audio? (For example as in desktop systems there are two microphone jacks one in front-side another in back-side so when get Media Devices in browser we will get both jacks as device, but how to choose between both jacks that in this particular jack a microphone is plugged-in)
How system choose default device. Is it good to use always default device?
What is the difference between default and communication devices that browser provides?
(1) in the spec, a devicechange event is fired on the navigator.mediaDevices object. That is not yet implemented in Chrome. You can poll navigator.mediaDevices.enumerateDevices which has a performance impact however.
(2) enumerate the devices and look at their labels? See this sample
Reading its documentation one might think that it uses HTML5 especially if focusing on this text:
The widget uses HTML5's postMessage support to send messages back to
your website regarding videos uploaded via the widget.
In addition, when I read the "Note" where it says it loads the same JavaScript file as the IFrame Player API, I thought it really does use HTML5 as the IFrame player API do.
However, when I try the widget on a mobile device I was presented with a "You need to upgrade your Adobe Flash Player..." error. Unfortunately, both iPhone and Android devices do not support it.
So the question is, does the widget use a Adobe Flash or HTML5. If the latter, can it be controlled via settings that was not defined in the doc?
As mentioned in your question, the Youtube Upload Widget uses
HTML5's postMessage support to send messages back to your website regarding videos uploaded via the widget.
So yes it's using HTML5 for this task, but for the video capturing part, the widget uses flash and that's why in mobile or even in desktop browser with flash player disabled, you will get the message that invite you to install flash player.
For the widget parameters, there is nothing, in my knowledge at least, to force it to load a HTML5 version which, I think, didn't exist yet now.
Hope that can help.
The web app I'm building has audio notifications and a video conference option, so the user normally is going to have speakers and a headset connected to the PC, my client wants that the audio notifications will be played in the main speakers, and the video conference can be done using the headset.
Right now I'm using all html5 for audio and webRTC for video conference, I couldn't find any info about how to do this. May be with flash but not can't find this either.
Solutions in this space are emerging via the use of WebRTC. You can see a sample of a working solution at https://webrtc.github.io/samples/src/content/devices/input-output/
Browser support for this is limited right now though.
Actually sound output is only on Oslevel ... you may have to read about the chrome.audio API which still on experimental level ...
"The chrome.audio API is provided to allow users to get information about and control the audio devices attached to the system. This API is currently only implemented for ChromeOS. "
I thnik this would help if it was availble for all OS so you could redirect sound using this API ...
As exemple of some methods from this API i can list :
getInfo − chrome.audio.getInfo(function callback)
which return all audio output and input devices
setActiveDevices − chrome.audio.setActiveDevices(array of string ids, function callback)
which sets the active devices to the devices specified by |ids|
The problem is Chrome.audio API is only for ChromeOS and sounds output is controlled by other OS... that's it two parallel lines..
Simply do this in your javascript code.
audioElement.setSinkId(deviceId);
There is now an HTML5 audio device redirector Chrome extension called AudioPick. The website is here: https://rain-fighters.github.io/AudioPick/
This is OpenSource under the GNU public license, with a Github repo.
There are some limitations (no Flash sources, and some types of HTML5 sources also will not be found), as indicated on the homepage.
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 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.