How to detect available disk space when saving a file in browser - javascript

I have implemented a screen recording feature into our webrtc conferencing app. (Normal MediaRecorder API)
I am using FileSaver.js to save the recordings.
Everything is working just fine.
I was presented with a problem today!
What if user's HDD is full, what happens then?
I tested this. chrome says "Failed, File Too Large" and nothing.
File is not saved and there is no option to retry somewhere else :((
So ... is there any way to detect this somehow and prompt the user to re-download/re-save the recorded file again ?

Related

Safari not utilizing application cache manifest

I am building an HTML5 web game, a spin on the classic asteroids game to be precise. The problem I'm running into is that Safari, unlike Chrome or Firefox, will NOT automatically cache and use .wav sound files. This is causing substantial lag if there are an abundance of sounds occurring. On each instance of needing a "shooting" sound, the browser will perform a new GET request to obtain the audio file, as seen below:
you will see that the 151013__bubaproducer__laser-classic-shot-2.wav is the shooting sound that is being requested through the network over and over again and is not being cached. In an attempt to force Safari to cache this file, I've created an Asteroids.manifest file for the appcache to utilize:
Yes, that is the correct directory location relative to both the index.html as well as the Asteroids.manifest. And the manifest file does appear to be consumed, as it is visible in Safari's debugger storage:
Please let me know if you have any suggestions, as I've tried a variety of different setups of the .manifest file, including naming it .appcache, ensuring that it is served up with a MIME type of text/cache-manifest, and removing the NETWORK/CACHE/FALLBACK fields
Edit note: the window.applicationCache.status() is 1 (Idle)
I think that Safari doesn't cache audio files even if listed in the manifest file. Have you tried encoding the audio as BASE64 string and decode/convert back to audio at startup? Have a look at the WepApi, it can probably help you with that process.
If you mean mobile, then there are some posts here: HTML5 offline video caching in mobile safari
In summary, there is an ~5mb limit for the cache in mobile Safari. There may be something similar on the desktop. Another poster said that audio & video are not cached by the iPhone since they are played by external applications. It seems the only workaround is to store them as base64 in the local database (or local storage perhaps also? - Just keep in mind that "in private" browsing disables it).
If not, perhaps something to consider if you do plan to target the mobile version.

i can't record audio files on chrome or firefox

I have a problem. I made a website using ionic and I need to record audio with the microphone.
in version 39 of Chrome it works perfectly and me to allow notice appears in microphone.
in chrome in higher versions of the notice does not appear, therefore I can not use the microphone.
in firefox the nofiticacion appears and click allow , it appears to allow the use of the microphone but 3 seconds after the icon disappears and does not allow me to record audio.
There are some plugin or something that I can put you to my website to walk regardless of the browser because users can not meddle with things manually in their browsers.
Will be security reasons, or will not be a https connection?
I don't know in iONIC, but this solution is works for me in Website
I just tried for Voice search for Website. I Found that, voice search script works with only HTTPS. In local, Browser doesn't let me record audio, but while I upload this file in my HTTPS protocol website, It works fine.

Local Storage - Phone out of space

I have used the Ionic framework to build my App and have been thinking about the local storage and how it works. One of my users phone storage is capped out with photos and video content, and I was wondering how this would effect an HTML5 App that uses local storage.
I decided to test it by purchasing a cheap phone with only 2GB internal storage, and filling it up with random Audio files from my PC. I have managed to get Windows to think there is 0kb left in internal storage, yet my Ionic App can still add data to local storage.
Does anyone know why this is, or have any input as to where local storage actually is saved? I sort of expected it to just store in the browsers App Data, but maybe it is somewhere else?
EDIT
Have just looked at the phone storage and it says there is still 99.9mb that is un-used. Android must not let Windows fill all of the device's storage. Does anyone still have any knowledge on what would happen if I managed to fill this last 99mb??
OK.. I cleared my App data and then managed to fill up the last 99mb of space by duplicating more files using the File Commander App on the phone.
I then opened my Ionic App and logged in (which downloads about 1.5mb of App data) and the App seemed to work fine (as everything was stored in RAM at the time). Once the App closed and I re-opened it, all the stored data was gone (as there was no space to move it to from RAM I am guessing)
End result: App works fine in RAM but if there is no space in localStorage, it will not error or tell you it didn't work, it will just not save the data.
Note: I have not tested this when there has been existing data in App, and trying to add to it which would take the phone over the storage limit. Im unsure if this would corrupt the existing data or just not let you add to it.

Audio recording with HTML5

I'm trying to implement audio recording in a website. Basically the user should be able to press a button and speak something into the microphone. The recorded audio should then be sent to the server for further processing. I realise that you can do this with Flash, but for now I'm trying to avoid that.
I found several resources on the internet about it (i.e. link) but as it seems, this functionality is not widly supported yet. I experienced differences betweet the used browser and between the used operating system. For instance, the Chrome Browser doesn't seem to access any microphone on Linux correctly. So i was wondering if anyone knows a good resource to dive into this. Or maybe someone tried to set up something like this himself, and can help with some suggestions about where the limitations of HTML5 and the JavaScript Web Audio API are right now.
Thanks!
As of Chrome Version 27.0.1453.56 beta Mac, audio recording works with this demo application https://github.com/mattdiamond/Recorderjs
This app returns back a WAV file for the user which can be uploaded to the server.
If you want a truly robust solution that works on most desktop web browsers, you may need to resort to Flash.
This article covers up pretty well the current state of audio video capture possibilites using HTML5:
http://hdfvr.com/html5-video-recording
Also for just audio capture, here's a gitHub project that records audio to mp3 directly from the browser:
https://github.com/nusofthq/Recordmp3js

iPhone Browser stops downloading resources to the HTML5 Cache when user navigates during the process

I'm working on a project using the HTML5 application cache to support an offline version of my application. When the user visits the application the first time, the browser automatically downloads all the files in the cache manifest file and saves them in the cache for offline use.
In Chrome, when the user navigates to a different URL (still within my application, which also references the cache manifest file), it will continue to download the files into the cache.
However, on iOS (I've tried iPhone, iPad, and iPod touch), if you navigate during the downloading progress, it seems to halt the process and subsequent pages do not download any files at all. In fact, the only way I can get it to restart the process of downloading files into the cache, I have to go into the Mobile Safari settings and clear the cache.
Am I doing something wrong? Or does the user actually have to wait on the same page until all the resources are cached (otherwise the cache is broken). It seems like there is maybe a bug in the implementation, but maybe someone has some experience with this problem?
Any chance you can post the content of your cache manifest? The first things I'd check are that (a) the relevant pages are listed in there, (b) the pages you navigate to have manifest attributes pointing to the cache file and (c) that you have an HTML5 doctype for each page.
You could try forcing a cache update programmatically too:
Safari Client-Side Storage and Offline Applications Programming Guide: Updating the Cache

Categories

Resources