I know there's a new html5 API called web storage, but it basically allows only up to 5MB of storage per domain, so how services like Deezer do to offer an offline mode ? It means that they have to store the musics on the computer, but it's all in the browser, so how do they do to bypass the 5MB of storage ?
http://www.deezer.com/en/features/everywhere.html
I can't speak for Deezer, but there are several new APIs in development for HTML5 including the FileSystem and FileWriter API.
In use cases it gives examples of large storage requirements the API will be able to fulfil such as storage of large media files and assets.
Offline video viewer
It downloads large files (>1GB) for later viewing.
It needs efficient seek + streaming.
It must be able to hand a URL to the video tag.
It should enable access to partly-downloaded files e.g. to let you watch the first episode of the DVD even if your download didn't complete before you got on the plane.
It should be able to pull a single episode out of the middle of a download and give just that to the video tag.
It's still a working draft and not very widely adopted.
Related
I am just researching and playing around with HTML5 FileSystem API. I am downloading a video from the server and saving it to the local sandbox filesystem. Say a user comes to the sites, hits download on the video, it saves to the filesystem, then the user happens to go offline.
My question is, what is the best practice for checking if video is already in the filesystem and loading it from there?
Thanks
You're asking about persistent, client-side storage of video, specifically using the Directories and System API, sometimes called "File System API." I believe this is currently only supported on Chrome 28 and Opera 16 or higher – i.e., slightly less than 1 in 3 web users right now.
Per the API spec, the users will be prompted to allow the quota for the on-client storage allotment because you're requesting persistent, not transient, storage. While the persistent client storage may be handy, it's not entirely transparent to the user.
As for determining if the Chrome or Opera user has the video stored locally, simply calling getFile() file will do it; if the file doesn't exist, it simply throws an error that you can then handle to go ahead and pull down the video. That's the standard / best practice way of determining if a file has been stored locally.
PS: Yes, I see that Blackberry mobile supports the API, too. I just don't know if either of the remaining Blackberry users will have the device storage quota available for video :-)
I'm currently working on a web app with the request that selected pages be accessible offline after downloading. I'm aware of the HTML5 offline storage method and have no problem with it, but as far as I can tell, it's developer specified.
Question is, is there a way in which I can set it up with a function that will write to the .manifest file when, for example, the user clicks a button on the page they'd like cached locally for offline viewing?
The app in its entirety would be far too large to cache locally (not only due to the restrictions of the HTML5 local storage method, but the sheer amount of time it would take).
Suggestions of alternate methods not relying on HTML5 local storage would also be welcome.
Any help would be greatly appreciated. Thanks.
I am building an application that allows authenticated users to use a Web browser to upload MP3 audio files (of speeches) to a server, for distributing the audio on a network. The audio files need to use a specific bit rate (32kbps or less) to ensure efficient use of bandwidth, and an approved sampling rate (22.050 or 44.100) to maximize compatibility. Rather than validate these requirements following the upload using a server-side script, I was hoping to use HTML5 FileReader to determine this information prior to the upload. If the browser detects an invalid bit rate and/or sampling rate, the user can be advised of this, and the upload attempt can be blocked, until necessary revisions are made to the audio file.
Is this possible using HTML5? Please note that the question is regarding HTML5, not about my application's approach. Can HTML5 detect the sampling rate and/or bit rate of an MP3 audio file?
FYI note: I am using an FTP java applet to perform the upload. The applet is set up to automatically forward the user to a URL of my choosing following a successful upload. This puts the heavy lifting on the client, rather than on the server. It's also necessary because the final destination of each uploaded file is different; they can be on different servers and different domains, possibly supporting different scripting languages on the server. Any one server would quickly exceed its storage space otherwise, or if the server-side script did an FTP transfer, the server's performance would quickly degrade as a single point of failure. So for my application, which stores uploaded audio files on multiple servers and multiple domains, validation of the bit rate and sampling rate must take place on the client side.
You can use FileReader API and Javascript built audio codecs to extract this information from the audio files.
One library providing base code for pure JS codecs is Aurora.js - then the actual codec code is built upon it
https://github.com/audiocogs/aurora.js/wiki/Known-Uses
Naturally the browser must support FileReader API.
I didn't understand from your use case why you need Java applet or FTP. HTTP uploads work fine for multiple big files if done properly using async badckend (like Node.js, Python Twisted) and scalable storage (Amazon S3). Similar use case is resizing incoming images which is far more demanding application than extracting audio metadata out from the file. The only benefit on the client side is to reduce the number of unnecessary uploads by not-so-technically-aware users.
Given that any user can change your script/markup to bypass this or even re-purpose it, I wouldn't even consider it.
If someone can change your validation script with a bit of knowledge of HTML/Javascript, don't use HTML/Javascript. It's easier to make sure that it is validated, and validated correctly by validating it on the server.
I have read about how I can actually drag something from the desktop (from the operating system) to a html5 web page and it can "know" about what I am throwing at it. For example imgur for images. What other ways of interaction between html5 and a system exist.
Not a lot. Any interaction such as the one you've mentioned are those which are initiated by the user. For instance the FileReader API can only read files that the user has selected/dragged.
This is to keep the browser sandboxed so that malicious websites can not tamper with one's machine or files. However html5 gives you:
Geo-location Api lets you physically locate you're machine.
Local Storage is another new feature of html5 which lets you store a small amount of data on the user's machine. It's different from Cookies in that it has a larger space than cookies and the data isn't sent back to the server with every request.
Yes, HTML 5 supports native drag and drop:
http://dev.w3.org/html5/spec/dnd.html
If you peruse the link, you can also see "what other" things HTML 5 can do.
For storing data offline WebApp can use:
session storage, "advanced version of cookies"
key/value based Web Storage (AKA local/global/offline/DOM storage)
sql-based Web SQL Database (deprecated) and Indexed Database API
FileReader and FileWriter API (requires user to select files each time the application loads)
But apparently there is no File Storage. Of course, there is a manifest-based caching, but it's just a cache and is not supposed to be used as a user data storage.
Does it mean that the user of WebApp is forced to use some sort of a cloud file storage?
Is there any way to save large files on user's local machine? Or maybe some way to select a local folder web application can use to store user data?
Edit. Security. HTML5 already has the ability to write big portions of data to user's local machine. I don't see any security issues if a browser will provide another, file-based abstraction to store data. It can be some virtual machine, virtual filesystem, whatever.
Hm, I think, it is possible to write JS filesystem and store it as a blob in SQL...
Similar questions.
Update:
Hm... recently I've found this and this. Maybe it is what I'm looking for... Yes, it is! See the answer below.
At last, I've found it! Here's the answer:
I’ll have the DOMFileSystem with a side of read/write access please wrote:
Eric Uhrhane of Google has been
working on the working draft of the
File API: Directories and System specification which defines a set of
APIs to create a sandboxed filesystem
where a web app can read and write
data to.
Wow! I'm so excited!
Why not use localStorage while the user is editing a document and the FileWriter API when they want to save it to disk? Most people are used to seeing a save dialog pop up when saving a document.
The only scenario I can think of that warrants userless access to the FileWriter API is an autosave feature, but autosaving to localStorage can be just as good.
There is a way to save relatively large files to a users hard drive if you are willing to use Flash. Look into Downloadify:
http://www.bitrepository.com/downloadify-client-side-file-generation.html
Downloadify allows you to send data to a SWF and have that SWF create a file on the users machine. My recommendation would be to store the data via one of the methods you listed, Webstorage, sqlite database, etc. Put all your assets, including the SWF in the manifest file so everything is cached locally to the browser. You can then pull information from your db or webstorage and use the SWF to create the files you need.
I'm not sure if you will be able to read these files back into your web application.
Another option to save data is by using link tags with the data URI scheme. However, I'm not sure if it is supported in all the major browsers at the moment.
For security reasons you can't write files to a user's local filesystem in case it gets used for nefarious purposes by evil people.
That's not likely to change, and that's a good thing.
The HTML5 FileSystem API started landing in Chrome 8 and is fairly complete as of now (Chrome 11).
There's a nice tutorial on it here: http://www.html5rocks.com/tutorials/file/filesystem/
http://fsojs.com wraps the FileSystem API effectively, if you want an easy solution
As mentioned by others here, the FileWriter and FileSystem APIs can be used to store files on a client's machine from the context of a browser tab/window.
However, there are several things pertaining to these APIs which you should be aware of:
Implementations of the APIs currently exist only in Chromium-based browsers (Chrome & Opera)
Both of the APIs were taken off of the W3C standards track on April 24, 2014, and as of now are proprietary
Removal of the (now proprietary) APIs from implementing browsers in the future is a possibility
A sandbox (a location on disk outside of which files can produce no effect) is used to store the files created with the APIs
A virtual file system (a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) is used represent the files created with the APIs
IsolatedStorage, which hasn't been mentioned as of yet, also allows for file i/o from a tab/window context, but it is made available through solely through Silverlight and requires the use of managed code to access. It, like FileSystem, also exists in a sandbox and makes use of a virtual file system.
Given the high market penetration of both Chromium-based browsers and Silverlight (support for which, interestingly enough has been dropped by such browsers), you may find a solution which uses the first of the above approaches available on a client machine satisfactory.
BakedGoods, a Javascript library that establishes a uniform interface that can be used to conduct common storage operations in all native (including FileSystem), and some non-native (including IsolatedStorage) storage facilities, is an example of such a solution:
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Just for the sake of complete transparency, BakedGoods is maintained by this guy right here :) .