I have been working on a mobile web application just for my own enjoyment and research. Everything seemed to be working pretty slick with HTML5/CSS and JavaScript for the client application, although it looks like I need a third party technology for voice recording. I had a pretty good solution working with Flash, but after testing it with my IPhone, I had remembered that they don't seem to support flash which is disappointing because I had a pretty good solution going. I want to record voice using HTML5 in Iphone and android. Is there any way?
You could try HTML Media Capture. An article on dev.opera says:
Android OS 3.0 was the first platform to provide HTML Media Capture
support, via its default Android Webkit browser. Now HTML Media
Capture is also supported by:
Safari and Chrome Mobile for iOS 6+
Chrome Mobile for Android OS 3+
Firefox Mobile for Android OS 3+
Opera 16 for Android OS 3+
Nonetheless some of them only partially implement the specification or
implement an older W3C specification, that makes the code above
slightly different:
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
It links out to a demo page which you could try on your mobile. I also found this example page. In my quick iOS 7 testing though, it only worked correctly for photos and videos.
Edit: Further reading suggests accept="audio/*" isn't actually supported on iOS 6 and 7, only accept="image/*" and accept="video/*".
Update: A quick test on iOS 8.3 suggests nothing has changed here: accept="image/*" and accept="video/*" are supported, but accept="audio/*" is not.
Update: A quick test on iOS 10.0.2 suggests accept="audio/*" is still not supported, although it looks like you might be able to upload an audio file from iCloud Drive or Dropbox now.
Update: Despite what it says in the Webkit blog post, there still seems to be no support for accept="audio/*" in iOS 10.3 on my iPhone 5S.
Update: Same story in iOS 11.0.3. There still seems to be no support for accept="audio/*" on my iPhone 5S.
Update: Still the same in iOS 12.4.3. There seems to be no support for accept="audio/*" on my iPhone 5S.
This will not work on a website, but if you want to rework your web-app into a mobile app using Cordova this will let you use the microphone input. Takes some knowledge of web audio api to get working.
https://github.com/edimuj/cordova-plugin-audioinput
And RecorderJS to record its output:
https://github.com/mattdiamond/Recorderjs
Someone above mentioned RecorderJS not working on mobile but it does, it's just the mic input that doesn't work.
There is not currently any way I'm aware of to record mic input in a browser on mobile
You can use HTML5 WebAudio API.
Introduction to audio and video capturing Capture audio & video in HTML5
Nice Library to record audio with samples Recorder.js
On webkit-browsers i.e.Chrome and Safari in iOS you can use the get user media api with webkitGetUserMedia.
Details can be found here :
html5rocks
Related
In my sample ReactJs application I am using react-multimedia-capture - which uses navigator.mediaDevices.getUserMedia and the MediaRecorder API to record video.
I am able to record video from Chrome, but in Safari I am unable to capture the video. The error is something like
MediaRecorder is not defined.
Could someone please help me out like:
Does Safari supports basic video capturing?
Safari is currently not supporting MediaRecorder API by default, but you can enable them from Develop > Experimental Features > MediaRecorder.
The way to record video from safari is to use peer to peer connection and capture video at the other end.
There are few open-source application and third-party services which offer this and they are quite stable.
If you are only going to support recording from mobile, you can use HTML5 file API, which will pop up the camera in a single click. you can trim it for specific duration using ffmpeg or azure media services.
<input id="videoFile" type="file" class="hidden" accept="video/*" capture="">
Just make sure to save this file as .mp4 with the use of JavaScript to make it playable across every device or with <video> tag.
var file = $('#videoFile')[0];
var blob = file.files[0].slice(0, file.files[0].size, 'video/mp4');
var newFile = new File([blob], 'video.mp4', { type: 'video/mp4' });
In latest Safari you can enable MediaRecorder from Develop menu.
Try this Cam Recorder HTML5 demo that also provides detailed instructions for Safari.
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
I've covered supported/unsupported features in this article.
Hopefully, a more complete implementation will make it's way soon to Safari 12.x on macOS and iOS.
Octavian Naicu
A basic implementation of MediaStream Recorder API has just been introduced in Safari Technology Preview 73 on macOS (Jan 2019).
Did you try video recording on Safari IOS 12.2?
Why does upload image via camera work on mobile-safari but not as iOS PWA?
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.
I am working on a english learning website. One part of our service are voice recording and grading. We use getUserMedia API to get users voice, and it works fine on PC browsers and iOS safari, however, it couldn't work on iOS Chrome.
In caniuse compatible table, there is no iOS chrome item so I'm not sure is it possible to use this API on iOS chrome. Is there any other methods or APIs to get users voice on iOS chrome?
Unfortunately, you're probably out of luck. iOS keeps very strict limitations on what alternative browsers can do. This means that other iOS browsers like Chrome, Opera, etc. don't have access to many of the native features that Safari has.
have developed a small video chat application using Webrtc . it works exactly fine in my other set of browsers (chrome,firefox,opera)... but it doesnt supports Safari .. please can one help me out in this,to make my application support Safari to
Unfortunately, Safari doesn't support WebRTC and you can't do anything from JavaScript.
Although you can instruct your users to install a Safari plugin to enable WebRTC support, like https://temasys.atlassian.net/wiki/spaces/TWPP/overview.
Good news everyone, things are about to change.
Apple announced support for WebRTC in Safari 11.
You can download the latest beta version of Safari 11 at the following link:
(You need to sign in with your Apple ID) https://developer.apple.com/safari/download/
I'm trying to get SoundManager2 to work on Android, but so far it will not play any audio. Does anyone know if there is any way to get this to work on Android without flash being present? If so, please could you provide an example or a page that discusses the issues around this.
Verify that html5 audio support is there in 2.2 by going to http://html5test.com/
I have Froyo (2.2) on Milestone and the page says audio-element: yes but No to PCM, mp3, AAC, Ogg, WebM. This is probably the reason why it is not working.
I assume that you are using the latest version of SoundManager2 (V2.97a.20110306 - HTML5 audio updates, Flash/HTML5 mode detection, IE flash init tweaks, reuse and instance options fixes). The revision history says "HTML5 audio: If no flash, try forcing useHTML5Audio = true (eg. desktop
safari on new Macs which don't come with Flash.) Related: flash detection code tweak."
But it is better to explicitly specify soundManager.useHTML5Audio = true; in the script or useHTML5Audio :true when you call soundManager.createSound(). This will ensure that SoundManager2 is not the reason why html5-audio is not working.
I visited the http://html5test.com/ on my Galaxy S2 from T-mobile in the default web browser provided by Google (on Android 2.e.6). It said 189 and 1 bonus point out of 500 points. It also said it supported mp3 playing. The REAL test came when I actually visited the soundmanager2 website at http://www.schillmania.com/projects/soundmanager2/ on this same phone and tried their demos. The examples do NOT work on my phone. Oh well.