I've implemented a mobile web page that allows users to record a video and upload to a server. I've used the HTML5 media capture input method:
<input type="file" accept="video/*;capture=camcorder">
This launches the camera as expected and I can proceed through the upload process. However on iOS I can only record 1 minute of video footage.
When I've done something similar in a native app there is no limit to the length the recording.
Is this a limit set by default on iOS due to memory and is there any way to change this?
I've searched everywhere but can not find any information about iOS limiting the duration of a video recorded via a mobile web app.
It might have to do with how much RAM is on your device and the video quality set in your device's Photos & Camera > Record Video settings. These are the options on an iPhone 6S (2G of RAM).
Higher quality video takes up more RAM/minute, at least until the video is uploaded to the web server.
Once recorded the video is compressed and uploaded. I've written an article of how Safari on iOS compresses video when recording through HTML Media Capture.
PS: There is no way to specify a limit mentioned in the HTML Media Capture Standard.
Related
I'm making screen recordings of an in-house web app, using iOS Safari and the built-in iOS screen recorder. No audio is recorded. If I enable microphone recording, the audio is recorded but poorly and mixed with room sound (likely recording the device's speaker). The same is true of native apps with WKWebViews.
I'm curious what's happening here. Is Safari/Webkit actively blocking audio recording? Is there a Javascript or Webkit instruction to enable audio recording?
Note that I'm not trying to get around any protection from recording commercial videos, just sounds generated from my own site/app, in order to make promotional videos. So changes made within my app or web site are fine.
Disable microphone audio and connect the device to an external audio source (e.g. headphones).
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.
I'm writing an IOS-App which should record video, using front camera, and audio of the user working with the app. Later I want to analyse the user behavior offline. This App should run on an iPad 3.
Remark: The observed users will be people form my office. Code & data is only needed for the development process and won't be included in the final APP.
My requirements: Video and audio should be uncompressed, at least audio must be uncompressed. I think uncompressed video recording without skipping frames is not possible on an iPad (See: where can i find an uncompressed video recording from iPhone 3G/3GS/4 ), but uncompressed audio is possible.
Here are my questions:
Is it possible to record a video (compressed) and audio (uncompressed / kAudioFormatLinearPCM) simultaneously?
Is it possible to save video and audio in seperate files?
If one of the two questions is YES then what should I do in AVCam-Example http://developer.apple.com/library/ios/#samplecode/AVCam/Introduction/Intro.html to solve my problems :-)
Thank you all in advance!
The AVCam sample code isn't flexible enough to do what you want. You need to use AVAssetWriter to write out the media. I'm not 100% sure on the uncompressed audio bit but the VideoSnake sample code from WWDC 2012 session 520 is a great place to start with AVAssetWriter. I can't speak to performance but you could have 2 AVAssetWriters for video and audio, just modify that code to vend the samplebuffers to the appropriate writer.
I'm currently building a Rails app, where a user can upload an mp3 and listen to it. I'm using paperclip for the data upload, but I'm not sure how I'd arrange the playback of the soundfile, so that it can be used on a mobile phone as well (so no flash).
Thoughts?
The two main cross-browser media playback frameworks are jPlayer and SoundManager.
Both will handle playback of your audio, regardless of device. Both will play the audio using either HTML5 or Flash according to
which solution is available
which solution you specified as higher priority (e.g. use HTML if available, Flash if not)
I'm using JW Player and I'm very happy about it. There is a HTML 5 mode that runs on newer mobile devices like the iPhone.
I've been asked to create a QR image that, on being scanned by a smartphone, will play a short 2-minute video. The video is currently in .mp4 format, but the format can change. The video playback works fine on iPhone however I'm having some problems with the BlackBerry Bold.
When the user scans the QR code the phone directs them to a URL. Right now the URL they are directed to is http://domain.com/video.mp4. However when the user attempts to access this page they get a 413 Error "Entity too large". Basically, too much is being pushed to the client.
Reading the BlackBerryForums.com.au thread titled "Request Entity Too Large", I see you need to increase the allowed request size. But the user is able to play YouTube videos perfectly fine on their blackberry! WHY? is the youtube video size smaller? What format is YouTube using? Why does YouTube work, when my method doesn't?
I know the obvious solution here is to use YouTube as a hoster and embed the video but I am told I cannot use this quick and easy solution.
The problem is that YouTube streams the video. What you're trying to do is get the user to download the whole video file.
You may need to get a streaming server so that the video can be played.
Alternatively, reduce the filesize of the file by reducing the video resolution and bitrate, make sure the sound is mono and low bitrate as well.