1

Here is my scenario. I've created an Add-On for Google Docs that acts as a video toolbox.

A feature I'm trying to add is the ability to record a video using the built in web cam (using videojs-recorder) and then link to that video within the doc. I've got the video part working, but not sure how to get the webm JS Blob converted into a Google Blob so I can create a file on the users Google Drive for sharing and linking.

Just to figure out how this might work this is what I've done so far without any luck.

CLIENT SIDE CODE

//event handler for video recording finish   
vidrecorder.on('finishRecord', function()
{
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished recording: ', vidrecorder.recordedData);
    google.script.run.withSuccessHandler(function(){
        console.log("winning");
    }).saveBlob(vidrecorder.recordedData);
});

SERVER SIDE CODE

function saveBlob(blob) {
    Logger.log("Uploaded %s of type %s and size %s.",
            blob.name,
            blob.size, 
            blob.type);
}

The errors I get seem to be related to serialization of the blob. But really the exceptions aren't very useful - and just point to some minimized code.

EDIT: Note that there is no FORM object involved here, hence no form POST, and no FileUpload objects, as others have indicated that this might be a duplicate, however it's slightly different in that we are getting a Blob object and need to save it to the server.

Community
  • 1
  • 1
Jim
  • 668
  • 8
  • 22
  • use the answer above to send a form. then send the form in apps script with https://developers.google.com/apps-script/guides/html/communication#forms – Zig Mandel Apr 21 '16 at 15:56

1 Answers1

0

Thanks goes to Zig Mandel and Steve Webster who provided some insight from the G+ discussion regarding this.

I finally pieced together enough bits to get this working.

CLIENT CODE

        vidrecorder.on('finishRecord', function()
        {
            // the blob object contains the recorded data that
            // can be downloaded by the user, stored on server etc.
            console.log('finished recording: ', vidrecorder.recordedData.video);
            var blob = vidrecorder.recordedData.video;

            var reader = new window.FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                b64Blob = reader.result;
                 google.script.run.withSuccessHandler(function(state){
                        console.log("winning: ", state);
                 }).saveB64Blob(b64Blob);
            };

        });

SERVER CODE

function saveB64Blob(b64Blob) {
    var success = { success: false, url: null};
    Logger.log("Got blob: %s", b64Blob);
    try {
        var blob = dataURItoBlob(b64Blob);
        Logger.log("GBlob: %s", blob);
        var file = DriveApp.createFile(blob);
        file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.COMMENT);
        success = { success: true, url: file.getUrl() };
    } catch (error) {
        Logger.log("Error: %s", error);
    }
    return success;
}

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = Utilities.base64Decode(dataURI.split(',')[1]);
    else
        byteString = decodeURI(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    return Utilities.newBlob(byteString, mimeString, "video.webm");
}
Jim
  • 668
  • 8
  • 22