How to record audio in a mobile browser? - ios

I would like to record audio in the browser on iOS and Android.
What are my options right now (oct. 2013) ?
How fast is WebRTC being adopted from the different browser makers ?

The MediaStream Recording API is implemented in Firefox Beta on Android, but not yet in Chrome (though their is an Intent to Implement).
simpl.info/mediarecorder
You can also try recorder.js with Web Audio: http://webaudiodemos.appspot.com/AudioRecorder/index.html.

Related

Recording Video HTML5 not working in Safari and iOS mobile app

I am trying to use the HTML5 video - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video to access camera on the device.
I am following this example - https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element to record the video.
It works perfectly in Chrome browser but does not seem to be working on Safari and iOS mobile app.
On debugging both captureStream() and mozCaptureStream() functions are undefined.
Any suggestions on how to fix this?
PS: Is this a known issue - https://bugs.webkit.org/show_bug.cgi?id=181663. Are there any workarounds? Thanks!
I don't think recording webcam as video is an available option on Apple devices.
It might be a licensing issue rather than a technical limitation.
It works perfectly in Chrome browser but does not seem to be working
on Safari and iOS mobile app. On debugging both captureStream() and
mozCaptureStream() functions are undefined.
Your link is recording into Google's own webM video which is a format not supported by Apple. The Safari browser cannot encode pixels as VP8 or VP9 to use inside webM container. Apple has an MPEG video license so for Safari, I expect MP4 to be their expected output (but is there a free H264 encoder inside Safari? Nope).
mozCaptureStream() is specific to Mozilla Firefox. Safari won't know/accept it.
captureStream() is not fully suppported on Safari. The missing part is the recording part.
Possible workarounds:
Try enabling MediaRecorder API in Safari settings.
Research (double-check) for known issues, like as mentioned at bottom of this read this article: https://blog.addpipe.com/safari-support-on-macos-beta/
If you can draw webcam to Canvas then consider bringing in your own (Javascript-based) H264 encoder (for MP4 video) or VP8/VP9 encoder (for webM video).
You can try: https://github.com/TrevorSundberg/h264-mp4-encoder.
Wait for webCodecs API to be added to Safari. Note in Chrome/Edge you can just use the built-in webCodecs API to encode video for MP4 or WebM formats. Safari has no free encoders and thus has no webCodecs API.
I've been banging my head on getting captureStream to work on iOS (Safari and Chrome, same results) to no avail. This reply by #VC.One helped me stop trying to use webM format, which was used by the sample code I was following from mdn which is here... https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element
So I simply switched to mp4 instead of webm, using .srcObject instead of .captureStream, and now I have things working on iOS. I still have a lot of clean-up to do, but when my solution is finished I will make a nice write-up and post back.
Also, someone pointed out that I needed to use the onloadedmetadata with the play method, in order to get a video element to show a real-time feed of bytes from getUserMedia, and that worked. Then I just needed to store the bytes somewhere that iOS will not freak out about (it does not support captureStream) and then it all came together. It definitely seems to be a licensing issue at the heart of it all, which is why this works using mp4 instead of webm.

Disable the audio autoplay policy restriction on mobile Chrome on iOS?

I need to be able to autoplay sounds for a specific web application. As the application is being used internally I have access to the devices and would therefore like to turn off the autoplay restriction for audio on mobile chrome for iOS.
Are there any settings for that?
There is a policy AutoplayAllowed for this purpose: https://dev.chromium.org/administrators/policy-list-3#AutoplayAllowed
But it doesn't work anymore on iOS:
Policy Support on Chrome on iOS is being removed in Chrome 48 as part of Chrome's move to WKWebView where supporting many of the policies was not possible.
Source: https://dev.chromium.org/administrators/ios-mdm-policy-format

Record audio only in browser on iPads

I am working with a school group that has a Django website with a page that allows the users to press a button, record audio, and save this audio to their user pages. This website was built to work on computers and Samsung tablets with Dolphin browsers using the HTML Media Capture to capture the audio by launching the microphone app on the tablets. The group wants to now switch to iPads. I have been researching ways to launch the microphone app from iPads but it seems this is not possible using HTML5. I have done some research and seen the links below, but I don't know what the best strategy is to modify the existing website to make it work on the iPad.
What is the best way forward to allow this group to record audio (not video) from their iPads using a browser-based website?
Research--
http://caniuse.com/#search=getUser - shows getUserMedia will not work on iPads
http://www.html5audio.org/2012/11/capturing-audio-on-ios-6-via-the-videotag.html - looks pretty hacky, does it work?
How to record and play voice in ios6 using HTML5 - using PhoneGap might work, but how would the recording app be launched from the browser and then save back the audio to the users account?
Thanks,
Lee
After having the same problem for a year, I found a new article with a solution: How to record audio from a mobile web page on iOS and Android
One of the newer APIs available is the MediaRecorder API. My first attempt at building this application started with this class. I implemented the entire application and it worked great on my desktop. It was easy to capture audio and the data was already compressed into .ogg format and ready to ship to my server. Then I tried it on iOS. It turns out that the MediaRecorder API is not supported and wouldn’t meet my needs. After I stopped cursing Apple, I began again from scratch.
... That was the last piece of the puzzle that allowed me to construct a working demo and it revolves around three steps:
1. Capture the microphone so we can begin recording
2. Accumulate captured audio data into a series of byte array chunks
3. Combine the chunks into one large array and massage the array into the format of a .wav file
There is a bunch of code on the website. And here is the demo file: https://www.gmass.co/blog/wp-content/uploads/2018/03/wzrecorder.zip
I have tested it and it works on iPad.
Demo: https://q2apro.github.io/wzrecorder/
Safari iOS does not (yet) support the accept="audio/*" part of the <input> element even though it does support taking videos and images through HTML Media Capture.
<input type="file" accept="audio/*" > on iOS 10 will prompt the user to select between:
Take Photo or Video
Photo Library
iCloud Drive
More...
The same code works just fine in Chrome on Android.
Safari in iOS6 was the 1st mobile Safari to support the <input ... > element and I've tested all the way up to iOS10. Chrome on iOS uses the same rendering engine so the same limits apply.

How to stream live audio from iOS device to Wowza media server?

I'm trying to find out how i can use wowza media server(which i just installed) to receive a live audio stream from an iOS device(Xcode simulator) and play it on a web browser(safari) using http live streaming. i just need direction, guidance or a tutorial to start with this, or just the basic concept of how it works.
sorry for the newbie question, but i really really did try digging up the documentation, their is nothing about iOS http live streaming specifically, they concentrate more on Flash streaming(flv).
Thanks.
Use Wowza's MPEG-TS capabilities
There are a couple of Google hits and topics on the Wowza forums. This one looks fine for getting you started: Using an MPEG Transport Stream (MPEG-TS) encoder with Wowza Pro (MPEG-TS).
You can then just click a simple link in Safari on iOS devices and it should work fine. The like will look something like:
http://myserver.com/appName/myStream/playlist.m3u8
Wowza recently released an addon called "Gocoder". By using it you can encode your live streaming from wowza supported ios devices and broadcast it to any screen.
You can download the encoder from here
https://itunes.apple.com/us/app/wowza-gocoder/id640338185?ls=1&mt=8
Here is the step to configure the Gocoder addon with live application
http://www.wowza.com/forums/content.php?500

voice recording with silverlight

How can you record voice in silverlight? Are there any examples showing voice recording in silverlight?
Silverlight has no microphone / webcam support. You can however record voice in 'Silverlight' via Flash and Javascript.
See the following link...
http://russellgreenspan.blogspot.com/2009/01/microphone-access-in-silverlight-via.html
Go check out the new Silverlight 4 Beta, microphone and web-cam support have been added. Final release is due in early 2010.

Resources