Video Snapshot Plugin Documentation

Live Offline Options

Here is a list of the configuration options:

Filename Configuration

To send a custom filename for the capture image configure this on the video config with a snapshotnames or snapshotname property with a time postfix format to add the current frame time

When using a multiple dimensions config the filenames list needs to match and the snapshotnames is required.

{
    "snapshotname": "test2-[time]"
}

:::json
{
    "snapshotnames": [
        "test2.jpg",
        "test2-thumb.jpg"
    ]
}

Multiple Dimensions

To produce multiple sizes with high quality resizing and downsampling the dimensions config is required. For thumnails the thumbnail property is required on that size.

If only a thumbnail dimension is configured the original video dimensions will be used for the larger still.

A width an height can be set. If only a width is set the height will be scaled which is the default option.

{
    "dimensions": [
        //configure thumbnail width to auto scale height to
        { "width": 180, "thumbnail": true }
    ]
}

:::json
{
    "dimensions": [
        { "width": 600 },
        { "width": 400 },
        { "width": 180, "thumbnail": true }
    ]
}

Javascript API

Javascript api

player.capture();

Events

The capture complete event returns data for the generated encoded still and thumbnail as a base64 data uri string. For Html5 captures it also returns the original canvas. For backend storing of captures the data from the server is also returned.

Token Server

The configured token server must return a Access-Control-Allow-Origin for Ajax requests and a csrf hash in a json object string like so:

{"token":"f38c9bd8483916513f057a6ea71a6d24"}

If extra authentication data is required along with the token hash these can be returned with the token service and sent to the image upload service.

{"token":"f38c9bd8483916513f057a6ea71a6d24", "extrahash" : "54353985398235985328953358"}

If required the tokendata can be configured with extra authentication properties for the token server to use to authenticate the client and request.

NOTE: Safari tries to block third party cookie sessions with ajax requests so a special P3P header is required to work around this.

Backend Server

Included is a backend server which demonstrates handling the cors headers required for Ajax requests, filtering the post and the image sent as a base64 encoded string or as multiple file uploads. The server should provide the parameter and token hash security and base64 decode the image as a string and store on the server. File uploads should be validated. The following properties are required or optional:

CORS Rules Requirements

For this feature to work successfully both the backend server and the video hosting server require Cross Origin Resource Sharing rules to be enabled in the headers of the request.

This is required to enable cross origin Ajax requests when posting the captured image data and to be able to gain access to the video data within a Html5 video tag.

The header of the cors request must expose a Access-Control-Allow-Origin header with either a multiple list of domains including ports if using ports or an asterix wildcard to allow all domains.

A Access-Control-Allow-Methods can be exposed to control what request methods are allowed. For authenticated logins with cookies the Access-Control-Allow-Credentials header must be enabled and the feature will pass cookie sessions and other cookies along with the request.