Add AWS S3 upload to Record extension

This PR adds AWS S3 uploading to the lookit-jspsych record package (currently on the video branch).

Notes:

This relies on an .env file in the data package root, which contains the AWS variables.
I renamed the 'S3' class/file to 'LookitS3' to avoid confusion with AWS's 'S3'.
The 'LookitS3' class is almost identical to the EFP's S3 class. The changes here just adapt the names/syntax for v3 of the AWS SDK.
I've kept the local download option, in case it's useful for development etc. It is set to false but can be turned on by setting it to true in this line: private localDownload: boolean = true;. We can either get rid of the local download option entirely, or add this as an optional extension/plugin parameter (default = false).
We need to look at aligning/marking the timing of the recording vs the trial/stimuli start time. We could try to sync these things (for trial recording) but we don't want to risk missing the trial onset in the start of the recording, so we might be better off making sure that the recording always starts before the trial, and saving the recording stream time at the time when the trial loads. For session recordings, we should save the recording stream time that corresponds to the trial load time for all trials that occur between the record package's start and stop trials.

Trial recording example code:

const timeline = [];

const jsPsych = initJsPsych({
    extensions: [{
        type: chsRecord.TrialRecordExtension
    }]
});

const consent_survey = {
    type: chsSurvey.consent,
    survey_json: {
        elements: {
            type: "boolean",
            name: "consent",
            title: "This is a consent question. Click yes to continue.",
            required: true
        }
    },
    validation_function: function(_, options) {
        if (options.name === "consent") {
            if (!options.value) {
                options.error = "You must select 'Yes' to continue.";
            }
        }
    }
};

const init_camera = {
    type: jsPsychInitializeCamera
};

const trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `<div id="target" style="width:250px; height: 250px; background-color: #333; position: relative; margin: 2em auto;"> <div class="orbit" style="width:25px; height:25px; border-radius:25px;background-color: #f00; position: absolute; top:calc(50% - 12px); left:calc(50% - 12px);"></div> </div> <style> .orbit { transform: translateX(100px); animation: orbit 4s infinite; } @keyframes orbit { 0% { transform: rotate(0deg) translateX(100px); } 100% { transform: rotate(360deg) translateX(100px); } } </style>`,
    choices: ["Done"],
    prompt: "<p>Video is recording. Click done after a few seconds.</p>",
    extensions: [{
        type: chsRecord.TrialRecordExtension
    }],
};

const exit_survey = {
    type: chsSurvey.exit,
}

timeline.push(consent_survey, init_camera, trial, exit_survey);

jsPsych.run(timeline);

Session recording example code:

const timeline = [];

const jsPsych = initJsPsych({});

const consent_survey = {
    type: chsSurvey.consent,
    survey_json: {
        elements: {
            type: "boolean",
            name: "consent",
            title: "This is a consent question. Click yes to continue.",
            required: true
        }
    },
    validation_function: function(_, options) {
        if (options.name === "consent") {
            if (!options.value) {
                options.error = "You must select 'Yes' to continue.";
            }
        }
    }
};

const init_camera = {
    type: jsPsychInitializeCamera
};

const start_rec = {
    type: chsRecord.StartRecordPlugin
};

const trial = {
    type: jsPsychHtmlButtonResponse,
    stimulus: `<div id="target" style="width:250px; height: 250px; background-color: #333; position: relative; margin: 2em auto;"> <div class="orbit" style="width:25px; height:25px; border-radius:25px;background-color: #f00; position: absolute; top:calc(50% - 12px); left:calc(50% - 12px);"></div> </div> <style> .orbit { transform: translateX(100px); animation: orbit 4s infinite; } @keyframes orbit { 0% { transform: rotate(0deg) translateX(100px); } 100% { transform: rotate(360deg) translateX(100px); } } </style>`,
    choices: ["Done"],
    prompt: "<p>Video is recording. Click done after a few seconds.</p>"
};

const stop_rec = {
    type: chsRecord.StopRecordPlugin
};

const exit_survey = {
    type: chsSurvey.exit,
}

timeline.push(consent_survey, init_camera, start_rec, trial, stop_rec, exit_survey);

jsPsych.run(timeline);

To do:

[x] Fix test coverage for LookitS3
[x] Test session recording (start/stop plugins) and add working example code
[x] Fix file naming - needs to be set by recording plugin/extension and passed into Recorder constructor

lookit / lookit-jspsych

Add AWS S3 upload to Record extension #29

⚠️ No Changeset found