Solution Builder API
Basic Uploader JavaScript Settings

10min
Overview
For background information, see Basic Uploader﻿.
The Basic Uploader provides a standard user interface and publishing options using a PUSH or PUT request to upload the recorded 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 ScreenPal application 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.  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 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 permissions have be granted to allow the post.
Text
http://s3.amazonaws.com/.../basicupload.mp4?AWSAccessKeyId=actual_amazon_key_would_be_here
http://s3.amazonaws.com/.../basicupload.mp4?AWSAccessKeyId=actual_amazon_key_would_be_here
﻿
Once the ScreenPal application 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 ScreenPal Recorder and Editor.
Amazon S3 Upload Example
Here is an example PHP script that you can use to sign a URL and upload directly to Amazon S3.  To use this script you would 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 it 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 would like the user to manage their own recordings using the ScreenPal Project 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 ScreenPal application 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 PUSH (or PUT) upload in which case you can set the value to gotoplayback which will open that URL.
When setting this property the ScreenPal application 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 Recording)
To launch the ScreenPal Video Manager without first requiring the user to make a recording, add the property showManager: true to the launch properties. For example:
JS
properties: {
    "showManager": "true",
     ...
}
properties: {
    "showManager": "true",
     ...
}
﻿
﻿
Updated 18 Mar 2024
Deep Linking - Workflows
Basic Uploader Properties