Telerik - Uploading Videos to Everlive, Unexpected Error

106 Views Asked by At

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
});
2

There are 2 best solutions below

1
On BEST ANSWER

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:

video successfully uploaded

i think this will get you going with your app

5
On

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.