I have a website requirement , users can able to record video (with sound) and upload to server.
First i think about flash and red5(media server) but found that flash does not support IPAD or iphone.
Now am think about HTML5 video recording, but somebody told me that html5 video recording still in beta and not stable and it does not support all browsers.
Please advice which is best , help is highly appreciable.
Thanks,
To upload a video from an iPhone to a web server, you can use an <input> tag. This will prompt the user to record a video which will then be selected as the file to upload.
<input autocomplete="off" type="file" name="video_file" accept="video/*" capture />
Wrap this in and you can change the appearance of the tag to look more like a video recording button.
There's simply no way as of now to do video recording through mobile browser. Potential solution is
Direct mobile browser user to appstore/google play and encourage to download a dedicated app (downside - you have to write it ;)
Allow for file upload from mobile device (user uploads prerecorded video). File uploads are supported from IOS6 only. Not sure about Android.
Use flash where possible (a challenge in itself).
Hint: would I accept such requirement as a contractor/agency etc? Nooo! Never ;)
Related
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.
I need a front-end solution to record audio, but as users do not always use the most modern browsers, flash fall back is necessary. I am looking for an auto-fallback library (such as html5/flash player) to let users record their voices online.
I searched around Google but can't find a satisfying one. Any recommendation?
Thank you so much
Audior is a flash based solution that can record raw audio from your mic, convert it to mp3, give you the mp3 file or upload it to the web server. It keeps the audio in RAM until it's uploaded or saved on your computer so it's not suitable for long recordings where you will loose the data if your browser crashes.
FLVAR is a different flash based solution that, as you record, streams the recorded audio to a media server (Wowza, Adobe Media Server or Red5) where it is saved in .flv files. The codecs used are those native to Flash Player: Speex or NellyMoser's ASAO. Because the data is streamed as it's recorded, FLVAR is well suited for longer recordings.
HTML Media Capture can be used as a fallback on mobile devices. It works by extending the <input > HTML tag with a new capture attribute and you can specify audio or video. When recording the native recording app on the device opens up and the recorded media is attached to the form. It's well supported by all mobile browsers with the exception of audio only recording on Safari for iOS, it only supports audio+video not audio only.
Here's the HTML Media Capture implementation/process for video on iOS. :
The process is similar on Android devices for audio. HTML Media Capture is not supported on any desktop browser.
The only cross browser solution for non Flash audio recording on desktop browsers in the foreseeable future is the MediaStream Recording standard.
MediaStream Recording is a recent proposal by the the Media Capture Task Force for a JS API who's purpose is to make audio and video recording in the browser very simple. It's currently implemented only in Firefox 27 and for audio only. This article covers the standard in more detail.
I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.
In my web app (not native app) for mobiles, I want to take a photo and upload it, but I don't want to use Adobe Flash. Is there any way to do this?
In iPhone iOS6 and from Android ICS onwards, HTML5 has the following tag which allows you to take pictures from your device:
<input type="file" accept="image/*" capture="camera">
Capture can take values like camera, camcorder and audio.
I think this tag will definitely not work in iOS5, not sure about it.
Just to update this, the standard now is:
<input type="file" name="image" accept="image/*" capture="environment">
to access the environment-facing (rear) camera, and
<input type="file" name="image" accept="image/*" capture="user">
for user-facing (front) camera. To access video, substitute "video" for "image" in name.
Tested on iPhone 5c, running iOS 10.3.3, firmware 760, works fine.
https://www.w3.org/TR/html-media-capture/
Nowadays at least with android it's relatively easy. Just use normal file input tag and when user clicks it the phone will ask if user wants to use camera (or file managers etc..) to upload a file. Just take a photo with the camera and it will automatically be added and uploaded.
No idea about iphone. Maybe someone can enlighten on that.
EDIT: Iphone works similarly.
Sample of the input tag:
<input type="file" accept="image/*" capture="camera">
Safari & Chrome on iOS 6+ and Android 2.2+ support HTML Media Capture which allows you to take pictures with your device's camera or select an existing one:
<input type="file" accept="image/*">
Here's how it works on iOS 10:
Android 3.0+ and Safari on iOS10.3+ also support the capture attribute which is used to jump straight to the camera.
<input type="file" accept="image/*" capture>
capture="camera" (String) and accept="image/*;capture=camera" (Parameter) were part of old specs and were replaced by capture (Boolean) the W3C Candidate Recommendation.
Support documentation: this 2013 O'Reilly book and my testing
well, there's a new HTML5 features for accessing the native device camera - "getUserMedia API"
NOTE: HTML5 can handle photo capture from a web page on Android devices (at least on the latest versions, run by the Honeycomb OS; but it can’t handle it on iPhones but iOS 6 ).
You can use WEBRTC but unfortunately it is not supported by all web browsers. BELOW IS THE LINK TO SHOW WHICH BROWSERS supports it
http://caniuse.com/stream
And this link gives you an idea of how you can access it(sample code).
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
AppMobi HTML5 SDK once promised access to native device functionality - including the camera - from an HTML5-based app, but is no longer Google-owned. Instead, try the HTML5-based answers in this post.
You'll want to use getUserMedia to access the camera.
This tutorial outlines the basics of accessing a device camera from the browser: https://medium.com/#aBenjamin765/make-a-camera-web-app-tutorial-part-1-ec284af8dddf
Note: This works on most Android devices, and in iOS in Safari only.
It should be noted that security features have been implemented which require either the app to be ran locally under localhost, or through SSL for GetUserMedia() to work.
I discovered this when trying several of the demos available and was dissapointed when they didn't work! See: New Security Restrictions
I don't think you can - there is a W3C draft API to get audio or video, but there is no implementation yet on any of the major mobile OSs.
Second best The only option is to go with Dennis' suggestion to use PhoneGap. This will mean you need to create a native app and add it to the mobile app store/marketplace.
I don't know of any way to access a mobile phone's camera from the web browser without some additional mechanism (i.e. Flash or some type of container that allows access to the hardware API)
For the latter have a look at PhoneGap: http://docs.phonegap.com/phonegap_camera_camera.md.html
With this you should be able to access the camera at least on iOS and Android-based devices.
Our company is making a mobile version of our website. We have several product videos we want to show on the mobile version.
When I try to use
video
I get sound playing but a black screen on my htc incredible android os phone.
I'm thinking that the video is playing but in a different browser window. I need it to display all in one window without having to switch to a different window.
I tried the html embed tags and get no video or sound at all, from what I've read these tags are not very realiable cross browser.
I also just tried the html5 video tags below. I get an icon identifying that it's a video file but it doesn't play.
<video src="video.wmv" controls="controls">
your browser does not support the video tag
</video>
Is there a special format the video file needs to be in? Should I be using the href or embed tags, what other options do I have?
If it helps to know, I'm using the mobile doctype on my webpages.
Thanks
The video format you need to send to the browser varies by browser. Firefox supports Ogg Theora, everybody else seems to support H.264 in an MPEG-4 container (MP4 file.)
See here for an example: http://html5demos.com/two-videos
In any case, WMV won't work.
Android doesn't support the WMV format normally. Here is a list of the supported formats:
http://developer.android.com/guide/appendix/media-formats.html
If iPhone/blackberry/etc don't have a format in common, you may need some javascript magic based on the user-agent to choose which file to embed.
I've found a simple solution to my problem. YouTube. Upload videos on youtube that need to play on your mobile web site and they work. PERIOD.
No fuss! Just copy the embedded URL from the YouTube video page to your mobile page and your all set to go.
I'm not exactly sure how YouTube makes the videos compatible.I'm guessing when uploading the video it's automatically converted into several formats so that the right codec / container is played based on what smart phone is accessing the page.
This list is not extensive and I'll probably think of more later, but comment if you can think of any more advantages or disadvantages of using YouTube for mobile videos.
Advantages:
++ YouTube is universally accepted amongst most major smart phones (therefore your video should play!).
+ If you have limited bandwidth you don't need to worry about wasting any bandwidth of your own.
++ Easy to setup, little to no configuration (setting video resolution). It just works! (encapsulation...)
Disadvantages:
- YouTube symbol during video play back
- It's not hosted on your hosting service. May not be tracked by some analytic services. (requires custom tracking? onclick java-script event?)
- YouTube bandwidth may not be acceptable for smooth replay? (although from initial video viewing bandwidth seems acceptable (minimal buffering...), but not confirmed...). Probably mostly dependent on the cell phone 3g / 4g connection quality.
- limited video file size / resolutions? shouldn't be a problem because you'll want a lower quality video for smart phones.
I would like to know exactly how YouTube make it's videos compatible with smart phones so if necessary I could host the videos myself, but for now this seems to be the best choice.