Then, you may try to split your big files in smaller chunks, and merge them when you need. So when you refresh your page, you may have multiple time the same data held in memory. Retrieving Blobs from indexedDB will actually duplicate the data in memory, unlike what happens with input, this means that when you create a blobURI from these Blobs, these blobURIs don't point to the file on disk, but will tie the Blob's data in memory until the blobURI is revoked, or the session expires. I can see three things that might help you.įirst, do you revoke all your blobURIs every time you don't use it anymore? Is there an alternative approach to what i'm trying to achieve? This behaves much better in chrome (no stuttering), however - this has to work in Safari. This looks likely to be the cause of the stuttering - and i assume that safari is trying to download chunks of the bloburl. I took a look at the Safari release notes and i noticed the following (from: safari release notes):Ĭhanged memory handling to keep all of the decoded frames for an animated image if the total memory size of the frames is under 30MB (up from 5MB) I have looked around but have not found any alternative ways of achieving playback without streaming. I've also noticed this becomes increasingly worse in proportion to the file size. This approach works fine for small videos (anything under 30mb), but for larger videos the playback stutters and i notice several error requests to the blob url in the web inspector (see image):ĭespite the 'error' requests the video loads and plays. My current approach is getting the video from indexeddb and creating a blob url for the src attribute: const objectUrl = createObjectURL(Data) I have no problem getting the audio and playing via web audio api, however - I soon run into problems with the video.
The requirement is to also avoid streaming and that it must work in Safari.įor this I chose IndexedDb and have everything stored just fine in the browser. I'm currently in the process of building a media player web application which requires audio and video to be stored client side.
0 kommentar(er)
