逐块下载文件客户端块

Hri*_*sto 5 html5 blob chunking fileapi webrtc

我正在使用WebRTC将文件发送到已连接的对等方,并且正在将文件分块发送。但是,我在弄清楚如何让对等方逐块地流式传输时保存/下载文件时遇到了麻烦。

我在网上找到的所有示例都建议这样做:

// sender
dataConnection.send({
   'file': file
});

// receiver
dataConnection.on('data', function(fileData) {

    var dataView = new Uint8Array(fileData);
    var dataBlob = new Blob([dataView]);
    var url = window.URL.createObjectURL(dataBlob);

    // create <a>
    var link = document.createElement('a');
    link.href = url;
    link.download = fileName;
    document.body.appendChild(link);

    // trigger the download file dialog
    link.click();
}
Run Code Online (Sandbox Code Playgroud)

但是,这种方法不支持获取文件的大块并在出现每个大块时对其进行写...它必须等待整个文件在发送方读取并发送到接收方。

我想做的是这样的:

// sender
for (var i = 0; i < fileSize; i += chunkSize) {

    var fileReader = new FileReader();

    // read next chunk
    var blob = file.slice(start, end);
    ...
    fileReader.onload = function(e) {
        ...
        dataConnection.send({ 'blob': blob });
    }
    fileReader.readAsArrayBuffer(blob);
}
Run Code Online (Sandbox Code Playgroud)

这样,我逐块读取文件,并在读取文件时将其发送给接收者。现在,我知道如何真正保存以这种方式发送的文件的唯一方法是执行此博客文章中所述的操作:

http://bloggeek.me/send-file-webrtc-data-api

...在“步骤6:下载到常规FS”中进行了介绍。但是,这种方法将所有大块放入它们中,将它们存储在内存中,然后在内存中构建一个大块UInt8Array,然后让接收方下载文件。这确实占用大量内存,实际上限制为数百MB,因此无法扩展。

有没有办法在第一个块进入后打开文件下载对话框,并在它们进入时继续写块,以使下载成为“流式”下载?

Hri*_*sto 5

更新

流 API: https: //streams.spec.whatwg.org

https://jakearchibald.com/2016/streams-ftw


不幸的是,根据我的研究,无法打开文件保存/文件下载对话框并以“流”方式保存/下载文件。

我将采取的方法是使用FileSystem API。不幸的是,并非所有浏览器都完全支持:

...而且似乎不太可能有很多浏览器会采用这个 API :(