Telerik - Uploading Videos to Everlive, Unexpected Error

Question

I'm currently trying develop an app in which I want to be able to record a video and I'm testing it at the moment with Teleriks everlive service. It takes me to the video camera on my phone correctly but then after recording as far as I'm aware the file should upload but it instead tells me the upload to the everlive has failed and the err.message is "Unexpected error". If anyone could tell me what i'm doing wrong i'd really appreciate it. Thanks.

var captureSuccess = function (mediaFiles) {
    mediaAdded = true;
    var i, path, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        alert(mediaFiles[i].size);
        var file = {
            Filename: Math.random().toString(36).substring(2, 15) + ".mp4",
            ContentType: "video/mp4",
            base64: mediaFiles[i]
        };

        el.Files.create(file, function (response) {
            alert("Photograph added.");

        }, function (err) {
            navigator.notification.alert("Unfortunately the upload failed: " + err.message);
        });
    }
};

function captureError() {
    alert("Video Not Captured");
}

navigator.device.capture.captureVideo(captureSuccess, captureError, {
    limit: 1,
    duration: 20
});

Cordova media capture https://github.com/apache/cordova-plugin-media-capture This — SammyRob, Jul 07 '16 at 12:17

score 0 · Answer 1 · answered Jul 06 '16 at 13:55

0

It looks like you are assuming the video is base64 (base64: mediaFiles[i]), but it isn't - the result of the captureVideo API will be a file, not a base64 string. If Everlive requires base64, you would need to convert the file first.

answered Jul 06 '16 at 13:55

Raymond Camden

10,661
3
34
68

Thankyou! You're right, the file needs converting first. I'll have a look for how to convert it now. – SammyRob Jul 06 '16 at 15:10
@Raymond is correct about the type of the file. On a side note there is a strict limitation on the size when uploading files in base64 format - "The maximum upload size when using base64 is around 3MB."(this is taken from the documentation). I strongly advice you to try some of the files picker plugins for cordova applications and use it to upload the file. Here is the basic docs on this - http://docs.telerik.com/platform/backend-services/javascript/files/files-upload#upload-files-in-cordova-hybrid-apps. – d1mitar Jul 06 '16 at 21:07
So should I be using the "el.files.upload(fileToUpload, options)" and use mediaFiles[i] as fileToUpload? I'm not too familiar with telerik at the moment. – SammyRob Jul 07 '16 at 09:37
use el.files.upload and pass as "fileToUpload" the path property of your mediaFiles[i]. In the options pass only the filename and mimetype – d1mitar Jul 07 '16 at 10:29
I've created a var called fileToUpload, and passed mediaFiles[i].fullPath into that, but for some reason when "el.files.upload(fileToUpload, options)..." is run, nothing happens, i've added alerts for when the file is uploaded or when there is an error, but neither appear. – SammyRob Jul 07 '16 at 10:51

score 0 · Accepted Answer · answered Jul 07 '16 at 12:50

I have managed to make it working. I have started from the Media Capture sample here - http://docs.telerik.com/platform/samples/Sample-Capture/. Then I have added to the index.html file the script tag for the everlive.sdk.min.js

<script src="https://bs-static.cdn.telerik.com/latest/everlive.all.min.js"></script>

Then modified the captured success function, for clarity i was always testing the capture video, so i hardcoded the mime type and the file name.

_captureSuccess:function(capturedFiles) {
    var i,
    media = document.getElementById("media");
    media.innerHTML = "";
    for (i=0;i < capturedFiles.length;i+=1) {
        media.innerHTML+='<p>Capture taken! Its path is: ' + capturedFiles[i].fullPath + '</p>'
    }

    var el = new Everlive('your-app-id');

    var options = {
        fileName: 'testvideo.mov',
        mimeType: 'video/quicktime'
    };

    el.files.upload(capturedFiles[0].fullPath, options)
    .then(function() {
        console.log('success');
    }, function(err) {
        console.log(JSON.stringify(err));
    });
},

Then comes the most important thing - you must include the File Transfer cordova plugin - https://github.com/apache/cordova-plugin-file-transfer because the everlive sdk assumes it is present when it tries to upload the file. When the plugin was not included, my result was just like yours - neither the usccess nor the error callback was fired, because there was an error in the sdk itself. After I have included the plugin, the SDK successfully uploaded the video. Here is the result:

i think this will get you going with your app

After having a mess about with that sample app and looking at what you've done it is finally working. Now that this is done I should be able to do the same for audio. Thankyou! — SammyRob, Jul 07 '16 at 13:50

Telerik - Uploading Videos to Everlive, Unexpected Error

2 Answers2