Implement HTTP Live Streaming (HLS) using Transloadit

The demo below encodes a video, cuts it into several segments, generates a playlist file containing all the segments, and stores the segments and the playlist file on Amazon S3.

Our media/playlist robot also supports the generation of master playlist files if you use several playlists as input. For more information about that, please check the documentation.



If you want Transloadit to handle uploads for you, here is some example HTML and JavaScript that can be integrated directly into your website.

We have a great new JavaScript uploader in the works called Uppy and you are welcome to give that a shot, but for now, the following example uses our jQuery SDK and it is still the recommended way to integrate Transloadit into web browsers. 

<html>
<head><title>Some demo title</title></head>
<body>
<form action="/uploads" enctype="multipart/form-data" method="POST">
  <input type="file" name="my_file" multiple="multiple" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//assets.transloadit.com/js/jquery.transloadit2-v2-latest.js"></script>
<script type="text/javascript">
$(function() {
  $('form').transloadit({
    wait: true,
    triggerUploadOnFileSelection: true,
    params: {
      auth: {
        key: "YOUR_TRANSLOADIT_AUTH_KEY",
      },
      steps: {
        "segments": {
          "use": ":original",
          "robot": "/video/encode",
          "result": true,
          "preset": "iphone-high",
          "segment": true,
          "segment_duration": 10,
          "ffmpeg_stack": "v2.2.3"
        },
        "stored_segments": {
          "robot": "/s3/store",
          "use": "segments",
          "key": "YOUR_AWS_KEY",
          "secret": "YOUR_AWS_SECRET",
          "bucket": "YOUR_S3_BUCKET"
        },
        "playlist": {
          "robot": "/media/playlist",
          "use": {
            "steps": "stored_segments",
            "bundle_steps": true
          },
          "result": true
        },
        "store_playlist": {
          "robot": "/s3/store",
          "use": "playlist",
          "key": "YOUR_AWS_KEY",
          "secret": "YOUR_AWS_SECRET",
          "bucket": "YOUR_S3_BUCKET"
        }
      }
    },
  });
});
</script>
</body>
</html>

Notifying your server

Transloadit will then accept the upload on behalf of your site, process all the files according to your instructions and export to your storage platform of choice. Your visitor will now be able to upload links to the results (example) to your website's /uploads URL.

This takes the pressure off your platform, and ensures the user will have a smooth experience.

Typically, it is advisable to save a record of the result in your database, so you will need to inspect the transloadit POST payload that was sent to your /uploads, or Notification URL. In PHP, that would look like this: 

print_r(json_decode($_POST['transloadit'], true));

Would you like to handle your own file uploads? Or do you have a big library of files ready to be encoded? You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases, we have a REST API available. You can write code in your favorite language to talk to it. Setting it up should be easy, since we have SDKs available for all major languages and platforms.

This demo uses :original, which indicates a user upload that was received by Transloadit. So, for this SDK, you will likely want to add one of our import Robots and use their downloads instead.

Here is an example of our PHP SDK. 

// Install "transloadit/php-sdk" via Composer (https://getcomposer.org)
use transloadit\Transloadit;
$transloadit = new Transloadit(array(
  "key"    => "YOUR_TRANSLOADIT_AUTH_KEY",
  "secret" => "YOUR_TRANSLOADIT_AUTH_SECRET",
));

$response = $transloadit->createAssembly(array(
  "files" => array(
    "./lolcat.jpg",
  ),
  "params" => array(
    "steps" => json_decode({
      "segments": {
        "use": ":original",
        "robot": "/video/encode",
        "result": true,
        "preset": "iphone-high",
        "segment": true,
        "segment_duration": 10,
        "ffmpeg_stack": "v2.2.3"
      },
      "stored_segments": {
        "robot": "/s3/store",
        "use": "segments",
        "key": "YOUR_AWS_KEY",
        "secret": "YOUR_AWS_SECRET",
        "bucket": "YOUR_S3_BUCKET"
      },
      "playlist": {
        "robot": "/media/playlist",
        "use": {
          "steps": "stored_segments",
          "bundle_steps": true
        },
        "result": true
      },
      "store_playlist": {
        "robot": "/s3/store",
        "use": "playlist",
        "key": "YOUR_AWS_KEY",
        "secret": "YOUR_AWS_SECRET",
        "bucket": "YOUR_S3_BUCKET"
      }
    }, true),
  ),
));

Would you like to handle your own file uploads? Or do you have a big library of files ready to be encoded? You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases, we have a REST API available. You can write code in your favorite language to talk to it. Setting it up should be easy, since we have SDKs available for all major languages and platforms.

This demo uses :original, which indicates a user upload that was received by Transloadit. So, for this SDK, you will likely want to add one of our import Robots and use their downloads instead.

Here is an example of our Ruby SDK. 

# gem install transloadit
transloadit = Transloadit.new(
  :key    => 'YOUR_TRANSLOADIT_AUTH_KEY',
  :secret => 'YOUR_TRANSLOADIT_AUTH_SECRET'
)

segments = transloadit.step 'segments', '/video/encode',
  :use => ":original",
  :result => true,
  :preset => "iphone-high",
  :segment => true,
  :segment_duration => 10,
  :ffmpeg_stack => "v2.2.3"
})
stored_segments = transloadit.step 'stored_segments', '/s3/store',
  :use => "segments",
  :key => "YOUR_AWS_KEY",
  :secret => "YOUR_AWS_SECRET",
  :bucket => "YOUR_S3_BUCKET"
})
playlist = transloadit.step 'playlist', '/media/playlist',
  :use => {"steps":"stored_segments","bundle_steps":true},
  :result => true
})
store_playlist = transloadit.step 'store_playlist', '/s3/store',
  :use => "playlist",
  :key => "YOUR_AWS_KEY",
  :secret => "YOUR_AWS_SECRET",
  :bucket => "YOUR_S3_BUCKET"
})

assembly = transloadit.assembly(
  :steps => [ segments, stored_segments, playlist, store_playlist ]
)

response = assembly.submit! open('./lolcat.jpg')
until response.finished?
  sleep 1; response.reload!
end

if !response.error?
 # handle success
end

Would you like to handle your own file uploads? Or do you have a big library of files ready to be encoded? You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases, we have a REST API available. You can write code in your favorite language to talk to it. Setting it up should be easy, since we have SDKs available for all major languages and platforms.

This demo uses :original, which indicates a user upload that was received by Transloadit. So, for this SDK, you will likely want to add one of our import Robots and use their downloads instead.

Here is an example of our Node.js SDK. 

// npm install --save --save-exact transloadit
var TransloaditClient = require('transloadit');
var transloadit       = new TransloaditClient({
  authKey    : "YOUR_TRANSLOADIT_AUTH_KEY",
  authSecret : "YOUR_TRANSLOADIT_AUTH_SECRET"
});

transloadit.addFile("myimage", "./lolcat.jpg");

var options = {
  params: {
    steps: {
      "segments": {
        "use": ":original",
        "robot": "/video/encode",
        "result": true,
        "preset": "iphone-high",
        "segment": true,
        "segment_duration": 10,
        "ffmpeg_stack": "v2.2.3"
      },
      "stored_segments": {
        "robot": "/s3/store",
        "use": "segments",
        "key": "YOUR_AWS_KEY",
        "secret": "YOUR_AWS_SECRET",
        "bucket": "YOUR_S3_BUCKET"
      },
      "playlist": {
        "robot": "/media/playlist",
        "use": {
          "steps": "stored_segments",
          "bundle_steps": true
        },
        "result": true
      },
      "store_playlist": {
        "robot": "/s3/store",
        "use": "playlist",
        "key": "YOUR_AWS_KEY",
        "secret": "YOUR_AWS_SECRET",
        "bucket": "YOUR_S3_BUCKET"
      }
    }
  }
};
transloadit.createAssembly(options, function(err, result) {
  if (err) {
    throw new Error(err);
  }

  console.log(result);
});

Would you like to handle your own file uploads? Or do you have a big library of files ready to be encoded? You could still leverage Transloadit's highly scalable encoding platform by letting us import from your source or post files directly from your server.

For these cases, we have a REST API available. You can write code in your favorite language to talk to it. Setting it up should be easy, since we have SDKs available for all major languages and platforms.

This demo uses :original, which indicates a user upload that was received by Transloadit. So, for this SDK, you will likely want to add one of our import Robots and use their downloads instead.

Here is an example of our Go SDK. 

// go get github.com/transloadit/go-sdk
options := transloadit.DefaultConfig
options.AuthKey = "YOUR_TRANSLOADIT_AUTH_KEY"
options.AuthSecret = "YOUR_TRANSLOADIT_AUTH_SECRET"
client, err := transloadit.NewClient(options)
if err != nil {
    panic(err)
}

assembly := client.CreateAssembly()
assembly.AddFile("myimage", "./lolcat.jpg")

assembly.AddStep("segments", map[string]interface{}{
  "use": ":original",
  "robot": "/video/encode",
  "result": true,
  "preset": "iphone-high",
  "segment": true,
  "segment_duration": 10,
  "ffmpeg_stack": "v2.2.3"
})assembly.AddStep("stored_segments", map[string]interface{}{
  "robot": "/s3/store",
  "use": "segments",
  "key": "YOUR_AWS_KEY",
  "secret": "YOUR_AWS_SECRET",
  "bucket": "YOUR_S3_BUCKET"
})assembly.AddStep("playlist", map[string]interface{}{
  "robot": "/media/playlist",
  "use": {"steps":"stored_segments","bundle_steps":true},
  "result": true
})assembly.AddStep("store_playlist", map[string]interface{}{
  "robot": "/s3/store",
  "use": "playlist",
  "key": "YOUR_AWS_KEY",
  "secret": "YOUR_AWS_SECRET",
  "bucket": "YOUR_S3_BUCKET"
})

info, err := assembly.Upload()
if err != nil {
    panic(err)
}

Instead of sending encoding instructions directly to Transloadit, you can also save them in a secured way as a "Template". You can then refer to the template_id in your requests, making sure that secrets and instructions no longer have to be transmitted, which might be a security risk in many cases.

Here is the 'raw' Template, in case you would like to save these instructions safely in your account. 

{
  "steps": {
    "segments": {
      "use": ":original",
      "robot": "/video/encode",
      "result": true,
      "preset": "iphone-high",
      "segment": true,
      "segment_duration": 10,
      "ffmpeg_stack": "v2.2.3"
    },
    "stored_segments": {
      "robot": "/s3/store",
      "use": "segments",
      "key": "YOUR_AWS_KEY",
      "secret": "YOUR_AWS_SECRET",
      "bucket": "YOUR_S3_BUCKET"
    },
    "playlist": {
      "robot": "/media/playlist",
      "use": {
        "steps": "stored_segments",
        "bundle_steps": true
      },
      "result": true
    },
    "store_playlist": {
      "robot": "/s3/store",
      "use": "playlist",
      "key": "YOUR_AWS_KEY",
      "secret": "YOUR_AWS_SECRET",
      "bucket": "YOUR_S3_BUCKET"
    }
  }
}

Try it out

Maximum size for all demos is 100MB.

0% Complete

If you are wondering about security, we can save secrets server-side and encrypt them for you inside a Template. Furthermore, we also support Signature Authentication to protect instructions from being tampered with.

Transloadit is a service for companies with developers, aimed at handling large amounts of media. While we are happy to help you integrate Transloadit into automated systems, we cannot provide support for visitors wanting to do one-off media conversions.