Meride API - Presentation - Video upload

It is possible to load a video inside Meride's platform in two ways: manually through the web panel and by using the APIs. In this page we will describe the upload via API, which makes use of a TUS storage system, which allows more performing uploads, with the possibility of pausing the upload process and being able to upload a video resource even before its transit on the Meride platform.

To upload a video via API it is necessary to provide the access credentials to the authorization server, in this case the internal storage service, which in response provides the codes to be able to upload. Operation can be summarized in the following steps

  1. The application sends a request to the authorization server with authorization key
  2. The server in response will provide an access token [obviously the authorization key must be valid]
  3. The application uses this access token in the header of HTTP requests, i.e. the Header, and makes calls to the service of interest.

Receive Authorization key

The authorization key can be found on the Profile page of your Meride account. The first time you need this code you will find a code generation button on this page and activating it will generate a new code that will be immediately displayed on the screen and will remain visible on the page even during successive access.

Once you have this code, you will be asked for an access token by the authorization server at:

https://storageapi.meride.tv/merideauth/token

For example we can make an authorization request with the curl command

curl --location --request POST 'https://storageapi.meride.tv/merideauth/token' --header 'Content-Type: application/x-www-form-urlencoded' --data-urlencode 'username=meride_client_id' --data-urlencode 'authcode=meride_authcode' --data-urlencode 'state=1234'

The required Headers are

  • username: The client ID of your Meride's main account (always use the client ID and not you personal username that could be different). It represents the first section of the URL of the CMS after https://cms.meride.tv. So if you have https://cms.meride.tv/myname/login, 'myname' will be the username to use
  • authcode: the authorization key
  • state: a random code that limits CSRF attacks. It will be returned in the reply. The same string sent must be returned, otherwise the application should terminate the flow of operations

You will receive an answer similar to this:

    {
        "state": "1234",
        "token": "eyJ...cW1dsfxHVRrdsdfdcqYOcESzVOH91xWS_ZhrR7ZpA"
    }
	

Upload a video

The Meride storage system was built using the TUS protocol which offers multiple benefits in terms of both performance and operations management.

In order to upload a video, however, the implementation may be somewhat cumbersome and for this reason we recommend and explain the use of some libraries that simplify the upload operations.

In general, the system follows a standard protocol and therefore any client that supports the TUS protocol can be used.

1. Example of implementation in PHP

Demo implementation of the Meride API using the PHP language and the \TusPhp\Tus\Client library (https://github.com/ankitpokhrel/tus-php)

define("SERVICE_PROTOCOL", "https");
define("SERVICE_BASE_PATH", "https://storageapi.meride.tv");
define("SERVICE_UPLOAD_PATH", "uploads/files");
define("SERVICE_UPLOAD_TOKEN", "token"); // the value of the token received in the merideauth/token call

function extractURL($uploadUrl) {
    return SERVICE_PROTOCOL.':'.str_replace(SERVICE_UPLOAD_PATH, "file", $uploadUrl);
}

$baseUrl = SERVICE_BASE_PATH;

$outputFileName = 'THE_OUTPUT_FILENAME';
$inputLocalPath = 'LOCAL_PATH_TO_FILE';

$options = [
    'headers' => [
        'AuthType' => 'user',
        'Authorization' => 'Bearer '.SERVICE_UPLOAD_TOKEN
    ]
];
$client = new \TusPhp\Tus\Client($baseUrl, $options);
$client->setApiPath(SERVICE_UPLOAD_PATH);

$key = hash_file('md5', $inputLocalPath);
// setting the key is a mandatory step
$client->setKey($key);
// upload the file
$client->file($inputLocalPath, $outputFileName)->upload();
$uploadedFileURL = extractURL($client->getUrl());
		

1. Example of javascript implementation

Demo implementation of Meride API using javascript language and Uppy library. (https://uppy.io)

Notice that the token will be public so you should keep this implementation inside your own private application.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Uppy implementation</title>
        <link href="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.css" rel="stylesheet">
        <script src="https://transloadit.edgly.net/releases/uppy/v1.5.0/uppy.min.js"></script>
    </head>
    <body>
        <div id="drag-drop-area"></div>
        <script>
            var storageEndpoint = 'http://storageapi.meride.tv/uploads/files';
            var storageKey = 'token';
            var uploadedFileURL = '';
            var uppy = Uppy.Core({
                        allowMultipleUploads: false,
                        restrictions: {
                            maxFileSize: 2000000000,
                            maxNumberOfFiles: 1,
                            minNumberOfFiles: null,
                            allowedFileTypes: ['.avi','.mpg','.mp4','.flv','.mov','.wmv']
                        },
                    })
                    .use(Uppy.Dashboard, {
                        inline: true,
                        proudlyDisplayPoweredByUppy: false,
                        target: '#drag-drop-area',
                        hideUploadButton: false
                    })
                    .use(Uppy.Tus, {
                        endpoint: storageEndpoint,
                        resume: true,
                        autoRetry: true,
                        removeFingerprintOnSuccess: true, 
                        limit:1,
                        retryDelays: [0, 1000, 3000, 5000],
                        headers: {
                            'AuthType': 'user',
                            'Authorization': 'Bearer ' + storageKey
                        }
                    });
            uppy.reset();
            uppy.on('complete', function(result){
                if (result.failed.length > 0) {
                    console.log("upload failed");
                } else {
                    console.log('Upload complete!');
                    uploadedFileURL = extractURL(result.successful[0].response.uploadURL);
                    console.log("The generated URL is " + uploadedFileURL);
                }
            });
        </script>
    </body>
</html> 
    

Once you get the uploaded file URL (variable uploadedFileURL in the example) you can send it as video parametr of the video creation API.