Configure the Basic Uploader

11min
Use the following information as a guide to configure how the basic uploader uploads a finished video file. Also see Setting Basic Uploader Properties﻿ for other properties you can set to customize the user interface.
Description of Basic Uploading
The Basic Uploader provides a standard user interface and publishing option using a PUSH or PUT request to upload the video to your backend.
After the user completes a recording they will see an optional form to enter a title and/or description for their recording and an "Upload" button to start the upload.
When the user clicks the "Upload" button the app will make a request to your backend to the URL provided in the basicupload.request.url property using a POST request to send any title/description, or if not collecting title/description, a GET request is made:
JS
"basicupload.request.url":"http://.../MyUrlProvider"
"basicupload.request.url":"http://.../MyUrlProvider"
﻿
The response from the MyUrlProvider script must be a single line of text with a URL where the actual mp4 video should be a POST (or PUT).  For example, if you were using the S3 Amazon Example below then the response returns a pre-signed Amazon S3 URL where we have permissions to post:

﻿http://s3.amazonaws.com/.../basicupload.mp4?AWSAccessKeyId=actual_amazon_key_would_be_here

Once the app has this final URL, it will make a POST (or PUT) request with the body of the request being the mp4 file. The body is not encoded (like form data from a browser), but a raw mp4 file.

Take a look at the full list of Basic Uploader Properties﻿ to see how to customize branding and message strings in the screen recorder and video editor.

Amazon S3 Upload Example
Here's an example PHP script that you can use to sign a URL and upload directly to Amazon S3.  To use this script you'd set the following properties when launching:  
JS
"basicupload.request.url": "http://.../basicuploadS3Upload.php",
"basicupload.post.method":"PUT",
"basicupload.post.extraheaders.1":"x-amz-acl:public-read",
"basicupload.request.url": "http://.../basicuploadS3Upload.php",
"basicupload.post.method":"PUT",
"basicupload.post.extraheaders.1":"x-amz-acl:public-read",
﻿
In this case we also need an extra property to set an additional header which is sent to Amazon S3 with the PUT request to mark that this mp4 is publicly readable.

Here's an example basicuploadS3Upload.php which creates a signed URL that we can use to PUT the mp4 file on Amazon S3:
PHP
<?php
// Requires this php library (https://pear.php.net/package/Crypt_HMAC).
require_once('Crypt/HMAC.php');
// If you are using the title/desc options then this request will be a POST and have these:
$title = $_POST['title'];
$desc = $_POST['description'];
// The result of this request must be a single string with the real URL to PUT the mp4 video file.
// In this example we are going to PUT to s3 bucket and folder:
echo createUrl("BUCKET/folder/video_name.mp4","PUT","video/mp4");
//
// Functions to create the signed URL to PUT in Amazon S3 button...
//
function createUrl($object, $method, $contentType) {
    $S3_URL = "http://s3.amazonaws.com/";
    $accessIdKey = "YOUR_S3_PUBLIC_KEY";
    $accessIdSecret = "YOUR_S3_PRIVATE_KEY";
    $expires = time() + 120; // They have 1 minutes to do the upload else this URL will expire
    // Note this will upload video with public-read so you can stream from the bucket. 
    $stringToSign = "$method\n\n$contentType\n$expires\nx-amz-acl:public-read\n/$object";
    $hasher =& new Crypt_HMAC($accessIdSecret, "sha1");
    $sig = urlencode(hex2b64($hasher->hash($stringToSign)));
    return "$S3_URL/$object?AWSAccessKeyId=$accessIdKey&Expires=$expires&Signature=$sig";
}
function hex2b64($str) {
    $raw = '';
    for ($i=0; $i < strlen($str); $i+=2) {
        $raw .= chr(hexdec(substr($str, $i, 2)));
    }
    return base64_encode($raw);
}
?>
<?php
// Requires this php library (https://pear.php.net/package/Crypt_HMAC).
require_once('Crypt/HMAC.php');
// If you are using the title/desc options then this request will be a POST and have these:
$title = $_POST['title'];
$desc = $_POST['description'];
// The result of this request must be a single string with the real URL to PUT the mp4 video file.
// In this example we are going to PUT to s3 bucket and folder:
echo createUrl("BUCKET/folder/video_name.mp4","PUT","video/mp4");
//
// Functions to create the signed URL to PUT in Amazon S3 button...
//
function createUrl($object, $method, $contentType) {
    $S3_URL = "http://s3.amazonaws.com/";
    $accessIdKey = "YOUR_S3_PUBLIC_KEY";
    $accessIdSecret = "YOUR_S3_PRIVATE_KEY";
    $expires = time() + 120; // They have 1 minutes to do the upload else this URL will expire
    // Note this will upload video with public-read so you can stream from the bucket. 
    $stringToSign = "$method\n\n$contentType\n$expires\nx-amz-acl:public-read\n/$object";
    $hasher =& new Crypt_HMAC($accessIdSecret, "sha1");
    $sig = urlencode(hex2b64($hasher->hash($stringToSign)));
    return "$S3_URL/$object?AWSAccessKeyId=$accessIdKey&Expires=$expires&Signature=$sig";
}
function hex2b64($str) {
    $raw = '';
    for ($i=0; $i < strlen($str); $i+=2) {
        $raw .= chr(hexdec(substr($str, $i, 2)));
    }
    return base64_encode($raw);
}
?>
﻿
﻿
Save on Server Upload Example
The following example uses PHP to read the raw input stream of the POST request and writes to a local file.

To use this script you'd set the following properties when launching:  
JS
"basicupload.request.url": "http://.../basicuploadSaveUpload.php",
"basicupload.request.url": "http://.../basicuploadSaveUpload.php",
﻿
The basicuploadSaveUpload.php script below reads the mp4 file from the request input stream and saves to a local file in /tmp, but it can be placed anywhere on the server that you have write permission:
PHP
<?php
    /* data comes in on the stdin stream */
    $putdata = fopen(""php://input"", ""r"");
    $fp = fopen(""/tmp/test.mp4"", ""w"");
    /* Read the data 1 KB at a time and write to the file */
    while ($data = fread($putdata, 1024))
    fwrite($fp, $data);
    /* Close the streams */
    fclose($fp);
    fclose($putdata);
?>
<?php
    /* data comes in on the stdin stream */
    $putdata = fopen(""php://input"", ""r"");
    $fp = fopen(""/tmp/test.mp4"", ""w"");
    /* Read the data 1 KB at a time and write to the file */
    while ($data = fread($putdata, 1024))
    fwrite($fp, $data);
    /* Close the streams */
    fclose($fp);
    fclose($putdata);
?>
﻿
﻿
Customizing the Success Message
After the upload a message is displayed to the user.  To provide a custom message to your users, change the upload success message by setting this property:
JS
properties: {     
    ...
    "basicupload.success.message": "Enter a custom html message here"
}
properties: {     
    ...
    "basicupload.success.message": "Enter a custom html message here"
}
﻿
﻿
Turning Off Autodelete
By default the recorder will remove the local recording from the computer after a successful upload.  If you'd like the user to manage their own recordings using the recordings manager then you can disable this feature by setting this property:
﻿
JS
properties: {
     ...
    "som.*.app.upload.deleteafter": false
}
properties: {
     ...
    "som.*.app.upload.deleteafter": false
}
﻿
﻿
Sending the User to a URL
After a successful upload the app can open a URL by setting this property:
JS
properties: {     
    ...    
    "som.*.app.upload.onexit.action": "http://yoururl/" 
}
properties: {     
    ...    
    "som.*.app.upload.onexit.action": "http://yoururl/" 
}
﻿
You can also return a URL as the text result of the PUT / POST upload in which case you can set the value to gotoplayback which will open that URL.

When setting this property the app will show a "Continue" button to the user after a successful upload and then open this URL when they click the "Continue" button.
﻿
Launching the Editor (Without First Capturing)

To launch the local recordings manager without first doing a screencast, change the behavior of the launcher to open a window showing local recordings on the computer. Do this by adding the property showManager: true to the launch properties. For example:
JS
properties: {
    "showManager": "true",
     ...
}
properties: {
    "showManager": "true",
     ...
}
﻿
﻿
Updated 01 Sep 2023
Screen Recorder Launcher API Functions (cloned)
Basic Uploader Properties