Download a file using javascript and save it using the File API

34,089 views
Skip to first unread message

Simon

unread,
Jan 21, 2011, 4:40:00 AM1/21/11
to Chromium HTML5
Hello everyone,

I recently read the following parts of the File API and got excited:

"This specification defines an API through which user agents can
permit applications to write generated or DOWNLOADED FILES." [File
API: Writer, http://www.w3.org/TR/2010/WD-file-writer-api-20100406/]

"Offline video viewer: It DOWNLOADS large files (>1GB) for later
viewing." [File API: Directories and System, http://www.w3.org/TR/file-system-api/]

I really like this concept and thought I develop a small prototype
using Google Chrome 10 dev. I searched through the internet and some
discussions in this newsgroup, but I was unable to determine how to do
this. How do I download a file using javascript and write it to the
hard disc without user interaction. Once the file is cached the image/
video can be viewed even when the user is offline.

Can anyone point me to a document or sample to get me started or is a
file download not possible at the moment?

Another possibility I thought of is to convert the file into a text-
representation, download it via XmlHttpRequest, manually transcode it
on the client using javascript and then write it to HDD using
BlobBuilder and such.

Do you have any comments on this?

Thank you very much!

Kinuko Yasuda

unread,
Jan 21, 2011, 6:03:50 AM1/21/11
to Simon, Chromium HTML5
Hi Simon,
If my memory saves me, I think in chrome 10.x you can get binary data from XmlHttpRequest as ArrayBuffer.
Set "arraybuffer" to xhr.responseType, get response data, construct a blob from the data using BlobBuilder.append (it takes ArrayBuffer), and save it to a file using FileWriter/FileSystem API... or something like that would work.

 
Do you have any comments on this?

Thank you very much!

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.


PhistucK

unread,
Jan 21, 2011, 6:04:43 AM1/21/11
to Simon, Chromium HTML5
How about (execute this through the Developer Tools on Google.com) -
var req = new XMLHttpRequest() req.open("GET", "http://www.google.com/images/logos/ps_logo2.png", false);//some_binary_file.ext req.responseType = "arraybuffer"; req.send(); var builder = new BlobBuilder(); builder.append(req.response); var blob = builder.getBlob("image/png");
Then you can do whatever you want with the blob (use the FileWriter and the file system API, for example).

PhistucK



Simon

unread,
Jan 21, 2011, 9:20:04 AM1/21/11
to Chromium HTML5
Hello again,

thank you very much the replies so far. I tried to make it work, but
there seems to be a bug in the current unstable builds of chrome. I
tried both, Chrome 10 dev and Chromium, and once it finished the XHR-
download of the my 30MB video file it crashes showing me the "Ups,
sorry" page. The XHR-download runs perfectly in Chrome 8, but the
function fs.root.getFile() is not fully implemented, because the
sample code I found does not run there. I fear I have to wait until
the bug is fixed, although I have no idea how to report it.

Any thoughts?

Kind regards,
Simon


On 21 Jan., 12:04, PhistucK <phist...@gmail.com> wrote:
> How about (execute this through the Developer Tools on Google.com) -
> var req = new XMLHttpRequest() req.open("GET", "http://www.google.com/images/logos/ps_logo2.png",
> false);//some_binary_file.ext req.responseType = "arraybuffer"; req.send();
> var builder = new BlobBuilder(); builder.append(req.response); var blob =
> builder.getBlob("image/png");
> Then you can do whatever you want with the blob (use the FileWriter and the
> file system API, for example).
>
> ☆*PhistucK*
>
>
>
>
>
>
>
> On Fri, Jan 21, 2011 at 11:40, Simon <si...@simonheckmann.de> wrote:
> > Hello everyone,
>
> > I recently read the following parts of the File API and got excited:
>
> > "This specification defines an API through which user agents can
> > permit applications to write generated or DOWNLOADED FILES." [File
> > API: Writer,http://www.w3.org/TR/2010/WD-file-writer-api-20100406/]
>
> > "Offline video viewer: It DOWNLOADS large files (>1GB) for later
> > viewing." [File API: Directories and System,
> >http://www.w3.org/TR/file-system-api/]
>
> > I really like this concept and thought I develop a small prototype
> > using Google Chrome 10 dev. I searched through the internet and some
> > discussions in this newsgroup, but I was unable to determine how to do
> > this. How do I download a file using javascript and write it to the
> > hard disc without user interaction. Once the file is cached the image/
> > video can be viewed even when the user is offline.
>
> > Can anyone point me to a document or sample to get me started or is a
> > file download not possible at the moment?
>
> > Another possibility I thought of is to convert the file into a text-
> > representation, download it via XmlHttpRequest, manually transcode it
> > on the client using javascript and then write it to HDD using
> > BlobBuilder and such.
>
> > Do you have any comments on this?
>
> > Thank you very much!
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium HTML5" group.
> > To post to this group, send email to chromium-ht...@chromium.org.
> > To unsubscribe from this group, send email to
> > chromium-html5+unsubscr...@chromium.org<chromium-html5%2Bunsubscr...@chromium.org>
> > .

PhistucK

unread,
Jan 21, 2011, 9:22:14 AM1/21/11
to Simon, Chromium HTML5
Search crbug.com for an existing issue and star it. If you cannot find one, file a new issue at new.crbug.com.
Please, do not add a "+1" or "Me too" or "Confirmed" (or similar) comment. It just wastes the time of Chrome engineers and sends unnecessary e-mails to all of the people who starred the issue.

Thank you.



PhistucK



To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Simon

unread,
Jan 21, 2011, 9:56:45 AM1/21/11
to Chromium HTML5
Hello,

It seems that this bug only occurs as soon as I display the chrome
developer tools. Once they are hidden, the XHR-download works
perfectly. However fs.root.getFile() does not seem to work. I have to
following code:

logText('Check for browser support: ' + fileSystem.root.getFile); //
in my tests this returns "function getFile() { [native code] }"
fileSystem.root.getFile(target, {create: true}, function(fileEntry)
{ // something seems to be wrong with this line
logText('File was created!'); // this line never shows up, no error
though
logText('Initializing writer!');
fileEntry.createWriter(function(writer) { // FileWriter
[...]

I tried it in Chrome 8, Chrome 10 dev and the Chromium build from
today, but It just won't go beyond this line.

Thank you very much!

Kind regards,
Simon

On 21 Jan., 15:22, PhistucK <phist...@gmail.com> wrote:
> Search crbug.com for an existing issue and star it. If you cannot find one,
> file a new issue at new.crbug.com.
> Please, do not add a "+1" or "Me too" or "Confirmed" (or similar) comment.
> It just wastes the time of Chrome engineers and sends unnecessary e-mails to
> all of the people who starred the issue.
>
> Thank you.
>
> > <chromium-html5%2Bunsubscr...@chromium.org<chromium-html5%252Bunsubscr...@chromium.org>

Simon

unread,
Jan 21, 2011, 11:51:38 AM1/21/11
to Chromium HTML5
Okay, here is an important information, that did the job for me:

Run Chrome/Chromium like this: "chrome.exe --unlimited-quota-for-
files"

By the way, this brings me to the next question:
Is there a window/option in the Chrome GUI to see/delete/maintain
these files?

Thank you very much!

Kind regards,
Simon


PhistucK

unread,
Jan 21, 2011, 11:59:12 AM1/21/11
to Simon, Chromium HTML5
Not yet, but it is in the works. It will be added to the Resources tab in the Developer Tools.

PhistucK



To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Simon

unread,
Jan 21, 2011, 12:51:00 PM1/21/11
to Chromium HTML5
Okay, I think I am almost there: I just need to assign the cached file
back to the video-tag now. I have the following code, but I'm not sure
it is right:

function load() {
logText('Trying to load local file!');
fileSystem.root.getFile(target, null, function(fileEntry) {
logText('File found!');
fileEntry.file(function(file) {
logText('Trying to assign to video-tag!');
var video = document.getElementById('video');
logText('File: ' + file);
video.src = window.webkitURL.createObjectURL(file);
listFiles();
}, errorHandler);

}, errorHandler);
}

Thank you for your help!

I love Chrome by the way!

Kind regards,
Simon

On 21 Jan., 17:59, PhistucK <phist...@gmail.com> wrote:
> Not yet, but it is in the works. It will be added to the Resources tab in
> the Developer Tools.
>
> > > > > <chromium-html5%2Bunsubscr...@chromium.org<chromium-html5%252Bunsubscr...@chromium.org>
> > <chromium-html5%252Bunsubscr...@chromium.org<chromium-html5%25252Bunsubscr...@chromium.org>

PhistucK

unread,
Jan 21, 2011, 1:03:21 PM1/21/11
to Simon, Chromium HTML5
First, does it work? :)
Second, you can use the FileReader API to read the file as a Data URL, which <video> can play.
Just change readAsText in the example to readAsDataURL.

PhistucK



To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Eric Bidelman

unread,
Jan 21, 2011, 1:21:01 PM1/21/11
to PhistucK, Simon, Chromium HTML5
Since you're just setting the video.src and don't need to manipulate the contents of the video file, using window.webkitURL.createObjectURL is the better option. No need to read the entire video into memory.
--
Eric Bidelman
Developer Relations - Google
e.bid...@google.com

Jordon Wii

unread,
Jan 21, 2011, 7:49:04 PM1/21/11
to Chromium HTML5
There's a tutorial on html5rocks on the Filesystem API (which I also
think is _cool_, BTW):
http://www.html5rocks.com/tutorials/file/filesystem/

Simon

unread,
Jan 24, 2011, 4:37:30 AM1/24/11
to Chromium HTML5
Hello everyone,

first of all: No, the code I posted earlier did not work, it did not
display any video. Maybe because the filename started with "blob:"?

So I tried your second suggestion:

var reader = new FileReader();
logText('File: ' + file);

reader.onloadend = function(e) {
logText('Trying to assign to video-tag!');
var video = document.getElementById('video');
logText('Data-URL: ' + this.result);
video.src = this.result;
listFiles();
};

reader.readAsDataURL(file);

It never calls the "onloadend" function. The memeory usage of Chrome
just goes trough the roof (+500MB on a 30MB video file) and then
crahses the tab showing the "Oh sorry" page. No error message. I think
it would be a good idea to just "assign" the URL of the local video
and not load it entirely into memory. However, I have no idea how to
assign the URL other then how I did it in my earlier post which
unfortunatly failed.

Any more suggestions?

Thank you for your help!

Kind regards,
Simon

Kinuko Yasuda

unread,
Jan 24, 2011, 4:50:27 AM1/24/11
to Simon, Jian Li, Chromium HTML5
(Adding jian who probably knows the stuff better)

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Silvia Pfeiffer

unread,
Jan 21, 2011, 7:52:55 AM1/21/11
to Simon, Chromium HTML5
The device API has not been implemented in any browser yet. You will
have to use XMLHttpRequest for now.
Cheers,
Silvia.

Simon

unread,
Jan 27, 2011, 3:20:07 PM1/27/11
to Chromium HTML5
Well, I was able to download and locally save the file. But I cannot
load/restore/assign it so i can show the video even if i am offline.

So, the first half of the problem is solved. But the loading-part is
still a puzzle for me. I will distribute the code here, once I got it
working. Any futher help is highly appreciated!

Kind regards,
Simon Heckmann


On 21 Jan., 13:52, Silvia Pfeiffer <silviapfeiff...@gmail.com> wrote:
> The device API has not been implemented in any browser yet. You will
> have to use XMLHttpRequest for now.
> Cheers,
> Silvia.
>
>
>
> On Fri, Jan 21, 2011 at 10:40 AM, Simon <si...@simonheckmann.de> wrote:
> > Hello everyone,
>
> > I recently read the following parts of the File API and got excited:
>
> > "This specification defines an API through which user agents can
> > permit applications to write generated or DOWNLOADED FILES." [File
> > API: Writer,http://www.w3.org/TR/2010/WD-file-writer-api-20100406/]
>
> > "Offline video viewer: It DOWNLOADS large files (>1GB) for later
> > viewing." [File API: Directories and System,http://www.w3.org/TR/file-system-api/]
>
> > I really like this concept and thought I develop a small prototype
> > using Google Chrome 10 dev. I searched through the internet and some
> > discussions in this newsgroup, but I was unable to determine how to do
> > this. How do I download a file using javascript and write it to the
> > hard disc without user interaction. Once the file is cached the image/
> > video can be viewed even when the user is offline.
>
> > Can anyone point me to a document or sample to get me started or is a
> > file download not possible at the moment?
>
> > Another possibility I thought of is to convert the file into a text-
> > representation, download it via XmlHttpRequest, manually transcode it
> > on the client using javascript and then write it to HDD using
> > BlobBuilder and such.
>
> > Do you have any comments on this?
>
> > Thank you very much!
>
> > --
> > You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
> > To post to this group, send email to chromium-ht...@chromium.org.
> > To unsubscribe from this group, send email to chromium-html5+unsubscr...@chromium.org.

Simon

unread,
Feb 4, 2011, 8:38:59 AM2/4/11
to Chromium HTML5
Okay! It is done, it works!
The problem was not so much the loading/restoring of the files but the
downloading as with the code above I ended up with corrupted data
because of an improper mime-type. When downloading this needs to be
added: xhr.overrideMimeType('text/plain; charset=x-user-defined');

I have now created a small prototype which plays a video, shows a
picture and displays a pdf file and then downloads these files to the
local hard drive. If the internet connection is not available you can
still restore and view the downloaded files (image, video, document).
It works in Chrome 9 stable, Chrome 10 beta, Chrome 11 dev and Chrome
11 nightly. For anyone who is interested, here are excerpts from my
code:

1.) Make sure you run your Chrome version with "--unlimited-quota-for-
files" as launch parameter.

2.) Request access to the file system:

window.requestFileSystem(
PERSISTENT, // persistent vs. temporary storage
30 * 1024 * 1024, // size (bytes) of needed space
initialized, // success callback
errorHandler // opt. error callback, denial of access
);

3.) Download the file using XMLHttpRequest version 2:

var xhr = new XMLHttpRequest();
xhr.open('GET', source, true);
xhr.onprogress = updateStatus; // Optional
xhr.overrideMimeType('text/plain; charset=x-user-defined'); /!!!
xhr.responseType = "arraybuffer"; // Part of XHR 2
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
save(xhr.response);
}
};
xhr.send(null);

4.) Now save the xhr.response to the hard drive:

fileSystem.root.getFile(filename, {create: true},
function(fileEntry) {
fileEntry.createWriter(function(writer) { // FileWriter
writer.onprogress = updateStatus; // Again, this is optional
writer.onwrite = function(e) { }; // Success callback function
writer.onerror = function(e) { }; // Error callback function
var bb = new BlobBuilder();
bb.append(xhr.response);
writer.write(bb.getBlob(mimetype)); // The actual writing
}, errorHandler);
});

5.) Now the file should be saved. You can check it by accessing this
folder "C:\Documents and Settings\{User}\Local Settings\Application
Data\{Chrome build}\User Data\Default\FileSystem\{server name}
\Persistent\chrome-{some salt}"

6.) The file can be loaded using the following methods. Make sure to
request a file-system handle as shown in 2.) before loading a file

fileSystem.root.getFile(filename, null, function(fileEntry) {
fileEntry.file(function(file) {
if (window.webkitURL) // Chrome 10 & 11
var url = window.webkitURL.createObjectURL(file);
else // Chrome 9
var url = createObjectURL(file);
document.getElementById('video).src = url; // Assigning the url
if (window.webkitURL) // Chrome 10 & 11
var url = window.webkitURL.revokeObjectURL(file);
else // Chrome 9
var url = revokeObjectURL(file);
}, errorHandler);
}, errorHandler);

This should be pretty much it. Of course my full code also checks if
the client is online or offline and such, but thats not really related
to the download and restore issue, discussed here.
Additionally, this is not the most beautiful code I have ever written.
Please apologize the style. I just wanted to test this.

Further comments are welcome!

There is one open question: Will the File API soon/ever come to Chrome
on Mobile Phones/Tablets (Android)? When?

Kind regards
Simon Heckmann

Bauglir

unread,
Mar 2, 2011, 11:56:30 PM3/2/11
to Chromium HTML5
Is there a way to enable --unlimited-quota-for-files option from
chrome/chromium while running? This is like impossible to explain to
regular users how to setup this as parameter.

Brona

Eric Uhrhane

unread,
Mar 3, 2011, 12:20:10 PM3/3/11
to Bauglir, Chromium HTML5
No, it has to be done with a flag. That's specifically *because* it's
not something regular users will do. Features are hidden behind a
flag because they're not considered ready for casual use, but we want
to expose them to developers.

> --
> You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.

> To post to this group, send email to chromiu...@chromium.org.
> To unsubscribe from this group, send email to chromium-html...@chromium.org.

Eric Bidelman

unread,
Mar 16, 2011, 4:15:36 PM3/16/11
to Simon, Chromium HTML5
You can create a new Blob from the modified ArrayBuffer:

var bb = new BlobBuilder();
bb.append(arrayBuffer);
var url = window.webkitURL.createObjectURL(bb.getBlob('image/whatever'));

from:
On Wed, Mar 16, 2011 at 12:31 PM, Simon <si...@simonheckmann.de> wrote:
Hello everyone,

As this group has been very helpful on my previous questions, I though
I ask another one:

I tweaked the above code enabling it to save an image to the hard
drive. Not a big problem. But now comes the tricky part: I not only
want to display the image (as I did with
"window.webkitURL.createObjectURL") when I am offline, but I also want
to modify the image before I display it. I guess this can be done by
using the FileReader object and its method "readAsArrayBuffer".
However, my question is: How do I assign/load this manipulated
ArrayBuffer to the "img.src" property?

Thank you very much!

Kind regards,
Simon Heckmann



On 3 Mrz., 18:20, Eric Uhrhane <er...@chromium.org> wrote:
> No, it has to be done with a flag.  That's specifically *because* it's
> not something regular users will do.  Features are hidden behind a
> flag because they're not considered ready for casual use, but we want
> to expose them to developers.
>
>
>
>
>
>
>
> On Wed, Mar 2, 2011 at 8:56 PM, Bauglir <Bronislav.Klu...@bauglir.com> wrote:
> > Is there a way to enable --unlimited-quota-for-files option from
> > chrome/chromium while running? This is like impossible to explain to
> > regular users how to setup this as parameter.
>
> > Brona
>
> > --
> > You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
> > To post to this group, send email to chromium-ht...@chromium.org.
> > To unsubscribe from this group, send email to chromium-html5+unsubscr...@chromium.org.

> > For more options, visit this group athttp://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.

Simon

unread,
Mar 16, 2011, 3:31:57 PM3/16/11
to Chromium HTML5
Hello everyone,

As this group has been very helpful on my previous questions, I though
I ask another one:

I tweaked the above code enabling it to save an image to the hard
drive. Not a big problem. But now comes the tricky part: I not only
want to display the image (as I did with
"window.webkitURL.createObjectURL") when I am offline, but I also want
to modify the image before I display it. I guess this can be done by
using the FileReader object and its method "readAsArrayBuffer".
However, my question is: How do I assign/load this manipulated
ArrayBuffer to the "img.src" property?

Thank you very much!

Kind regards,
Simon Heckmann


On 3 Mrz., 18:20, Eric Uhrhane <er...@chromium.org> wrote:
> No, it has to be done with a flag.  That's specifically *because* it's
> not something regular users will do.  Features are hidden behind a
> flag because they're not considered ready for casual use, but we want
> to expose them to developers.
>
>
>
>
>
>
>
> On Wed, Mar 2, 2011 at 8:56 PM, Bauglir <Bronislav.Klu...@bauglir.com> wrote:
> > Is there a way to enable --unlimited-quota-for-files option from
> > chrome/chromium while running? This is like impossible to explain to
> > regular users how to setup this as parameter.
>
> > Brona
>
> > --
> > You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
> > To post to this group, send email to chromium-ht...@chromium.org.
> > To unsubscribe from this group, send email to chromium-html5+unsubscr...@chromium.org.

Simon

unread,
Mar 17, 2011, 5:38:47 AM3/17/11
to Chromium HTML5
Thanks Eric!
With your code I manged to load the image:

fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
var bb = new BlobBuilder();
bb.append(this.result);
var blob = bb.getBlob(type);
var url = window.webkitURL.createObjectURL(blob);
node.src = url;
window.webkitURL.revokeObjectURL(blob);
};
reader.readAsArrayBuffer(file);
});

The question that now arises is: How do I get to the raw data?
I used "this.result" which is indeed a "ArrayBuffer" and which
returned the proper byte count (this.result.byteLength) for my local
file, but "this.result[0]" returns 'undefined' instead of the first
byte of the file. I also slices the blob into pieces, but there seems
to be no method to access the bytes within the blob. Any suggestions?

Kind regards,
Simon Heckmann
> > For more options, visit this group at
> >http://groups.google.com/a/chromium.org/group/chromium-html5/?hl=en.
>
> --
> Eric Bidelman
> Developer Relations - Google
> e.bidel...@google.com

PhistucK

unread,
Mar 17, 2011, 5:43:01 AM3/17/11
to Simon, Chromium HTML5
I believe you cannot access the data of pixel arrays as is.
I think you can add pixel arrays as data to <canvas> can continue from there somehow.

PhistucK



To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

Simon

unread,
Mar 17, 2011, 5:57:43 AM3/17/11
to Chromium HTML5
Thank you!

So you are saying there is now way to access the raw data? I am not
talking about real pixels at the moment. I am looking for a generic
approach to access the raw binary data which is independent from the
actual file format:

0.) Download binary data (XmlHttpRequest v2)
1.) Save this data to the hard drive (File API: Writer) - DONE
2.) Load the local file into an ArrayBuffer (File API: Directories &
System) - DONE
3.) Manipulate the binary data - OPEN
4.) Assign the data to a html element, e.g. audio, video, image,
iframe, ... (File API) - DONE

So the thing I am asking about is step 3. How do I play around with
the file's binary content. Is this currently possible? I've seen
things like TypedArray and ArrayBufferView in a draft from the Khronos
Group (http://www.khronos.org/registry/typedarray/specs/latest/#5) but
it does not seem to be implemented in Chrome, yet.

So: What is possible?

Kind regards,
Simon Heckmann


On 17 Mrz., 10:43, PhistucK <phist...@gmail.com> wrote:
> I believe you cannot access the data of pixel arrays as is.
> I think you can add pixel arrays as data to <canvas> can continue from there
> somehow.
>
> ☆*PhistucK*

Eric Bidelman

unread,
Mar 17, 2011, 1:16:31 PM3/17/11
to Simon, Chromium HTML5
Typed arrays are in Chrome. Have you tried instantiating a typed
array with your buffer? Examples:

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.



--
Eric Bidelman
Developer Relations - Google

Simon

unread,
Mar 20, 2011, 6:08:26 PM3/20/11
to Chromium HTML5
Perfect! This did the job! I can now work with every single byte!
Thank you!

After this went so well, I though I take this to the next level:
Encryption of the locally stored files. I decided to use AES-128 in
CBC mode, because it is quick and secure. I now use a php function to
encrypt the file (video, 25 MB). It takes a few seconds. The encrypted
video is then perfectly stored on the local hard disc. I then use the
javascript library "slowAES" [http://code.google.com/p/slowaes/] to
decrypt the local files when they are needed. The only problem is: It
is incredibly slow. It takes 252376ms (~ 4.2 minutes) on a 2Ghz dual
core CPU with 4GB of ram to decode it. Is javascript that much slower
then the mcrypt php code? Or could you give me some hints on where to
improve the slowAES implementation to tremendously decrease the
decryption time? I found other javascript AES libraries but its
usually hard to make them work with Uint8Arrays. With some minor
modifications slowAES was able to handle Uint8Arrays.

Any help from javascript experts for performance improvements would be
highly appreciated!

Kind regards,
Simon Heckmann

Simon

unread,
Mar 22, 2011, 11:47:13 AM3/22/11
to Chromium HTML5
Hello everyone,

I was able to speed up the library by a minute or so. I am still
trying to get it faster, but I while trying to do this, I came up with
a different idea: I could delegate the decryption to a separate web
worker which will keep the UI responsive, even if the decryption
process takes longer.

The question now is: How do I get the ArrayBuffer object into a new
worker? Is there a way to define a function for a worker and then call
it from the main thread? I found the handler onmessage but it seems
inelegant to pass the whole data through an message. MDC states: "You
can safely pass objects in and out of workers using the postMessage()
method; objects are automatically converted to JSON internally." [1]
This sounds even worse. I do not want the data to be transcoded into
JSON and back again. What I am looking for is something like this:

var worker = new Worker();
worker.aCustomFunction(myArrayBuffer);
worker.onfinished = function() { /* do something with the result
*/ };
worker.start();

It something like this possible?

Again, thank you for your help!

Kind regards,
Simon Heckmann

[1] https://developer.mozilla.org/En/Using_web_workers

Bauglir

unread,
Mar 23, 2011, 2:18:28 AM3/23/11
to Chromium HTML5
Hello
see my demo for WebWorkers

http://www.webnt.cz/demos/026_blob_url/worker3.php
this demo
1/ creates worker in the fly (without actuall worker javascritp file,
it's using generic library)
2/ is working with image data (never mind JSON conversion, it is not
an issue)
It might be, what you need

Brona

Simon

unread,
Mar 23, 2011, 9:15:16 AM3/23/11
to Chromium HTML5
Thank you for your answer!

However, what works with your code does not work with mine, because of
different data types. I pass an ArrayBuffer as "event.data". Sadly,
this gets converted into a regular object. Therefore I can not call
"var buffer = new Uint8Array(event.data);" which I need to manipulate
the data and then assign the data to the video tag.

Any other solutions?

Kind regards,
Simon Heckmann
> ...
>
> Erfahren Sie mehr »

Bauglir

unread,
Mar 25, 2011, 6:18:30 AM3/25/11
to Chromium HTML5
Well,
The fact is you cannot pass such a data. The only remaining solution
is to covert such data to another format (maybe a string using base64,
or regular array of integers) and use this format to pass it.
B.
> ...
>
> ďalšie informácie »

Simon

unread,
Mar 30, 2011, 10:32:31 AM3/30/11
to Chromium HTML5
Okay, other idea: Does Chrome implement the FileSystemSync API yet,
because then I could use this and already load the file in a worker!?!

Kind regards,
Simon
> ...
>
> Erfahren Sie mehr »

Eric Bidelman

unread,
Mar 30, 2011, 12:30:48 PM3/30/11
to Simon, Chromium HTML5
On Wed, Mar 30, 2011 at 7:32 AM, Simon <si...@simonheckmann.de> wrote:
Okay, other idea: Does Chrome implement the FileSystemSync API yet,
because then I could use this and already load the file in a worker!?!

To post to this group, send email to chromiu...@chromium.org.
To unsubscribe from this group, send email to chromium-html...@chromium.org.

--
Eric Bidelman
Developer Relations - Google
e.bid...@google.com

Simon

unread,
Mar 31, 2011, 6:27:27 AM3/31/11
to Chromium HTML5
Thanks!

I am almost there: I create a worker:

var worker = new Worker('js/loader.js');
worker.onmessage = function(e) {
video.src = e.data;
};
worker.postMessage(filename);

And the file is successfully accessed from the worker:

var filepath = '';
var fileSystemSync = self.requestFileSystemSync(PERSISTENT, 0);
var fileEntrySync = fileSystemSync.root.getFile(filename);
var file = fileEntrySync.file();
filepath = self.webkitURL.createObjectURL(file);
self.postMessage(filepath);

This returns something like "blob:http://localhost/7bd34790-1ce3-4f05-
a05f-6104c0b05fd3". But the video will not play.
Error Message from the console: "GET blob:http://localhost/
7bd34790-1ce3-4f05-a05f-6104c0b05fd3 0 ()";

Any ideas?

Kind regards,
Simon Heckmann


On 30 Mrz., 18:30, Eric Bidelman <ericbidel...@chromium.org> wrote:
> On Wed, Mar 30, 2011 at 7:32 AM, Simon <si...@simonheckmann.de> wrote:
> > Okay, other idea: Does Chrome implement the FileSystemSync API yet,
> > because then I could use this and already load the file in a worker!?!
>
> Indeed. Seehttp://www.html5rocks.com/tutorials/file/filesystem/
> ...
>
> Erfahren Sie mehr »

Simon

unread,
Mar 31, 2011, 6:49:06 AM3/31/11
to Chromium HTML5
If anyone is interested:

The code above works perfectly!!! My problem was that I did call
"self.close();" after sending the message back to the main thread. I
deleted this line by accident and now it works. I suppose closing the
worker does somehow free the handles that where created within it so
they cannot accessed from outside any longer!

Kind regards,
Simon Heckmann
> ...
>
> Erfahren Sie mehr »

Eric Uhrhane

unread,
Mar 31, 2011, 1:10:57 PM3/31/11
to Simon, Chromium HTML5
On Thu, Mar 31, 2011 at 3:49 AM, Simon <si...@simonheckmann.de> wrote:
> If anyone is interested:
>
> The code above works perfectly!!! My problem was that I did call
> "self.close();" after sending the message back to the main thread. I
> deleted this line by accident and now it works. I suppose closing the
> worker does somehow free the handles that where created within it so
> they cannot accessed from outside any longer!

Right--the lifetime of URLs created by createObjectURL is tied to that
of the context [window or worker] in which they were created.

In the next major release of Chrome, you'll be able to use
entrySync.toURL(), which doesn't have the lifetime issue.

Bradley D. Brown

unread,
Jan 19, 2013, 1:07:46 AM1/19/13
to chromiu...@chromium.org
Simon - you have done many of the exact things I've been working on for the last week.  I'd like to be able to:

1. Download and cache a set of videos
2. Be able to play them when a user is offline
3. Protect them (i.e. encrypt the saved copy and decrypt before playback)

Appcache unfortunately doesn't seem to work for large files like movies.  I constantly got the browser crashing, which I couldn't figure out what I was doing wrong.  I realize you were doing this nearly 2 years ago!  Do you happened to have the code that you developed?  Are you still using it today?  I get errors with BlobBuilder, so I had to change to the Blob object since it was deprecated.  I'm having trouble saving it and pulling it back, but getting closer all of the time.  Your code would help me immensely! 

Thank you!
Brad

PhistucK

unread,
Jan 19, 2013, 2:42:01 AM1/19/13
to Bradley D. Brown, chromiu...@chromium.org
Did you happen to file bugs for the crashes? that would really be helpful.
If you did not, please, search crbug.com for existing issues about these crashes and if you cannot find one, use the "New Issue" button to create a new one.
Also, Instead of commenting "Me, too", just star the issue.

PhistucK


--
You received this message because you are subscribed to the Google Groups "Chromium HTML5" group.
Reply all
Reply to author
Forward
0 new messages