TIC TIC - 4 months ago 9
Javascript Question

DataURI to Blob errors: DOM Exception 5: An invalid or illegal character was specified

I'm using Meteor with a Cordova plugin to record a video on an iPhone, then convert that to a blob for uploading. About half of the time I try to convert the video from the local filesystem to a blob it works and the other half it gives this error:

InvalidCharacterError: DOM Exception 5: An invalid or illegal character was specified, such as in an XML name.


It seems like it usually happens when the video is longer than 3 seconds, but it has happened on the really short videos. Here is my
dataURItoBlob
function:

function dataURItoBlob(dataURI) {
var input = dataURI.replace(/\s/g, '');
var binary = atob(input.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: "video/mp4"});
}


I'm really not sure what I am doing wrong and I have tried a couple other similar functions with no luck. Any help is greatly appreciated. Thanks!

TIC TIC
Answer

Found out this was a problem with the base64 dataURI, not the blob function. For some reason it was getting corrupted when trying to use readAsDataUrl. As per this SO answer, I solved it by readAsBinaryData and appending the data:video/mp4;base64, manually.

Cordova - Reading Large Image corrupts image