Corrupt base64 encoded string from a video on iOS

mobile
1

I’m trying to retrieve a video from the local web app running on iOS / Cordova, base64 encoding it and then serving the src in a video element (the idea is to save the base64 later on but for testing purposes and because saving it wasn’t working I’m serving it up within a video element for now).

The video loads up and plays fine when I link to it from the local web app like so:

<video src="/local-filesystem/var/mobile/Containers/Data/Application/##########-####-####-####-################/Library/NoCloud/testvideo123.mp4"></video>

But when I try and fetch it through XHR and convert it to base64, it doesn’t play and I get a MEDIA_ERR_SRC_NOT_SUPPORTED error from the video element:

// Function to fetch a file from meteor's local web server in base64
function getBlobURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
}

var url = '/var/mobile/Containers/Data/Application/##########-####-####-####-################/Library/NoCloud/testvideo123.mp4';
var file = '/local-filesystem' + url;

getBlobURL(file, function (base64video) {
  console.log(base64video.substr(0,200)); // logging first 200 characters of the video base64 string (see below)
  $('div').append('<video src="'+base64video+'" autoplay controls playsinline webkit-playsinline></video>');
});

Here are the first 200 characters from the base64 encoded string:

data:video/mp4;base64,AAAAFGZ0eXBxdCAgAAAAAHF0ICAAAAAId2lkZQAAAABtZGF0AMxABwDume5NmehMFWjKCUoVE58eL543GCwAdL/OAAAAAHYNjhAP+J6AA4H/lgHx77IAAFeL/F9oAAHS+b1OzAAD5D6brvIAAAAfb9P3vx/73uAAAA/zf2b9M4v9n92AAA

Any help with this would be greatly appreciated as I don’t have any experience with the FileReader class and am completely out of ideas.

2

Is there some other preferred method of getting a base64 encoded string from a file on the local web server? Or accessing the local files in general?

3

Can’t you just put the video in your public/ directory in the app bundle and then just access it like any other image asset in your app?

4

Thanks for the help @M4v3R. The video isn’t there on runtime. It’s captured with the device’s camera and saved (on iOS) via AVCaptureMovieFileOutput.

I can access the file fine via XHR on /local-filesystem/var/mobile/Containers/Data/Application/##########-####-####-####-################/Library/NoCloud/testvideo123.mp4, I can even play it when I use that URL in the src of a <video> element. But when I try and encode it to base64 it ends up being corrupt and that’s why I’m wondering if there’s another way of accessing files locally on the device.