DokuWiki

We are considering transloadit.com service to scale large video uploads and conversion.

1. Tranloadit's Jquery plugin is used to integrate in our content creation UI. (https://transloadit.com/docs/#our-jquery-plugin)
It's UI can be customized and the progress upload can just work fine. (https://github.com/transloadit/jquery-sdk/blob/master/js/lib/jquery.transloadit2.js)
The jQuery plugin has number of callbacks which can be easily used to have the same UX as our current upload.

2. We need to convert each video to 3 versions (640×480 mp4, 960×520 mp4 and 640×480 HLS for mobile). We can do this by passing these as options to video robot Example -

  // the plugin initialization code above this
  steps: {
    encode: {
      use: ":original",
      robot: "/video/encode",
      width: 320,
      height: 240,
      preset: "iphone"
    }
  }
}

For every processed format we can give the desired name and location to store the video. These params and success/failure responses can be saved in the data base but they are optional. Video manager flow needs to be changed to handle this. We will not have the video with us initially and will have to depend on transloadit to generate all the formats and thumbnails.

3. For already uploaded videos, if we need to reprocess, we should use ruby sdk.

1. Transloadit by default stores videos on amazon temporarily and supports HLS. It allows an option to copy the files later to either amazon buckets or youtube channel or to any ftp/sftp server. But, this cpoying only happens in the background in a delayed way.

a) Amazon cloud Front - https://transloadit.com/docs/conversion-robots/#s3-store

This means we need to pay for amazon cloud front storage and streaming. But this is one way to scale up our streaming well going forward.

b) Self hosted rtmp server like red5/wowza (Our current setup) - (https://transloadit.com/docs/conversion-robots/#sftp-store) We can have an sftp/ftp server on our red5 machine and let the file get copied here and be streamed in our usual way.

c) Youtube - https://transloadit.com/docs/conversion-robots/#youtube-store

This means , we can have all our videos as youtube hosted ones. Learnexa can buy a channel on youtube and let all our videos get streamed from there. This is not desired as if we are ready to buy youtube paid hosting we may get transcoding also done (not sure about the APIs but will explore).

1. Scales to a few GBs of video. Uploads are faster as they use a cluster of 500 machines for all of their customers.

(Transcoding speeds are almost same like ours as that cant be reduced. Need to handle them in background.)

2. There are a number of presets so converting to more devices will be easy.

3. Easy integration with amazon cloud front so video streaming scales as well.

1. They just have a 1 GB free option and will charge for every video after that. So, even test and staging environment videos will be charged. (Need to build an alternative solution for these environments.) Also, we process video to 3 versions and each version's size plus original video size is taken into billing. Say for example if a 4 GB video is uploaded and it gets processed into 1 GB, 0.5GB, 0.5GB videos, total of 6GB seem to be being accounted for billing.

2. This does not work for our web recording as we process process audio and video streams separately to avoid non synch. This can still cause a limitation if say some one records for webcam video for 1 hour or so. There is a work around but that's hacky.

3. We can't stream the videos immediately as we need to wait for transloadit to copy the videos to our server or to amazon bucket. This is the case even for small videos as we wont have the video on our server. Either we need to implement conversion real time or background as we cant decide it on fly. (NOTE - Will have to explore more on this but so far no options.)

4. Videos can be streamed only after transloadit copies them to either amazon or our ftp. Need to write logic to handle this event.

5. (3) & (4) are already handled better by us but if we go with transloadit we need to change this flow a bit.

Overall this is a very good option for beginners with not much effort invested in transcoding and streaming. But we already have the basic video transcoding and streaming setup and we are looking at options to scale it. For transcodig, transloadit is good but for streaming it any way depends on other services.

So, the best option for us is to scale up our uploading and content servers and add more transcoding options if needed for videos.

Transloadit is only the second best option.

1. https://transloadit.com/demos/media-playlist/implement-http-live-streaming
https://transloadit.com/docs/

2. Sample video creation form code

 $(function() {
    $('#upload-form').transloadit({

        modal: false,
        autoSubmit: false,
        onSuccess: function() {
            // send request to create video content.
            #
            {
                remote_function(: url => video_manager_videos_path(: lightbox => @lightbox, : view_type => @view_type), : with => 'Form.serialize(this)', : method => : post)
            };
            $('file_upload_processing').show();
            return false;
        },
        onError: function(error_code, message) {
            //Show error page.
            $('upload_error').innerHTML = message;
            $('upload_error').show();
        },
        onCancel: function() {
            //reset form

        }

            onProgress: function(bytesReceived, bytesExpected) {
            // render your own progress bar! The following method is defined in learnexa already.
            update_file_upload_progress(bytesReceived, bytesExpected);
        },

        wait: true,
        triggerUploadOnFileSelection: true,
        params: {
            auth: {
                // This is your API key.
                key: "<KEY>"
            },
            steps: {
                processeds: {
                    use: ":original",
                    robot: "/video/encode",
                    preset: "iphone",
                    width: 320,
                    height: 240,
                    resize_strategy: "pad"
                },
                thumb: {
                    robot: "/image/resize",
                    use: ":original",
                    width: 125,
                    height: 125
                },
                thumb_small: {
                    robot: "/image/resize",
                    use: "resize_to_125",
                    width: 75,
                    height: 75,
                    sepia: 80
                }
            }
        }
    });
});