From 5f358868aade7689071565d881c9dd9050620d87 Mon Sep 17 00:00:00 2001
From: Becky Gilbert <beckyannegilbert@gmail.com>
Date: Tue, 30 Jan 2024 09:34:19 -0800
Subject: [PATCH] Replace pipe with RecordRTC (#349)

Replace pipe video recorder with in-house RecordRTC and store directly on S3.
---
 .eslintrc.js                                  |   5 +-
 .../exp-lookit-calibration/component.js       |  14 +-
 .../exp-lookit-change-detection/component.js  |  37 +-
 .../exp-lookit-observation/component.js       | 151 ++++--
 .../exp-lookit-stimuli-preview/component.js   |  15 +-
 .../exp-lookit-stop-recording/component.js    |  32 +-
 .../exp-lookit-video-assent/component.js      |  37 +-
 .../exp-lookit-video-consent/component.js     |  68 +--
 .../component.js                              |   2 +-
 app/components/exp-lookit-video/component.js  |  42 +-
 .../exp-video-config-quality/component.js     | 101 +++-
 .../exp-video-config-quality/template.hbs     |  12 +-
 app/components/exp-video-config/component.js  |   1 +
 app/index.html                                |   5 +-
 app/mixins/frame-player-route.js              |   4 +-
 app/mixins/pause-unpause.js                   |   2 +-
 app/mixins/session-record.js                  |  46 +-
 app/mixins/video-record.js                    | 131 +++--
 app/models/response.js                        |   3 +-
 app/services/mic-check-processor.js           |  34 ++
 app/services/s3.js                            | 106 ++++
 app/services/video-recorder.js                | 468 ++++++++++++++----
 app/styles/app.scss                           |   8 +
 .../components/exp-lookit-observation.scss    |   4 +-
 .../components/exp-video-config-quality.scss  |  76 +++
 config/environment.js                         |   6 +
 public/assets/mic-check-processor.js          |  34 ++
 translations/en-us.yaml                       |   2 +-
 28 files changed, 1103 insertions(+), 343 deletions(-)
 create mode 100644 app/services/mic-check-processor.js
 create mode 100644 app/services/s3.js
 create mode 100644 public/assets/mic-check-processor.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 3e7673ef..05f3f636 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@
 module.exports = {
     root: true,
     parserOptions: {
-        ecmaVersion: 6,
+        ecmaVersion: 8,
         sourceType: 'module',
         ecmaFeatures: {
             'impliedStrict': true
@@ -18,7 +18,8 @@ module.exports = {
         'moment': false,
         'jsPDF': false,
         'Ajv': false,
-        'PipeSDK': false
+        'RecordRTCPromisesHandler': false
+        //'PipeSDK': false
     },
     rules: { // 'warn', 'error', or 'off'
         'no-console': 'off', // allow console.log
diff --git a/app/components/exp-lookit-calibration/component.js b/app/components/exp-lookit-calibration/component.js
index 0725b3e6..88159e8d 100644
--- a/app/components/exp-lookit-calibration/component.js
+++ b/app/components/exp-lookit-calibration/component.js
@@ -115,18 +115,22 @@ export default ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, ExpandAss
         // already been destroyed at that point.
         window.clearInterval(this.get('calTimer'));
         this.disablePausing();
-        var _this = this;
-        if (this.get('doRecording')) {
+        if (this.get('doRecording') && (!this.get('stoppedRecording')) && !(this.get('stopping'))) {
+            this.set('stopping', true);
+            var _this = this;
             this.stopRecorder().then(() => {
                 _this.set('stoppedRecording', true);
+                _this.destroyRecorder();
                 _this.send('next');
-                return;
             }, () => {
+                _this.destroyRecorder();
                 _this.send('next');
-                return;
             });
+        } else if (this.get('doRecording') && this.get('stoppedRecording') && !(this.get('stopping'))) {
+            this.destroyRecorder();
+            this.send('next');
         } else {
-            _this.send('next');
+            this.send('next');
         }
     },
 
diff --git a/app/components/exp-lookit-change-detection/component.js b/app/components/exp-lookit-change-detection/component.js
index a1eb099d..f0f77a26 100644
--- a/app/components/exp-lookit-change-detection/component.js
+++ b/app/components/exp-lookit-change-detection/component.js
@@ -360,15 +360,25 @@ export default ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, ExpandAss
              * @event stoppingCapture
             */
             this.disablePausing();
-            var _this = this;
-            this.stopRecorder().then(() => {
-                _this.set('stoppedRecording', true);
-                _this.send('next');
-                return;
-            }, () => {
-                _this.send('next');
-                return;
-            });
+            if (this.get('doRecording')) {
+                if (!this.get('stoppedRecording') && (!this.get('stopping'))) {
+                    var _this = this;
+                    this.stopRecorder().then(() => {
+                        _this.set('stoppedRecording', true);
+                        _this.destroyRecorder();
+                        _this.send('next');
+                    }, () => {
+                        _this.destroyRecorder();
+                        _this.send('next');
+                    });
+                } else if (this.get('stoppedRecording') && (!this.get('stopping'))) {
+                    this.destroyRecorder();
+                    this.send('next');
+                }
+                // if the recorder is still stopping/uploading, then wait
+            } else {
+                this.send('next');
+            }
 
             this._super(...arguments);
         }
@@ -442,9 +452,9 @@ export default ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, ExpandAss
     // When triangles have been shown for time indicated: play end-audio if
     // present, or just move on.
     endTrial() {
-        this.stopRecorder();
+        
         if (this.get('endAudioSources').length) {
-            $('#player-endaudio')[0].play();
+            $('#player-endaudio')[0].play(); // onended calls finish
         } else {
             this.send('finish');
         }
@@ -607,8 +617,9 @@ export default ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, ExpandAss
             this.pause();
         });
 
-        if (this.get('doRecording')) {
-            let _this = this;
+        if (this.get('doRecording') && !this.get('stoppedRecording') && !this.get('stopping')) {
+            var _this = this;
+            this.set('stopping', true);
             return this.stopRecorder().finally(() => {
                 _this.set('stoppedRecording', true);
                 _this.destroyRecorder();
diff --git a/app/components/exp-lookit-observation/component.js b/app/components/exp-lookit-observation/component.js
index c994304d..9c213a44 100644
--- a/app/components/exp-lookit-observation/component.js
+++ b/app/components/exp-lookit-observation/component.js
@@ -64,11 +64,15 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
     okayToProceedTimer: null,
 
     timerStart: null,
-    hasStartedRecording: false,
+    // Flag to prevent recorder from continuing to automatically start when 'startRecordingAutomatically'
+    // We can't use the recorder's hasCreatedRecording property to track this because a new recorder is created after each recording ends.
+    hasMadeRecording: false,
     recordingStarted: false,
     toggling: false,
     hidden: false,
     recorderElement: '#recorder',
+    // Flag to track that user requests to move on via a next button click while upload is still in progress
+    proceedClicked: false,
 
     frameSchemaProperties: {
         /**
@@ -209,10 +213,10 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
     },
 
     // Override to deal with whether or not recording is starting automatically
-    whenPossibleToRecord: observer('recorder.hasCamAccess', 'recorderReady', function() {
-
-        if (this.get('recorder.hasCamAccess') && this.get('recorderReady')) {
-            if (this.get('startRecordingAutomatically')) {
+    whenPossibleToRecordObserver: observer('recorder.hasCamAccess', 'recorderReady', function() {
+        if (this.get('recorder.hasCamAccess') && this.get('recorderReady') && !(this.get('recorder.recording')) && !(this.get('starting'))) {
+            if (this.get('startRecordingAutomatically') && !(this.get('hasMadeRecording'))) {
+                this.set('starting', true);
                 this.send('record');
             } else {
                 $('#recordButton').show();
@@ -222,7 +226,7 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             if (this.get('hideWebcam')) {
                 $('#webcamToggleButton').html(this._translate('exp-lookit-observation.Show'));
                 $('#hiddenWebcamMessage').show();
-                $(this.get('recorderElement') + ' div').addClass('exp-lookit-observation-hidevideo');
+                $('video').parent('div.lookit-video-recorder').parent().addClass('exp-lookit-observation-hidevideo');
                 this.set('hidden', true);
                 /**
                  * Webcam display hidden from participant
@@ -233,9 +237,13 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             }
         }
 
-
     }),
 
+    // Override to set startedRecording flag when starting automatically or via the record action
+    onRecordingStarted() {
+        this.set('recordingStarted', true);
+    },
+
     didInsertElement() { // initial state of all buttons/text
         $('#hiddenWebcamMessage').hide();
         $('#recordButton').hide();
@@ -255,52 +263,90 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
         $('#nextbutton').text(this.get('nextButtonText'));
     },
 
+    onDestroyed() {
+        // reset any states here, since the recorder variable and states are not actually overwritten/reset
+        // by the recorder's destroy event
+        this.set('starting', false);
+        this.set('stopping', false);
+        this.set('recordingStarted', false);
+        this.set('stoppedRecording', false);
+    },
+
     actions: {
         record() {
 
-            this.startRecorder(); // TODO: use then
-
             var _this = this;
-            if (this.get('recordSegmentLength')) { // no timer if 0
-                window.clearTimeout(this.get('recordingTimer')); // as a precaution in case still running
-                window.clearInterval(this.get('progressTimer'));
-                window.clearTimeout(this.get('okayToProceedTimer'));
-                this.set('timerStart', new Date().getTime());
-                this.set('recordingTimer', window.setTimeout(function() {
-                    /**
-                     * Video recording automatically paused upon reaching time limit
-                     *
-                     * @event recorderTimeout
-                     */
-                    _this.send('setTimeEvent', 'recorderTimeout');
-                    _this.send('pause');
-                }, _this.get('recordSegmentLength') * 1000));
-                this.set('progressTimer', window.setInterval(function() {
-                    var prctDone =  (_this.get('recordSegmentLength') * 1000 - (new Date().getTime() - _this.get('timerStart'))) / (_this.get('recordSegmentLength') * 10);
-                    $('.progress-bar').css('width', prctDone + '%');
-                }, 100));
-                if (this.get('recordingRequired')) {
-                    this.set('okayToProceedTimer', window.setTimeout(function() {
-                        _this.enableNext();
-                    }, 1000 * this.get('recordingRequired')));
+            this.startRecorder().then(() => {
+                _this.set('starting', false);
+
+                // set up timer and progress bar if necessary
+                if (this.get('recordSegmentLength')) { // no timer if 0
+                    window.clearTimeout(this.get('recordingTimer')); // as a precaution in case still running
+                    window.clearInterval(this.get('progressTimer'));
+                    window.clearTimeout(this.get('okayToProceedTimer'));
+                    this.set('timerStart', new Date().getTime());
+                    this.set('recordingTimer', window.setTimeout(function() {
+                        /**
+                         * Video recording automatically paused upon reaching time limit
+                         * @event recorderTimeout
+                         */
+                        _this.send('setTimeEvent', 'recorderTimeout');
+                        _this.send('pause');
+                    }, _this.get('recordSegmentLength') * 1000));
+                    this.set('progressTimer', window.setInterval(function() {
+                        var prctDone =  (_this.get('recordSegmentLength') * 1000 - (new Date().getTime() - _this.get('timerStart'))) / (_this.get('recordSegmentLength') * 10);
+                        $('.progress-bar').css('width', prctDone + '%');
+                    }, 100));
+                    if (this.get('recordingRequired')) {
+                        this.set('okayToProceedTimer', window.setTimeout(function() {
+                            _this.enableNext();
+                        }, 1000 * this.get('recordingRequired')));
+                    }
                 }
-            }
-            $('#pauseButton').show();
-            $('#recordButton').hide();
-            $('#recordingIndicator').show();
-            $('#recordingText').text(`${this._translate('exp-lookit-observation.Recording')}...`);
-            $('#recordButtonText').text(this._translate('exp-lookit-observation.Record'));
+
+                $('#pauseButton').show();
+                $('#recordButton').hide();
+                $('#recordingIndicator').show();
+                $('#recordingText').text(`${this._translate('exp-lookit-observation.Recording')}...`);
+                $('#recordButtonText').text(this._translate('exp-lookit-observation.Record'));
+
+            });
+           
         },
 
         proceed() { // make sure 'next' fires while still on this frame
             window.clearTimeout(this.get('recordingTimer')); // no need for current timer
             window.clearTimeout(this.get('okayToProceedTimer'));
             window.clearInterval(this.get('progressTimer'));
-            this.stopRecorder().finally(() => {
-                this.destroyRecorder();
+            let rec = this.get('recorder');
+            this.set('proceedClicked', true);
+            if (rec && !(rec._recorderIsDestroyed)) {
+                var _this = this;
+                rec.get('recorder').getState().then((state) => {
+                    if (state == 'recording') {
+                        _this.set('stopping', true);
+                        _this.stopRecorder().finally(() => {
+                            _this.set('stoppedRecording', true);
+                            _this.destroyRecorder();
+                            _this.onDestroyed();
+                            _this.send('next');
+                        });
+                    } else if ((_this.recordingStarted && _this.stoppedRecording && rec.isUploaded) || !(_this.recordingStarted)) {
+                        // recorder is paused/stopped/inactive, and either it never started recording or has but upload has finished
+                        _this.destroyRecorder();
+                        _this.onDestroyed();
+                        _this.send('next');
+                    }
+                    // Do not do anything if is currently stopping/uploading - the destroy and next actions will be handled via the existing stop promise and proceedClicked flag
+                }, () => {
+                    _this.send('next');
+                });
+            } else {
+                // recorder does not exist or exists but has been destroyed
                 this.send('next');
-            });
+            }
         },
+
         pause() {
             var _this = this;
             $('#recordingText').text(`${this._translate('exp-lookit-observation.stopping-and-uploading')}...`);
@@ -310,13 +356,34 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             window.clearInterval(_this.get('progressTimer'));
             $('.progress-bar').css('width', '100%');
             $('#recordingIndicator').hide();
-            this.stopRecorder().finally(() => {
+            this.set('stopping', true);
+            this.stopRecorder().then(() => {
+                _this.set('hasMadeRecording', true);
+                _this.set('stoppedRecording', true);
+                $('#recordButton').show();
+                $('#recordingText').text(_this._translate('exp-lookit-observation.Paused'));
+                _this.destroyRecorder();
+                _this.onDestroyed();
+                if (_this.get('proceedClicked')) {
+                    _this.send('proceed');
+                } else {
+                    _this.setupRecorder(_this.$(_this.get('recorderElement')));
+                }
+            }, () => {
+                _this.set('hasMadeRecording', true);
+                _this.set('stoppedRecording', true);
                 $('#recordButton').show();
                 $('#recordingText').text(_this._translate('exp-lookit-observation.Paused'));
                 _this.destroyRecorder();
-                _this.setupRecorder(_this.$(_this.get('recorderElement')));
+                _this.onDestroyed();
+                if (_this.get('proceedClicked')) {
+                    _this.send('proceed');
+                } else {
+                    _this.setupRecorder(_this.$(_this.get('recorderElement')));
+                }
             });
         },
+
         toggleWebcamButton() {
             if (!this.toggling) {
                 this.set('toggling', true);
diff --git a/app/components/exp-lookit-stimuli-preview/component.js b/app/components/exp-lookit-stimuli-preview/component.js
index 84ae34d9..6600b57b 100644
--- a/app/components/exp-lookit-stimuli-preview/component.js
+++ b/app/components/exp-lookit-stimuli-preview/component.js
@@ -17,7 +17,6 @@ export default ExpFrameBaseComponent.extend(VideoRecord, ExpandAssets, {
 
     videoIndex: 0,
 
-    recordingStopped: false,
     recordingStarted: false,
 
     noNext: computed('videoIndex', function() {
@@ -192,17 +191,23 @@ export default ExpFrameBaseComponent.extend(VideoRecord, ExpandAssets, {
             this.send('setTimeEvent', 'previousStimulus');
             this.set('videoIndex', this.get('videoIndex') - 1);
         },
-        finish() {
+        finish() { // continue button press
             if (this.get('doRecording')) {
-                if (!this.get('recordingStopped')) {
-                    this.set('recordingStopped', true);
+                if (!this.get('stoppedRecording') && !this.get('stopping')) {
+                    this.set('stopping', true);
                     var _this = this;
                     this.stopRecorder().then(() => {
+                        _this.set('stoppedRecording', true);
+                        _this.destroyRecorder();
                         _this.send('next');
                     }, () => {
+                        _this.destroyRecorder();
                         _this.send('next');
                     });
-                } else {
+                } else if (this.get('stoppedRecording') && !this.get('stopping')) {
+                    // if recorder has finished stopping/uploading then we can destroy it and move on
+                    // (if recorder is already stopping, then do nothing - need to wait for it to finish)
+                    this.destroyRecorder();
                     this.send('next');
                 }
             } else {
diff --git a/app/components/exp-lookit-stop-recording/component.js b/app/components/exp-lookit-stop-recording/component.js
index 17b8ae7f..49e62f30 100644
--- a/app/components/exp-lookit-stop-recording/component.js
+++ b/app/components/exp-lookit-stop-recording/component.js
@@ -129,38 +129,40 @@ export default ExpFrameBaseComponent.extend(ExpandAssets, {
         });
 
         this.set('progressTimer', window.setInterval(function() {
-            let msg = $('.pipeMsgOverlay').html();
-            let match = msg.match(/\d*%/);
-            if (match) {
-                $('#progress').html(`Uploading video... ${match[0]}`);
-                $('.progress-bar').css('width', match);
-                _this.set('hasStartedUpload', true);
-            } else if (msg) {
-                $('#progress').html(msg);
-            } else {
-                $('#progress').html('Uploading video...')
+            $('#progress').html('Uploading video...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
+            if (!_this.get('_recording') && _this.get('sessionRecorder').s3.hasStartedCompletingUpload) {
+                const percComplete = _this.get('sessionRecorder').s3.percentUploadComplete;
+                if (percComplete > 0) {
+                    _this.set('hasStartedUpload', true);
+                    window.clearInterval(_this.get('allowProceedTimer'));
+                }
+                let progressPercStr = percComplete.toString()+'%';
+                $('#progress').html(`Uploading video... ${progressPercStr}`);
+                $('.progress-bar').css('width', progressPercStr);
             }
         }, 100));
 
         this.set('allowProceedTimer', window.setTimeout(function() {
             if (!_this.get('hasStartedUpload')) {
                 /**
-                 * If no progress update about upload is available within 10s, and
-                 * frame proceeds automatically. Otherwise if the upload has started
-                 * (e.g. we know it is 10% done) it will continue waiting.
+                 * Note: this timer waits a long time (5 minutes) before checking if at least one part of the multi-part * upload has completed, and if not, allowing the participant to proceed. 
+                 * This is a longer wait time (vs the old Pipe system) because we don't have as fine-grained upload 
+                 * progress info with RecordRTC/S3 as we used to have with Pipe. We might want to reconsider the way
+                 * this timer works and its duration in the future, if we get reports about participants getting 'stuck'
+                 * while waiting for uploads.
                  *
                  * @event warningUploadTimeoutError
                  */
                 _this.send('setTimeEvent', 'warningUploadTimeoutError');
                 _this.send('next');
             }
-        }, 5000));
+        }, 300000));
 
     },
 
     willDestroyElement() {
         window.clearInterval(this.get('progressTimer'));
-        window.clearInterval(this.get('allowProceedTimer'));
+        window.clearTimeout(this.get('allowProceedTimer'));
         this._super(...arguments);
     }
 
diff --git a/app/components/exp-lookit-video-assent/component.js b/app/components/exp-lookit-video-assent/component.js
index 78437834..3e34a469 100644
--- a/app/components/exp-lookit-video-assent/component.js
+++ b/app/components/exp-lookit-video-assent/component.js
@@ -32,6 +32,9 @@ export default ExpFrameBaseComponent.extend(VideoRecord, ExpandAssets, {
     disableRecord: Em.computed('recorder.recording', 'recorder.hasCamAccess', function () {
         return !this.get('recorder.hasCamAccess') || this.get('recorder.recording');
     }),
+    // keep track of whether a recorder has already started,
+    // in case of recording last page and moving forward/backward through pages,
+    // and to prevent race conditions when recorder is still installing
     startedRecording: false,
 
     pageIndex: null,
@@ -132,7 +135,8 @@ export default ExpFrameBaseComponent.extend(VideoRecord, ExpandAssets, {
     },
 
     updatePage() {
-        if (this.get('recordLastPage') && !this.get('recordWholeProcedure') && (this.get('pageIndex') === this.get('pages').length - 1)) {
+        if (this.get('recordLastPage') && !this.get('recordWholeProcedure') && !(this.get('startedRecording')) && (this.get('pageIndex') === this.get('pages').length - 1)) {
+            this.set('startedRecording', true);
             this.startRecorder();
         }
         if (this.get('pageHasAudio')) {
@@ -195,15 +199,30 @@ export default ExpFrameBaseComponent.extend(VideoRecord, ExpandAssets, {
             this.send('setTimeEvent', 'assentQuestionSubmit',
                 {childResponse: this.get('childResponse')});
 
-            var _this = this;
-            if (_this.get('childResponse') === 'Yes') {
-                this.stopRecorder().then(() => {
-                    _this.send('next');
-                }, () => {
-                    _this.send('next');
-                });
+            if (this.get('childResponse') === 'Yes') {
+                if (this.get('sessionRecorder') && this.get('sessionRecordingInProgress')) {
+                    this.send('next');
+                } else {
+                    if (!this.get('stoppedRecording') && (!this.get('stopping')))  {
+                        this.set('stopping', true);
+                        var _this = this;
+                        this.stopRecorder().then(() => {
+                            _this.set('stoppedRecording', true);
+                            _this.destroyRecorder();
+                            _this.send('next');
+                        }, () => {
+                            _this.destroyRecorder();
+                            _this.send('next');
+                        });
+                    } else if (this.get('stoppedRecording') && (!this.get('stopping'))) {
+                        // if recorder has finished stopping/uploading then we can destroy it and move on
+                        // (if recorder is already stopping but hasn't finished, then do nothing - need to wait for it to finish)
+                        this.destroyRecorder();
+                        this.send('next');
+                    }
+                }
             } else {
-                _this.send('exit');
+                this.send('exit');
             }
         },
 
diff --git a/app/components/exp-lookit-video-consent/component.js b/app/components/exp-lookit-video-consent/component.js
index 8d094aa9..ece04c4a 100644
--- a/app/components/exp-lookit-video-consent/component.js
+++ b/app/components/exp-lookit-video-consent/component.js
@@ -51,25 +51,27 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
     startRecorderAndUpdateDisplay() {
         this.set('startedRecording', true); // keep track of if ANY recorder has been set up yet
         let _this = this;
-        this.startRecorder().then(() => {
-            // Require at least 2 s recording
-            setTimeout(function() {
-                $('#stopbutton').prop('disabled', false);
-            }, 2000);
-            $('#recordingIndicator').show();
-            $('#recordingText').text(_this._translate('exp-lookit-video-consent.Recording'));
-        }, () => {
-            $('#recordingText').text(_this._translate('exp-lookit-video-consent.Error-starting-recorder'));
-            $('#recordbutton').prop('disabled', false);
-        });
+        this.startRecorder()
+            .then(() => {
+                // Require at least 2 s recording
+                setTimeout(function() {
+                    $('#stopbutton').prop('disabled', false);
+                }, 2000);
+                $('#recordingIndicator').show();
+                $('#recordingText').text(_this._translate('exp-lookit-video-consent.Recording'));
+            })
+            .catch((err) => {
+                $('#recordingText').text(_this._translate('exp-lookit-video-consent.Error-starting-recorder'));
+                $('#recordbutton').prop('disabled', false);
+                console.error(`Error starting recorder: ${err.name}: ${err.message}`);
+                console.trace();
+            });
     },
 
     actions: {
         record() {
-
             $('#recordingStatus').show();
             $('#recordingText').text(`${this._translate('exp-lookit-video-consent.Starting-recorder')}...`);
-            $('[id^=pipeMenu]').hide();
             $('#recordbutton').prop('disabled', true);
             $('#playbutton').prop('disabled', true);
             this.set('showWarning', false);
@@ -77,18 +79,22 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             this.set('hasMadeVideo', false);
 
             if (this.get('startedRecording')) {
-                if (this.get('recorder') && this.get('recorder').get('recorder')) {
-                    this.get('recorder').get('recorder').pause();
+                if (this.get('recorder')) {
+                    this.get('recorder').pause();
                 }
                 this.destroyRecorder(); // Need to destroy between recordings or else the same video ID is sent as payload.
                 // Don't destroy after stopRecorder call because then can't replay.
                 var _this = this;
-                this.setupRecorder(_this.$(_this.get('recorderElement'))).then(() => {
-                    _this.startRecorderAndUpdateDisplay();
-                }, () => {
-                    $('#recordingText').text(_this._translate('exp-lookit-video-consent.Error-starting-recorder'));
-                    $('#recordbutton').prop('disabled', false);
-                });
+                this.setupRecorder(_this.$(_this.get('recorderElement')))
+                    .then(() => {
+                        _this.startRecorderAndUpdateDisplay();
+                    })
+                    .catch((err) => {
+                        $('#recordingText').text(_this._translate('exp-lookit-video-consent.Error-starting-recorder'));
+                        $('#recordbutton').prop('disabled', false);
+                        console.error(`Error restarting recorder: ${err.name}: ${err.message}`);
+                        console.trace();
+                    });
             } else {
                 this.startRecorderAndUpdateDisplay(); // First time - can use current recorder
             }
@@ -100,24 +106,23 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             $('#stopbutton').prop('disabled', true);
             var _this = this;
 
-            this.stopRecorder().finally(() => {
-                _this.set('stoppedRecording', true);
-                _this.set('hasMadeVideo', true);
-                $('#recordingText').text(_this._translate('exp-lookit-video-consent.Not-recording'));
-                $('#playbutton').prop('disabled', false);
-                $('#recordbutton').prop('disabled', false);
-            });
+            this.stopRecorder()
+                .finally(() => {
+                    _this.set('stoppedRecording', true);
+                    _this.set('hasMadeVideo', true);
+                    $('#recordingText').text(_this._translate('exp-lookit-video-consent.Not-recording'));
+                    $('#playbutton').prop('disabled', false);
+                    $('#recordbutton').prop('disabled', false);
+                });
 
         },
         playvideo() {
             $('#recordingText').text('');
             $('#recordingStatus').hide();
-            this.get('recorder').get('recorder').playVideo();
-            $('[id^=pipeMenu]').show();
+            this.setUpPlayback();
             this.set('hasCheckedVideo', true);
         },
         finish() {
-
             if (!this.get('hasMadeVideo') || !this.get('hasCheckedVideo')) {
                 this.set('showWarning', true);
             } else {
@@ -636,7 +641,6 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
         this.set('consentFormText', $('#consent-form-text').text());
         $('#recordingIndicator').hide();
         $('#recordingText').text(this._translate('exp-lookit-video-consent.Not-recording-yet'));
-        $('[id^=pipeMenu]').hide();
         $('#recordbutton').prop('disabled', false);
         $('#stopbutton').prop('disabled', true);
         $('#playbutton').prop('disabled', true);
diff --git a/app/components/exp-lookit-video-infant-control/component.js b/app/components/exp-lookit-video-infant-control/component.js
index 480dee6d..4e559686 100644
--- a/app/components/exp-lookit-video-infant-control/component.js
+++ b/app/components/exp-lookit-video-infant-control/component.js
@@ -35,7 +35,7 @@ export default ExpLookitVideo.extend(InfantControlledTiming, {
     actions: {
 
         videoStarted() {
-            if (this.get('testVideoTimesPlayed') === 0) {
+            if ((this.get('testVideoTimesPlayed') === 0) && !this.get('_finishing')) {
                 this.startParentControl();
             }
             this._super(...arguments);
diff --git a/app/components/exp-lookit-video/component.js b/app/components/exp-lookit-video/component.js
index bf2c7e61..6344ff1f 100644
--- a/app/components/exp-lookit-video/component.js
+++ b/app/components/exp-lookit-video/component.js
@@ -48,7 +48,6 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
     skip: false,
     hasParentText: true,
 
-    /** comment some text */
     maximizeVideoArea: false,
     _finishing: false,
 
@@ -202,7 +201,7 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
              *
              * @event videoStarted
              */
-            if (this.get('isDestroying') || this.get('isDestroyed')) {
+            if (this.get('isDestroying') || this.get('isDestroyed') || this.get('_finishing')) {
                 return;
             }
 
@@ -229,7 +228,7 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
         },
 
         videoStopped() {
-            if (this.get('isDestroying') || this.get('isDestroyed')) {
+            if (this.get('isDestroying') || this.get('isDestroyed') || (this.get('_finishing'))) {
                 return;
             }
             this.set('testVideoTimesPlayed', this.get('testVideoTimesPlayed') + 1);
@@ -281,10 +280,6 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
             // to call next AFTER recording is stopped and we don't want this to have
             // already been destroyed at that point.
 
-            // Pause audio/video so we don't trigger started/stopped handlers while destroying
-            $('audio, video').each(function() {
-                this.pause();
-            });
             /**
              * When trial is complete and begins cleanup (may then wait for video upload)
              *
@@ -296,19 +291,31 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
             this.set('testVideoTimesPlayed', 0);
             this.set('testAudioTimesPlayed', 0);
             this.set('satisfiedDuration', false);
-            var _this = this;
             if (!this.get('_finishing')) {
                 this.set('_finishing', true);
+                // Pause audio/video so we don't trigger started/stopped handlers while destroying
+                $('audio, video').each(function() {
+                    this.pause();
+                });
                 if (this.get('doRecording')) {
-                    this.set('doingTest', false);
-                    this.stopRecorder().then(() => {
-                        _this.set('stoppedRecording', true);
-                        _this.send('next');
-                    }, () => {
-                        _this.send('next');
-                    });
+                    if (!this.get('stopping') && !this.get('stoppedRecording')) {
+                        this.set('stopping', true);
+                        this.set('doingTest', false);
+                        var _this = this;
+                        this.stopRecorder().then(() => {
+                            _this.set('stoppedRecording', true);
+                            _this.destroyRecorder();
+                            _this.send('next');
+                        }, () => {
+                            _this.destroyRecorder();
+                            _this.send('next');
+                        });
+                    } else if (!this.get('stopping') && this.get('stoppedRecording')) {
+                        this.destroyRecorder();
+                        this.send('next');
+                    }
                 } else {
-                    _this.send('next');
+                    this.send('next');
                 }
             }
         }
@@ -356,8 +363,9 @@ let ExpLookitVideo = ExpFrameBaseComponent.extend(VideoRecord, PauseUnpause, Exp
         this.set('satisfiedDuration', false);
         $('.exp-lookit-video').hide();
         $('#nextbutton').prop('disabled', true); // disable Next while paused
-        if (this.get('doRecording')) {
+        if (this.get('doRecording') && (!this.get('stoppedRecording')) && (!this.get('stopping'))) {
             let _this = this;
+            this.set('stopping', true);
             return this.stopRecorder().finally(() => {
                 _this.set('stoppedRecording', true);
                 _this.destroyRecorder();
diff --git a/app/components/exp-video-config-quality/component.js b/app/components/exp-video-config-quality/component.js
index f5294e5c..f77a1544 100644
--- a/app/components/exp-video-config-quality/component.js
+++ b/app/components/exp-video-config-quality/component.js
@@ -320,12 +320,17 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
 
         if (!this.get('showRecordMenu')) {
             this.set('requireTestVideo', false);
+            $('#recordingStatus').hide();
+            $('#recordingIndicator').hide();
             $('.exp-video-config-quality').append($('<style>') // CSS rule so that persists if element reloaded
                 .prop('type', 'text/css')
                 .prop('id', 'exp-video-config-quality-hide-record-buttons')
-                .html('.exp-video-config-quality div[id^="pipeMenu"] {visibility: hidden; display: none !important;}'));
+                .html('.exp-video-config-quality .recording-menu {visibility: hidden; display: none !important;}'));
         } else {
             $('#exp-video-config-quality-hide-record-buttons').remove();
+            document.getElementById('recordingIndicator').classList.remove('text-danger','Blink');
+            $('#recordingStatus').show();
+            $('#recordingIndicator').show();
         }
     },
 
@@ -335,6 +340,37 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
 
     completedBoxes: false,
     readyToProceed: false,
+    hasMadeVideo: false, // keep track of whether any recording has been made 
+
+    setupRecorderAndUpdateDisplay() {
+        var _this = this;
+        return this.setupRecorder(_this.$(_this.get('recorderElement')))
+            .then(() => {
+                $('#recordbutton').prop('disabled', false);
+                $('#stopbutton').prop('disabled', true);
+                $('#playbutton').prop('disabled', true);
+            })
+            .catch((err) => {
+                $('#recordbutton').prop('disabled', true);
+                console.error(`Error setting up recorder: ${err.name}: ${err.message}`);
+                console.trace();
+            });
+    },
+
+    startRecorderAndUpdateDisplay() {
+        var _this = this;
+        return this.startRecorder()
+            .then(() => {
+                _this.set('hasMadeVideo', true); 
+                $('#stopbutton').prop('disabled', false);
+                document.getElementById('recordingIndicator').classList.add('text-danger','Blink');
+            })
+            .catch((err) => {
+                $('#recordbutton').prop('disabled', false);
+                console.error(`Error starting recorder: ${err.name}: ${err.message}`);
+                console.trace();
+            });
+    },
 
     checkIfDone() {
         // Checks if conditions are met to move on from this frame, setting 'readyToProceed'
@@ -377,23 +413,9 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
      * @method whenPossibleToRecord
      */
     videoConfigRecordingObserver: observer('recorder.hasCamAccess', 'recorderReady', function() {
-        // The Pipe menu takes a little while to get set up, so if we try to bind an
-        // event to it e.g. upon didRender, it doesn't end up bound. Additionally, the
-        // #pipeRec and #pipePlay buttons have their behavior OVERWRITTEN by Pipe,
-        // e.g. pipePlay's handler changes after there's a recording available, so
-        // we don't want to bind to those.
-        var _this = this;
+        // wait until everything is ready before activating the 'record' button 
         if (this.get('recorder') && this.get('recorder.hasCamAccess') && this.get('recorderReady')) {
-            this.get('recorder').on('btPlayPressed', (recId) => {   // eslint-disable-line no-unused-vars
-                _this.set('hasPlayedBack', true);
-                _this.checkIfDone();
-            });
-
-            this.get('recorder').on('btStopRecordingPressed', (recId) => {   // eslint-disable-line no-unused-vars
-                _this.get('recorder').set('_recording', false); // so we don't also call stop when leaving page unless needed
-                _this.set('stoppedRecording', true);
-            });
-
+            $('#recordbutton').prop('disabled', false);
         }
     }),
 
@@ -438,7 +460,48 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
             this.set('showWarning', false);
             this.set('hasPlayedBack', false);
             this.destroyRecorder();
-            this.setupRecorder(this.$(this.get('recorderElement')));
+            document.getElementById('recordingIndicator').classList.remove('text-danger','Blink');
+            this.setupRecorderAndUpdateDisplay();
+        },
+
+        playvideo() {
+            document.getElementById('recordingIndicator').classList.remove('text-danger','Blink');
+            this.setUpPlayback();
+            this.set('hasPlayedBack', true);
+            this.checkIfDone();
+        },
+
+        stop() {
+            document.getElementById('recordingIndicator').classList.remove('text-danger','Blink');
+            $('#stopbutton').prop('disabled', true);
+            this.stopRecorder()
+                .finally(() => {
+                    $('#playbutton').prop('disabled', false);
+                    $('#recordbutton').prop('disabled', false);
+                });
+        },
+
+        record() {
+            $('#recordbutton').prop('disabled', true);
+            $('#playbutton').prop('disabled', true);
+            this.set('showWarning', false);
+            this.set('hasCheckedVideo', false);
+
+            if (this.get('hasMadeVideo')) {
+                // Need to destroy between recordings or else the same video ID is sent as payload.
+                // Don't destroy after stopRecorder call because then can't replay.
+                if (this.get('recorder')) {
+                    this.get('recorder').pause();
+                }
+                this.destroyRecorder(); 
+                this.setupRecorderAndUpdateDisplay()
+                    .then(() => {
+                        this.startRecorderAndUpdateDisplay();
+                    });
+            } else {
+                // First recording - can use current recorder
+                this.startRecorderAndUpdateDisplay(); 
+            }
         },
     }
-});
+});
\ No newline at end of file
diff --git a/app/components/exp-video-config-quality/template.hbs b/app/components/exp-video-config-quality/template.hbs
index d4278f02..cfa0cda0 100644
--- a/app/components/exp-video-config-quality/template.hbs
+++ b/app/components/exp-video-config-quality/template.hbs
@@ -62,7 +62,17 @@
         <div class="col-md-4">
 
             <div class="row recorder-container">
-                <div id="recorder" class="col-xs-12"></div>
+                <div id="recorder" class="col-xs-12">
+                    <span id="recordingStatus">
+                        <i class="fa fa-circle text-danger Blink" id="recordingIndicator"></i>
+                    </span>
+                </div>
+            </div>
+
+            <div class="recording-menu">
+                <button type="button" id="recordbutton" disabled="disabled" class="menu-btn" {{ action "record" }}><i class="fa fa-video-camera"></i></button>
+                <button type="button" id="stopbutton" disabled="disabled" class="menu-btn" {{ action "stop" }}><i class="fa fa-stop"></i></button>
+                <button type="button" id="playbutton" disabled="disabled" class="menu-btn" {{ action "playvideo" }}><i class="fa fa-play"></i></button>
             </div>
 
             <div class="recording-instructions">
diff --git a/app/components/exp-video-config/component.js b/app/components/exp-video-config/component.js
index 7fed32df..b434e189 100644
--- a/app/components/exp-video-config/component.js
+++ b/app/components/exp-video-config/component.js
@@ -43,6 +43,7 @@ export default ExpFrameBaseComponent.extend(VideoRecord, {
     checkedWebcamPermissions: false,
     micChecked: Em.computed.alias('recorder.micChecked'),
     hasCamAccess: Em.computed.alias('recorder.hasCamAccess'),
+    checkMic: true,
 
     populateDropdowns() {
         const micSelect = $('select#audioSource')[0];
diff --git a/app/index.html b/app/index.html
index 0b3e8092..a8b1d113 100644
--- a/app/index.html
+++ b/app/index.html
@@ -10,10 +10,9 @@
 
     {{content-for "head"}}
 
-
-    <script src="https://cdn.addpipe.com/2.0/pipe.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.min.js" integrity="sha512-IMLquIKoKQeQ+kYuec3BvLYjy3yF2nH/ojHPkXQnQTeGKRliZcVed19I6E0t+WBt+9uPuEba0t2iyZAVP8mdlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.1250.0/aws-sdk.min.js" integrity="sha512-zNyZpSKBzoVy0Ttd3KkL3mK9EL2DFLvvSUH1814SI2LVjvTYvLc6MSJoqGcZWZWYpKdlWHOfXgEdynDAhuqfEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="https://s1.addpipe.com/2.0/pipe.css">
     <link rel="stylesheet" href="{{rootURL}}assets/ember-lookit-frameplayer.css">
 
 
diff --git a/app/mixins/frame-player-route.js b/app/mixins/frame-player-route.js
index 4a73cf7b..73e9bc53 100644
--- a/app/mixins/frame-player-route.js
+++ b/app/mixins/frame-player-route.js
@@ -27,6 +27,7 @@ function loadAll(model, relationship, dest, options = {}) {
 export default Ember.Mixin.create({
     _study: null,
     _child: null,
+    _recordingMethod: 'recordrtc',
     _response: null,
     _pastResponses: Ember.A(),
     _getStudy(params) {
@@ -41,7 +42,8 @@ export default Ember.Mixin.create({
         let response = this.store.createRecord('response', {
             completed: false,
             expData: {},
-            sequence: []
+            sequence: [],
+            recordingMethod: this.get('_recordingMethod')
         });
         response.set('study', this.get('_study'));
         response.set('child', this.get('_child'));
diff --git a/app/mixins/pause-unpause.js b/app/mixins/pause-unpause.js
index c409dadc..955ce6e0 100644
--- a/app/mixins/pause-unpause.js
+++ b/app/mixins/pause-unpause.js
@@ -294,7 +294,7 @@ var pauseUnpauseMixin = Ember.Mixin.create({
 
         // Don't need to separately enable FS listener because it checks _pausingEnabled
         if (this.get('pauseWhenExitingFullscreen') && !this.checkFullscreen() && !this.get('_isPaused') && doFullscreenCheck) {
-            console.log('failed fullscreen c heck');
+            console.log('failed fullscreen check');
             this._pauseStudy();
             return true;
         }
diff --git a/app/mixins/session-record.js b/app/mixins/session-record.js
index 509caa9d..9b9d6aa9 100644
--- a/app/mixins/session-record.js
+++ b/app/mixins/session-record.js
@@ -106,11 +106,18 @@ export default Ember.Mixin.create({
     sessionRecorderReady: false,
 
     /**
-     * Whether to do audio-only (vs also video) recording for session (multiframe) recording. Only used if starting session recording this frame.
-     * @property {Number} sessionAudioOnly
-     * @default 0
+     * Whether to do check the mic input during recorder set up (before the install promise is resolved). 
+     * Defaults to false and can be overridden by consuming frame.
+     * @property {Boolean} checkMic
+     * @default false
      */
-    sessionAudioOnly: 0,
+    checkMic: false,
+
+    /** 
+     * Private flag that is set when the async record method is first called 
+     * to prevent record from being called multiple times
+    */
+    _starting: false,
 
     _generateSessionVideoId() {
         return [
@@ -130,7 +137,6 @@ export default Ember.Mixin.create({
      * @return {Promise} A promise representing the result of installing the recorder
      */
     setupSessionRecorder(recorderElementId) {
-
         var $sessionRecorderElement = $('<div>', {
             id: recorderElementId,
             class: 'video-recorder-hidden'
@@ -141,18 +147,17 @@ export default Ember.Mixin.create({
         var $element = $('#' + recorderElementId);
 
         const maxRecordingLength = 100000000;
-        const autosave = 1;
         const sessionVideoId = this._generateSessionVideoId();
         this.get('session').set('videoId', sessionVideoId);
         const sessionRecorder = new VideoRecorder({element: $element});
-        const pipeLoc = Ember.getOwner(this).resolveRegistration('config:environment').pipeLoc;
-        const pipeEnv = Ember.getOwner(this).resolveRegistration('config:environment').pipeEnv;
-        const installPromise = sessionRecorder.install(sessionVideoId, pipeLoc, pipeEnv,
-            maxRecordingLength, autosave, this.get('sessionAudioOnly'));
+        const s3vars = Ember.getOwner(this).resolveRegistration('config:environment').awsRecording;
+        const installPromise = sessionRecorder.install(sessionVideoId, 
+            maxRecordingLength, this.get('checkMic'), s3vars);
 
         // Track specific events for all frames that use VideoRecorder
         var _this = this;
         sessionRecorder.on('onCamAccess', (recId, hasAccess) => {   // eslint-disable-line no-unused-vars
+            _this.get('sessionRecorder').set('hasCamAccess', hasAccess);
             if (!(_this.get('isDestroyed') || _this.get('isDestroying'))) {
                 _this.send('setTimeEvent', 'sessionRecorder.hasCamAccess', {
                     hasCamAccess: hasAccess
@@ -190,7 +195,7 @@ export default Ember.Mixin.create({
                  * @event startSessionRecording
                  */
                 _this.send('setTimeEvent', 'startSessionRecording', {
-                    sessionPipeId: sessionRecorder.get('pipeVideoName')
+                    sessionPipeId: sessionRecorder.get('videoName')
                 });
             });
         } else {
@@ -211,6 +216,7 @@ export default Ember.Mixin.create({
              *
              * @event stopSessionRecording
              */
+            this.get('session').set('recordingInProgress',false);
             this.send('setTimeEvent', 'stopSessionRecording');
             return sessionRecorder.stop(this.get('sessionMaxUploadSeconds') * 1000);
         } else {
@@ -258,7 +264,7 @@ export default Ember.Mixin.create({
     // actually destroying the recorder any time the component is destroyed.
     willDestroyElement() {
         var _this = this;
-        if (this.get('sessionRecorder') && this.get('endSessionRecording')) {
+        if (this.get('sessionRecorder') && this.get('endSessionRecording') && this.get('sessionRecorder').recording) {
             if (!(this.get('session').get('recordingInProgress'))) {
                 this.destroySessionRecorder();
             } else {
@@ -284,15 +290,13 @@ export default Ember.Mixin.create({
      * @method whenPossibleToRecordSessionObserver
      */
     whenPossibleToRecordSessionObserver: observer('sessionRecorder.hasCamAccess', 'sessionRecorderReady', function() {
-        if (this.get('sessionRecorder.hasCamAccess') && this.get('sessionRecorderReady')) {
-            if (this.get('startSessionRecording')) {
-                var _this = this;
-                this.startSessionRecorder().then(() => {
-                    _this.send('setTimeEvent', 'startedSessionRecording');
-                    _this.set('sessionRecorderReady', false);
-                    _this.onSessionRecordingStarted();
-                });
-            }
+        if (this.get('sessionRecorder.hasCamAccess') && this.get('sessionRecorderReady') && this.get('startSessionRecording') && this.get('sessionRecorder') && !(this.get('sessionRecorder').recording) && !(this.get('_starting'))) {
+            this.set('_starting', true);
+            var _this = this;
+            this.startSessionRecorder().then(() => {
+                _this.send('setTimeEvent', 'startedSessionRecording');
+                _this.onSessionRecordingStarted();
+            });
         }
     })
 
diff --git a/app/mixins/video-record.js b/app/mixins/video-record.js
index 29d94f41..cc593266 100644
--- a/app/mixins/video-record.js
+++ b/app/mixins/video-record.js
@@ -28,10 +28,21 @@ let {
  * You will also need to set `recorderElement` if the recorder is to be housed other than
  * in an element identified by the ID `recorder`.
  *
- * The properties `recorder`, `videoList`, `stoppedRecording`, `recorderReady`, and
- * `videoId` become available to the consuming frame. The recorder object has fields
- * that give information about its state: `hasWebCam`, 'hasCamAccess`, `recording`,
- * `connected`, and `micChecked` - for details, see services/video-recorder.js. These
+ * The following properties become available to the consuming frame:
+ *  recorder
+ *  videoList
+ *  stoppedRecording
+ *  recorderReady
+ *  videoId
+ * The recorder object has the following fields that give information about its state: 
+ *  hasWebCam
+ *  hasCamAccess
+ *  recording
+ *  connected
+ *  micChecked
+ *  hasCreatedRecording
+ * For details, see services/video-recorder.js. 
+ * These
  * can be accessed from the consuming frame as e.g. `this.get('recorder').get('hasWebCam')`.
  *
  * If starting recording automatically,  the function `onRecordingStarted` will be called
@@ -42,8 +53,7 @@ let {
  *
  * Events recorded in a frame that extends VideoRecord will automatically have additional
  * fields videoId (video filename), pipeId (temporary filename initially assigned by
- * the recording service),
- * and streamTime (when in the video they happened, in s).
+ * the recording service), and streamTime (when in the video they happened, in s).
  *
  * Setting up the camera is handled in didInsertElement, and making sure recording is
  * stopped is handled in willDestroyElement (Ember hooks that fire during the component
@@ -96,7 +106,7 @@ export default Ember.Mixin.create({
 
     /**
      * Whether recording is stopped already, meaning it doesn't need to be re-stopped when
-     * destroying frame. This should be set to true by the consuming frame when video is
+     * destroying frame. This should be set to true by the consuming frame after the video is
      * stopped.
      * @property {Boolean} stoppedRecording
      * @private
@@ -121,6 +131,7 @@ export default Ember.Mixin.create({
 
     /**
      * Maximum recording length in seconds. Can be overridden by consuming frame.
+     * Default for trial recordings is 7200 seconds (120 minutes)
      * @property {Number} maxRecordingLength
      * @default 7200
      */
@@ -131,25 +142,17 @@ export default Ember.Mixin.create({
      * Can be overridden by researcher, based on tradeoff between making families wait and
      * losing data.
      * @property {Number} maxUploadSeconds
-     * @default 5
+     * @default 7
      */
-    maxUploadSeconds: 5,
+    maxUploadSeconds: 7,
 
     /**
-     * Whether to autosave recordings. Can be overridden by consuming frame.
-     * TODO: eventually use this to set up non-recording option for previewing
-     * @property {Number} autosave
-     * @default 1
-     * @private
-     */
-    autosave: 1,
-
-    /**
-     * Whether to do audio-only (vs also video) recording. Can be overridden by consuming frame.
-     * @property {Number} audioOnly
-     * @default 0
+     * Whether to do check the mic input during recorder set up (before the install promise is resolved). 
+     * Defaults to false and can be overridden by consuming frame.
+     * @property {Boolean} checkMic
+     * @default false
      */
-    audioOnly: 0,
+    checkMic: false,
 
     /**
      * Whether to use the camera in this frame. Consuming frame should set this property
@@ -252,6 +255,18 @@ export default Ember.Mixin.create({
      */
     waitForUploadVideo: '',
 
+    /**
+     * Flag that is set when the async record method is first called
+     * to prevent record from being called multiple times. Can be overwritten by the consuming frame to 
+     * indicate that startRecording is about to be called.
+    */
+    starting: false,
+
+    /**
+     * Flag that is set when the async stopRecording method is first called
+     * to prevent stopRecording from being called multiple times. Can be overwritten by the consuming frame.
+    */
+    stopping: false,
 
     _generateVideoId() {
         return [
@@ -290,14 +305,14 @@ export default Ember.Mixin.create({
         const videoId = this._generateVideoId();
         this.set('videoId', videoId);
         const recorder = new VideoRecorder({element: element});
-        const pipeLoc = Ember.getOwner(this).resolveRegistration('config:environment').pipeLoc;
-        const pipeEnv = Ember.getOwner(this).resolveRegistration('config:environment').pipeEnv;
-        const installPromise = recorder.install(this.get('videoId'), pipeLoc, pipeEnv,
-            this.get('maxRecordingLength'), this.get('autosave'), this.get('audioOnly'));
+        const s3vars = Ember.getOwner(this).resolveRegistration('config:environment').awsRecording;
+        const installPromise = recorder.install(this.get('videoId'), 
+            this.get('maxRecordingLength'), this.get('checkMic'), s3vars);
 
-        // Track specific events for all frames that use  VideoRecorder
+        // Track specific events for all frames that use VideoRecorder
         var _this = this;
         recorder.on('onCamAccess', (recId, hasAccess) => {   // eslint-disable-line no-unused-vars
+            _this.get('recorder').set('hasCamAccess', hasAccess);
             if (!(_this.get('isDestroyed') || _this.get('isDestroying'))) {
                 _this.send('setTimeEvent', 'recorder.hasCamAccess', {
                     hasCamAccess: hasAccess
@@ -315,6 +330,7 @@ export default Ember.Mixin.create({
         this.send('setTimeEvent', 'setupVideoRecorder', {
             videoId: videoId
         });
+        
         return installPromise;
     },
 
@@ -325,16 +341,20 @@ export default Ember.Mixin.create({
      */
     startRecorder() {
         const recorder = this.get('recorder');
+        var _this = this;
         if (recorder) {
             return recorder.record().then(() => {
                 this.send('setTimeEvent', 'startRecording', {
-                    pipeId: recorder.get('pipeVideoName')
+                    pipeId: recorder.get('videoName') // TO DO: change 'pipeId' to something else 
                 });
                 if (this.get('videoList') == null) {
                     this.set('videoList', [this.get('videoId')]);
                 } else {
                     this.set('videoList', this.get('videoList').concat([this.get('videoId')]));
                 }
+                _this.set('starting', false);
+                _this.hideWaitForVideoCover();
+                _this.onRecordingStarted();
             });
         } else {
             return Ember.RSVP.resolve();
@@ -348,7 +368,8 @@ export default Ember.Mixin.create({
      */
     stopRecorder() {
         const recorder = this.get('recorder');
-        if (recorder && recorder.get('recording')) {
+        if (recorder && recorder.get('recording') && !(recorder._recorderIsDestroyed)) {
+            this.set('stopping', true);
             this.send('setTimeEvent', 'stoppingCapture');
             if (this.get('showWaitForUploadMessage') && !this.get('_isPaused')) { // Avoid showing wait-for-upload and paused screens simultaneously, give priority to paused
                 // TODO: consider adding progress bar
@@ -369,7 +390,10 @@ export default Ember.Mixin.create({
             }
             return recorder.stop(this.get('maxUploadSeconds') * 1000);
         } else {
-            return Ember.RSVP.reject(1);
+            // reject the promise because the recorder is in one of the following states:
+            // - doesn't exist, or is not recording, or has been destroyed
+            // - exists and is recording, but is already in the process of stopping and uploading
+            return Ember.RSVP.reject(`Unable to stop recorder for ${recorder.get('videoName')}. Maybe it does not exist, is not recording, has been destroyed, or is already stopping.`);
         }
     },
 
@@ -387,20 +411,44 @@ export default Ember.Mixin.create({
         }
     },
 
+    /**
+     * Set up playback of a video recording
+     * @method setUpPlayback
+     */
+    setUpPlayback() {
+        const vid = document.querySelector('video');
+        vid.src = null;
+        vid.srcObject = null;
+        vid.muted = false;
+        vid.volume = 1;
+        this.get('recorder').get('recorder').getDataURL()
+            .then((dataURI) => {
+                vid.src = dataURI;
+                vid.controls = true;
+            })
+            .catch((err) => {
+                console.error(`Error playing video: ${err.name}: ${err.message}`);
+                console.trace();
+            });
+    },
+
     willDestroyElement() {
         var _this = this;
-        if (_this.get('recorder')) {
+        if (_this.get('recorder') && !(_this.get('recorder')._recorderIsDestroyed)) {
             window.clearTimeout(_this.get('recorder').get('uploadTimeout'));
-            if (_this.get('stoppedRecording', true)) {
-                _this.destroyRecorder();
-            } else {
+            if (_this.get('recorder').get('recording') && !(this.get('stopping'))) {
                 _this.stopRecorder().then(() => {
                     _this.set('stoppedRecording', true);
                     _this.destroyRecorder();
-                }, () => {
-                    _this.destroyRecorder();
+                }, (reason) => {
+                    console.warn(`Recording stop promise rejected: ${reason}`);
                 });
+            } else if (!(_this.get('recorder').get('recording')) && !(this.get('stopping'))) {
+                // recorder is not recording or stopping
+                _this.destroyRecorder();
             }
+            // if recorder is already stopping/uploading (stopping = true) then don't trigger stop or destroy
+            // in this case, the consuming frame needs to make sure the recorder is destroyed after stopping
         }
         _this._super(...arguments);
     },
@@ -507,17 +555,14 @@ export default Ember.Mixin.create({
 
     /**
      * Observer that starts recording once recorder is ready.
+     * Consuming frames can override this if necessary (e.g. observation frame).
      * @method whenPossibleToRecordObserver
      */
     whenPossibleToRecordObserver: observer('recorder.hasCamAccess', 'recorderReady', function() {
         if (this.get('doUseCamera') && this.get('startRecordingAutomatically')) {
-            var _this = this;
-            if (this.get('recorder.hasCamAccess') && this.get('recorderReady')) {
-                this.startRecorder().then(() => {
-                    _this.set('recorderReady', false);
-                    _this.hideWaitForVideoCover();
-                    _this.onRecordingStarted();
-                });
+            if (this.get('recorder.hasCamAccess') && this.get('recorderReady') && !(this.get('recorder.recording')) && !(this.get('starting'))) {
+                this.set('starting', true);
+                this.startRecorder();
             }
         }
     }),
diff --git a/app/models/response.js b/app/models/response.js
index 85aa9d9d..6039a932 100644
--- a/app/models/response.js
+++ b/app/models/response.js
@@ -13,5 +13,6 @@ export default DS.Model.extend({
     demographicSnapshot: DS.belongsTo('demographic'),
     createdOn: DS.attr('date'),
     isPreview: DS.attr('boolean', {defaultValue: false}),
-    hash_child_id: DS.attr('string')
+    hash_child_id: DS.attr('string'),
+    recordingMethod: DS.attr('string')
 });
diff --git a/app/services/mic-check-processor.js b/app/services/mic-check-processor.js
new file mode 100644
index 00000000..4357bfc1
--- /dev/null
+++ b/app/services/mic-check-processor.js
@@ -0,0 +1,34 @@
+// Audio worklet processor for mic check
+// source: https://www.webrtc-developers.com/how-to-know-if-my-microphone-works/#detect-noise-or-silence
+
+const SMOOTHING_FACTOR = 0.99;
+const SCALING_FACTOR = 5;
+
+class MicCheckProcessor extends AudioWorkletProcessor {
+    constructor() {
+        super();
+        this._volume = 0;
+        this._micChecked = false;
+        this.port.onmessage = (event) => {
+            if (event.data && event.data.micChecked && event.data.micChecked == true) {
+                this._micChecked = true;
+            }
+        }
+    }
+
+    process(inputs, outputs, params) { // eslint-disable-line no-unused-vars
+        if (this._micChecked) {
+            return false;
+        } else {
+            const input = inputs[0];
+            const samples = input[0];
+            const sumSquare = samples.reduce((p,c) => p + (c * c), 0);
+            const rms = Math.sqrt(sumSquare / (samples.length || 1)) * SCALING_FACTOR;
+            this._volume = Math.max(rms, this._volume * SMOOTHING_FACTOR);
+            this.port.postMessage({volume: this._volume});
+            return true;
+        }
+    }
+}
+
+registerProcessor('mic-check-processor', MicCheckProcessor);
\ No newline at end of file
diff --git a/app/services/s3.js b/app/services/s3.js
new file mode 100644
index 00000000..adbd8d46
--- /dev/null
+++ b/app/services/s3.js
@@ -0,0 +1,106 @@
+class S3 {
+    constructor(key, s3vars) {
+        this.env = s3vars;
+        this.key = key;
+        this.blobParts = [];
+        this.promises = [];
+        this.partNumber = 1;
+        this.partsUploaded = 0;
+        this.hasStartedCompletingUpload = false;
+        // eslint-disable-next-line no-undef
+        this.s3 = new AWS.S3({
+            credentials: {
+                accessKeyId: this.env.accessKeyId,
+                secretAccessKey: this.env.secretAccessKey
+            }
+        });
+    }
+
+    get blobPartsSize() {
+        return this.blobParts.reduce((p, c) => {
+            return p + c.size;
+        }, 0);
+    }
+
+    get percentUploadComplete() {
+        return Math.floor((this.partsUploaded / this.partNumber) * 100);
+    }
+
+    async createUpload() {
+        this.logRecordingEvent(`Creating video upload connection.`);
+        const createResponse = await this.s3.createMultipartUpload({
+            Bucket: this.env.bucket,
+            Key: this.key,
+            ContentType: "video/mp4",
+        }).promise();
+        this.uploadId = createResponse.UploadId;
+        this.logRecordingEvent(`Connection established.`);
+    }
+
+    async uploadPart(blob, partNumber) {
+        let retry = 0;
+        let err;
+        while (retry < 3) {
+            try {
+                const uploadPartResponse = await this.s3.uploadPart({
+                    Body: blob,
+                    Bucket: this.env.bucket,
+                    Key: this.key,
+                    PartNumber: partNumber,
+                    UploadId: this.uploadId,
+                }).promise();
+                this.logRecordingEvent(`Uploaded file part ${partNumber}.`);
+
+                this.partsUploaded++;
+
+                return {
+                    PartNumber: partNumber,
+                    ETag: uploadPartResponse.ETag
+                };
+            } catch (_err) {
+                this.logRecordingEvent(`Error uploading part ${partNumber}.\nError: ${_err}`);
+                err = _err;
+                retry += 1;
+            }
+        }
+        throw Error(`Upload part failed after 3 attempts.\nError: ${err}`);
+    }
+
+    async completeUpload() {
+        this.hasStartedCompletingUpload = true;
+        this.addUploadPartPromise();
+        this.parts = await Promise.all(this.promises);
+
+        return this.s3.completeMultipartUpload({
+            Bucket: this.env.bucket,
+            Key: this.key,
+            MultipartUpload: {
+                Parts: this.parts
+            },
+            UploadId: this.uploadId
+        }).promise()
+            .then((resp) => {
+                this.logRecordingEvent(`Upload complete: ${resp.Location}`);
+            });
+    }
+
+    addUploadPartPromise() {
+        this.promises.push(this.uploadPart(new Blob(this.blobParts), this.partNumber++));
+        this.blobParts = [];
+    }
+
+    onDataAvailable(blob) {
+        this.blobParts.push(blob);
+
+        if (this.blobPartsSize > 5 * (1024 * 1024)) {
+            this.addUploadPartPromise();
+        }
+    }
+
+    logRecordingEvent(msg) {
+        // right now this just prints to the console, but we could also send this info to permanent storage (similar to pipe logs)
+        const timestamp = new Date().toISOString();
+        console.log(`Recording log: ${timestamp}\nFile: ${this.key}\n${msg}\n`);
+    }
+}
+export default S3;
diff --git a/app/services/video-recorder.js b/app/services/video-recorder.js
index e7a5105f..15b6501c 100644
--- a/app/services/video-recorder.js
+++ b/app/services/video-recorder.js
@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import S3 from './s3';
 
 /* OMIT FROM YUIDOC *
  * @module exp-player
@@ -84,68 +85,89 @@ const VideoRecorder = Ember.Object.extend({
 
     divId: 'lookit-video-recorder',
     recorderId: (new Date().getTime() + ''),
-    pipeVideoName: '',
+    videoName: '',
 
     started: Ember.computed.alias('_started').readOnly(),
+    startTime: Ember.computed.alias('_startTime').readOnly(),
     hasCamAccess: false,
     nWebcams: Ember.computed.alias('_nWebcams').readOnly(), // number of webcams available for recording
     nMics: Ember.computed.alias('_nMics').readOnly(), // number of microphones available for recording
     recording: Ember.computed.alias('_recording').readOnly(),
     hasCreatedRecording: Ember.computed.alias('_hasCreatedRecording').readOnly(),
+    micChecked: Ember.computed.alias('_micChecked'),
+
     connected: false,
-    uploadTimeout: null, // timer counting from attempt to stop until we should just
-    //resolve the stopPromise
-    maxUploadTimeMs: 5000,
+    uploadTimeout: null, // timer counting from attempt to stop until we should just resolve the stopPromise
+    maxUploadTimeMs: 7000,
+    maxRecordingTime: null,
+    checkMic: null,
 
     _started: false,
+    _startTime: null,
     _camAccess: false,
     _recording: false,
     _recorderReady: false,
     _hasCreatedRecording: false,
     _nWebcams: 0,
     _nMics: 0,
-
+    _minVolume: 0.1, // Volume required to pass mic check
+    _micChecked: false, // Has the microphone ever exceeded minVolume?
     _recordPromise: null,
+    _stopTimeout: null,
     _stopPromise: null,
-    _isuploaded: false,
-
-    recorder: null, // The actual recorder object, also stored in PipeSDK.recorders obj
-
-    // List of webcam hooks that should be added to recorder
-    // See https://addpipe.com/docs#javascript-events-api
-    hooks: ['onRecordingStarted',
-        'onCamAccess',
+    _isUploaded: false,
+    _processorNode: null,
+    _lastState: null,
+    _recorderIsDestroyed: false,
+
+    recorder: null, // The actual recorder object
+
+    // RecordRTC does not natively support the states/event-related callbacks below,
+    // these are from Pipe and we're not changing the names for combatibility reasons.
+    // RecordRTC API: https://github.com/muaz-khan/RecordRTC#api
+    // We can also access the internal web audio API recording object (MediaStreamRecorder) and use that directly
+    hooks: [
+        'onRecordingStarted', // triggered after the resolution of RecordRTC startRecording promise
+        'onCamAccess', // triggered by resolution of get user media promise
         'onReadyToRecord',
         'onUploadDone',
-        'userHasCamMic',
-        'onConnectionStatus',
-        'onMicActivityLevel',
-        'btPlayPressed',
-        'btRecordPressed',
-        'btStopRecordingPressed',
-        'btPausePressed',
-        'onPlaybackComplete',
-        'onConnectionClosed',
-        'onSaveOk'
+        'userHasCamMic', // set after the resolution of the get user media promise
+        // Connection status/closed hooks made more sense when video upload was streaming rather than uploading in parts as we're doing now.
+        // These hooks are maintained for backward compatibility and are set to fire in a way that mimics their previous behavior, i.e.
+        // when the multi-part upload is established, completed, or fails. However they won't work in exactly the same way since we don't have a 
+        // continuously-monitored streaming connection.
+        'onConnectionStatus', 
+        'onConnectionClosed', 
+        'onMicActivityLevel', // triggered via Audio Worklet Processor (until micChecked is true)
+        'onStateChanged',
+        'onRecordingStopped',
+        'ondataavailable'
     ],
 
-    minVolume: 1, // Volume required to pass mic check
-    micChecked: false, // Has the microphone ever exceeded minVolume?
+    // Old Pipe hooks that have not been implemented (yet)
+    // 'btPlayPressed'
+    // 'btRecordPressed'
+    // 'btStopRecordingPressed'
+    // 'btPausePressed'
+    // 'onPlaybackComplete'
+    // 'onSaveOk'
+
+    // Old Pipe install parameters that have not been implemented (yet)
+    // 'audioOnly'
+    // 'autosave'
 
     /**
      * Install a recorder onto the page and optionally begin recording immediately.
      *
      * @method install
-     * @param videoFilename desired filename for video (will be set after saving with Pipe name) ['']
-     * @param pipeKey Pipe account hash ['']
-     * @param pipeEnv which Pipe environment [1]
-     * @param maxRecordingTime recording length limit in s [100000000]
-     * @param autosave whether to autosave - 1 or 0 [1]
-     * @param audioOnly whether to do audio only recording - 1 or 0 [0]
+     * @param videoFilename desired filename for video 
+     * @param maxRecordingTime recording length limit in seconds
+     * @param checkMic boolean, whether a mic check must be passed before resolving the install promise
+     * @param s3vars object with s3 environment variables
      * @return {Promise} Resolves when widget successfully installed and started
      */
 
-    install(videoFilename = '', pipeKey = '', pipeEnv = 1, maxRecordingTime = 100000000, autosave = 1, audioOnly = 0) {
+    install(videoFilename = '', maxRecordingTime = 100000000, checkMic = false, s3vars = {}) {
 
         let origDivId = this.get('divId');
 
@@ -167,7 +189,7 @@ const VideoRecorder = Ember.Object.extend({
 
         return new RSVP.Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
 
-            var pipeConfig = {
+            /* var pipeConfig = {
                 qualityurl: 'https://d3l7d0ho3mojk5.cloudfront.net/pipe/720p.xml',
                 showMenu: 0, // hide recording button menu
                 sis: 1, // skip initial screen
@@ -185,27 +207,142 @@ const VideoRecorder = Ember.Object.extend({
                     width: 320,
                     height: 240
                 }
-            };
+            }; */
+            var _this = this;
+            const recordRtcConfig = {
+                type: 'video', // audio, video, canvas, gif
+                mimeType: 'video/webm',
+                // video/webm;codecs=vp9
+                // video/webm;codecs=vp8
+                // video/webm;codecs=h264
+                //recorderType: MediaStreamRecorder,
+                disableLogs: false,
+                timeSlice: 1000, 
+                ondataavailable: function(blob) {
+                    if (_this._ondataavailable) {
+                        _this._ondataavailable.call(_this, blob);
+                    }
+                },
+                //checkForInactiveTracks: false, // auto stop recording if camera stops
+                //onTimeStamp: function(timestamp) {}, // if timeSlice is given
+                //bitsPerSecond: 128000, // audio and video
+                //audioBitsPerSecond: 128000,
+                //videoBitsPerSecond: 128000,
+                //frameInterval: 90, // used by CanvasRecorder and WhammyRecorder
+                // if you are recording multiple streams into single file
+                // previewStream helps you see what is being recorded
+                //previewStream: function(stream) {},
+                // used by CanvasRecorder and WhammyRecorder
+                //video: HTMLVideoElement,
+                // used by CanvasRecorder and WhammyRecorder
+                //canvas: {
+                //    width: 640,
+                //    height: 480
+                //},
+                // used by StereoAudioRecorder, range is 22050 to 96000.
+                //sampleRate: 96000,
+                // used by StereoAudioRecorder, range is 22050 to 96000. This forces 16khz recording:
+                //desiredSampRate: 16000,
+                // used by StereoAudioRecorder, legal values are (256, 512, 1024, 2048, 4096, 8192, 16384).
+                //bufferSize: 16384, 
+                //numberOfAudioChannels: 2, // used by StereoAudioRecorder: 1 or 2
+                //frameRate: 30, // used by WebAssemblyRecorder
+                //bitrate: 128000, // used by WebAssemblyRecorder
+                // used by MultiStreamRecorder to access HTMLCanvasElement
+                //elementClass: 'multi-streams-mixer'
+            }; 
 
             this.set('_started', true);
-            var _this = this;
-            PipeSDK.insert(divId, pipeConfig, function (myRecorderObject) {
-                _this.set('recorder', PipeSDK.getRecorderById(divId));
-                _this.get('hooks').forEach(hookName => {
-                    // At the time the hook is actually called, look up the appropriate
-                    // functions both from here and that might be added later.
-                    myRecorderObject[hookName] = function (...args) {
-                        if (_this.get('_' + hookName)) { // 'Native' hook defined here
-                            _this['_' + hookName].apply(_this, args);
-                        }
-                        if (_this.hasOwnProperty(hookName)) { // Some hook added later via 'on'
-                            _this[hookName].apply(_this, args);
+
+            function afterGettingUserMedia(stream) {
+                if (_this.get('_recording')) {
+                    return null;
+                } else {
+                    // add video element in divId to display video stream
+                    let vidElement = document.createElement('video');
+                    vidElement.controls = false;
+                    vidElement.autoplay = true;
+                    vidElement.muted = true;
+                    vidElement.style.width = "100%";
+                    vidElement.srcObject = stream;
+                    let vidDivId = _this.get('divId');
+                    let vidDiv = document.getElementById(vidDivId);
+                    vidDiv.appendChild(vidElement);
+                    // create RecordRTC recorder
+                    let thisRecorder = new RecordRTCPromisesHandler(stream, recordRtcConfig);
+                    _this.set('recorder', thisRecorder);
+                    _this.set('stream', stream);
+                    _this.set('maxRecordingTime', maxRecordingTime)
+                    _this.set('videoName', videoFilename);
+
+                    // Filename doesn't have an extension.
+                    _this.set('s3', new S3(`${videoFilename}.webm`, s3vars));
+                    
+                    // set up hooks
+                    _this.get('hooks').forEach(function(hookName) {
+                        // At the time the hook is actually called, look up the appropriate
+                        // functions both from here and that might be added later.
+                        thisRecorder[hookName] = function(...args) {
+                            if (_this.get('_' + hookName)) { // 'Native' hook defined here
+                                _this['_' + hookName].apply(_this, args);
+                            }
+                            if (_this.hasOwnProperty(hookName)) { // Some hooks added later via 'on'
+                                _this[hookName].apply(_this, args);
+                            }
                         }
-                    };
-                });
-            });
+                    });
+                    _this.set('_userHasCamMic', true);
+                    // trigger on cam access hook
+                    if (_this.get('onCamAccess')) {
+                        let id = _this.get('recorderId');
+                        _this.get('onCamAccess').call(_this, id, true); // recId, hasAccess
+                    }
+                    return stream;
+                }
+            }
 
-            return resolve();
+            const setupMicCheck = (stream) => {
+                if (stream !== null) {
+                    if (checkMic) {
+                        let audioContext = new AudioContext();
+                        let microphone = audioContext.createMediaStreamSource(stream);
+                        audioContext.audioWorklet.addModule('assets/mic-check-processor.js').then(() => {
+                            const processorNode = new AudioWorkletNode(audioContext, 'mic-check-processor');
+                            this.set('_processorNode', processorNode);
+                            microphone.connect(processorNode).connect(audioContext.destination);
+                            var _this = this;
+                            processorNode.port.onmessage = (event) => {
+                                // handle message from the processor: event.data
+                                if (_this.get('recorder').onMicActivityLevel) {
+                                    if ('data' in event && 'volume' in event.data) {
+                                        let id = _this.get('recorderId');
+                                        _this.get('recorder').onMicActivityLevel.call(_this, id, event.data.volume);
+                                    }
+                                } else {
+                                    return false;
+                                }
+                            }
+                            resolve(); // resolve the install promise after mic check has been set up
+                        });
+                    } else {
+                        this._completeMicCheck();
+                        resolve(); // skip mic check and resolve the install promise
+                    }
+                } else {
+                    reject();
+                }
+            };
+
+            const catch_install_error = (err) => {
+                console.error(`Recorder installation error:\n${err.name}: ${err.message}`);
+                console.trace();
+                return reject();
+            }
+
+            navigator.mediaDevices.getUserMedia({audio: {noiseSuppression: true}, video: {width: 1280, height: 720, frameRate: 30}})
+                .then(afterGettingUserMedia)
+                .then(setupMicCheck)
+                .catch(catch_install_error);
 
         });
     },
@@ -216,34 +353,39 @@ const VideoRecorder = Ember.Object.extend({
      * @method record
      * @return {Promise}
      */
-    record() {
+    async record() {
         if (!this.get('started')) {
-            throw new Error('Must call start before record');
+            throw new Error('Must call install before record');
         }
-        let count = 0;
         var _this = this;
-        this.set('_isuploaded', false);
-        let id = window.setInterval(() => {
-            if (++count > 50) { // stop trying - failure (5s)
-                if (_this.get('onCamAccess')) {
-                    _this.get('onCamAccess').call(_this, false);
-                }
-                return window.clearInterval(id), _this.get('_recordPromise').reject();
-            }
-            if (!_this.get('recorder') || !(_this.get('recorder').record)) {
-                return null;
-            }
-            _this.get('recorder').record();
-
-            // Giving the "record" method a few seconds seems to increase the reliability of hooks firing.
-            setTimeout(function () {
-                window.clearInterval(id); // stop trying - success
-            }, 3000);
-
+        _this.set('_isUploaded', false);
+        if (!_this.get('recorder') || !(_this.get('recorder').startRecording)) {
             return null;
-        }, 100); // try every 100ms
+        }
+        
+        await _this.get('s3').createUpload();
 
-        return new Ember.RSVP.Promise((resolve, reject) => {
+        if (_this.get('recorder').onConnectionStatus) {
+            let id = _this.get('recorderId');
+            _this.get('recorder').onConnectionStatus.call(_this, id, 'connected'); 
+        }
+            
+        _this.get('recorder').startRecording()
+            .then(()=> {
+                _this.set('_startTime', performance.now());
+                _this.get('recorder').onRecordingStarted.call(_this); 
+                if (_this.get('maxRecordingTime') !== null) {
+                    _this.set('_stopTimeout', window.setTimeout(function() {
+                        console.warn(`Reached max recording time for file: ${_this.get('videoName')}`);
+                        _this.stop();
+                    }, _this.get('maxRecordingTime')*1000));
+                }
+            })
+            .catch((err) => {
+                console.error(`Error starting recording for file: ${_this.get('videoName')}\n${err.name}: ${err.message}`);
+            });
+
+        return new RSVP.Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
             if (_this.get('recording')) {
                 resolve(this);
             } else {
@@ -263,8 +405,9 @@ const VideoRecorder = Ember.Object.extend({
      */
     getTime() {
         let recorder = this.get('recorder');
-        if (recorder && recorder.getStreamTime) {
-            return parseFloat(recorder.getStreamTime());
+        if (recorder && this._started && this._startTime) {
+            let ts = Math.round(performance.now() - this._startTime);
+            return ts; 
         }
         return null;
     },
@@ -272,39 +415,94 @@ const VideoRecorder = Ember.Object.extend({
     /**
      * Stop recording and save the video to the server
      * @method stop
+     * @return {Promise}
      */
-    stop(maxUploadTimeMs = 5000) {
-        var recorder = this.get('recorder');
-        if (recorder) {
-            try {
-                recorder.stopVideo();
-            } catch (e) {
-                console.log('error stopping video');
-            }
+    async stop(maxUploadTimeMs = 7000) {
+        
+        if (this.get('_stopTimeout') !== null) {
+            window.clearTimeout(this.get('_stopTimeout'));
         }
-        this.set('_recording', false);
-
         var _this = this;
-        var _stopPromise = new Ember.RSVP.Promise((resolve, reject) => {
-            // If we don't end up uploading within 5 seconds, call reject
+        var _stopPromise = new RSVP.Promise((resolve, reject) => {
+            // If we reach the upload time limit maxUploadTimeMs, call reject
             _this.set('uploadTimeout', window.setTimeout(function () {
-                console.warn('waiting for upload timed out');
+                console.warn(`Waiting for upload timed out: ${_this.get('videoName')}`);
                 window.clearTimeout(_this.get('uploadTimeout'));
                 reject();
             }, maxUploadTimeMs));
-            if (_this.get('_isuploaded')) {
-                window.clearTimeout(_this.get('uploadTimeout'));
-                resolve(_this);
-            } else {
+            if (!_this.get('_isUploaded')) {
                 _this.set('_stopPromise', {
                     resolve: resolve,
                     reject: reject
                 });
             }
         });
+        var recorder = this.get('recorder');
+        if (recorder) {
+            try {
+                recorder.stopRecording();
+                _this.get('recorder').onRecordingStopped.call(_this);
+                await this.get('s3').completeUpload();
+                _this._onUploadDone(this.get('recorderId'), this.get('s3').key); // clears the upload timeout, sets isUploaded to true, resolves stop promise
+            } catch (e) {
+                console.warn(`Error stopping video ${_this.get('videoName')}: ${e}`);
+            }
+        }
         return _stopPromise;
     },
 
+    /**
+     * Pause the recording
+     *
+     * @method pause
+     * @return {Promise}
+     */
+    pause() {
+        this.get('recorder').getState().then((curr_state) => {
+            return new RSVP.Promise((resolve, reject) => {
+                if (curr_state == "recording") {
+                    this.get('recorder').pauseRecording()
+                        .then(() => {
+                            resolve();
+                        })
+                        .catch((err) => {
+                            console.error(`Error pausing recorder:\n${err.name}: ${err.message}`);
+                            console.trace();
+                            reject();
+                        });
+                } else {
+                    resolve();
+                }
+            });
+        })
+    },
+
+    /**
+     * Resume the recording
+     *
+     * @method resume
+     * @return {Promise}
+     */
+    resume() {
+        this.get('recorder').getState().then((curr_state) => {
+            return new RSVP.Promise((resolve, reject) => {
+                if (curr_state == "paused") {
+                    this.get('recorder').resumeRecording()
+                        .then(() => {
+                            resolve();
+                        })
+                        .catch((err) => {
+                            console.error(`Error resuming recording:\n${err.name}: ${err.message}`);
+                            console.trace();
+                            reject();
+                        });
+                } else {
+                    resolve();
+                }
+            });
+        })
+    },
+
     /**
      * Destroy video recorder
      *
@@ -313,10 +511,17 @@ const VideoRecorder = Ember.Object.extend({
     destroy() {
         console.log(`Destroying the videoRecorder: ${this.get('divId')}`);
         $(`#${this.get('divId')}-container`).remove();
-        if (this.get('recorder') && this.get('recorder').remove) {
-            this.get('recorder').remove();
+        if (this.get('connected') && this.get('recorder').onConnectionClosed) {
+            let id = this.get('recorderId');
+            this.get('recorder').onConnectionClosed(id); 
+        }
+        if (this.get('recorder') && this.get('recorder').destroy) {
+            this.get('recorder').destroy();
         }
         this.set('_recording', false);
+        // The recorder's destroy method just destroys the internal recorder, but our recorder object still exists (because it was created with const).
+        // Mark it as destroyed so that we can check for this in other places (calling methods on a destroyed recorder throws errors).
+        this.set('_recorderIsDestroyed', true);
     },
 
     on(hookName, func) {
@@ -326,28 +531,44 @@ const VideoRecorder = Ember.Object.extend({
         this.set(hookName, func);
     },
 
-    // Begin webcam hooks
+    // private helper function
+    _completeMicCheck() {
+        this.set('_micChecked', true);
+        // Remove the handler so we're not running this every single mic sample from now on
+        this.set('_onMicActivityLevel', null);
+        // This would remove the handler from the actual recorder, but we might have
+        // something added by a consuming frame via the 'on' fn
+        this.get('recorder').onMicActivityLevel = null; //function (recorderId, currentActivityLevel) {}; // eslint-disable-line no-unused-vars
+        if (this.get('_processorNode') !== null) {
+            this.get('_processorNode').port.postMessage({micChecked: true});
+        }
+    },
+
+    // Begin webcam hooks (names are a carryover from Pipe)
     _onRecordingStarted(recorderId) { // eslint-disable-line no-unused-vars
         this.set('_recording', true);
         this.set('_hasCreatedRecording', true);
-        this.set('pipeVideoName', this.get('recorder').getStreamName());
         if (this.get('_recordPromise')) {
             this.get('_recordPromise').resolve(this);
         }
     },
 
     // Once recording finishes uploading, resolve call to stop
-    _onUploadDone(recorderId, streamName, streamDuration, audioCodec, videoCodec, fileType, audioOnly, location) { // eslint-disable-line no-unused-vars
+    _onUploadDone(recorderId, streamName, streamDuration, audioCodec, videoCodec, fileType, location) { // eslint-disable-line no-unused-vars
         window.clearTimeout(this.get('uploadTimeout'));
-        this.set('_isuploaded', true);
+        this.set('_isUploaded', true);
         if (this.get('_stopPromise')) {
             console.log('Upload completed for file: ' + streamName);
             this.get('_stopPromise').resolve(this);
+            this.set('_stopPromise', null);
+        }
+        if (this.get('recorder').onConnectionClosed) {
+            let id = this.get('recorderId');
+            this.get('recorder').onConnectionClosed(id); 
         }
     },
 
     _onCamAccess(recorderId, allowed) { // eslint-disable-line no-unused-vars
-        console.log('onCamAccess: ' + recorderId);
         this.set('hasCamAccess', allowed);
     },
 
@@ -360,30 +581,57 @@ const VideoRecorder = Ember.Object.extend({
         this.set('_nMics', micNumber);
     },
 
+    _onMicActivityLevel(recorderId, currentActivityLevel) { // eslint-disable-line no-unused-vars
+        if (currentActivityLevel > this.get('_minVolume')) {
+            this._completeMicCheck();
+        }
+    },
+
+    // These two connection hooks are carry-overs from pipe and no longer native hooks. 
+    // Connection status is now triggered by the `record` method and the `onConnectionClosed` hook.
     _onConnectionStatus(recorderId, status) { // eslint-disable-line no-unused-vars
         this.set('connected', status === 'connected');
     },
-
-    _onMicActivityLevel(recorderId, currentActivityLevel) { // eslint-disable-line no-unused-vars
-        if (currentActivityLevel > this.get('minVolume')) {
-            this.set('micChecked', true);
-            // Remove the handler so we're not running this every single mic sample from now on
-            this.set('_onMicActivityLevel', null);
-            // This would remove the handler from the actual recorder, but we might have
-            // something added by a consuming frame via the 'on' fn
-            //this.get('recorder').onMicActivityLevel = function (recorderId, currentActivityLevel) {};
+    // Connection closed is now triggered by the `onUploadDone` hook and the `destroy` method.
+    _onConnectionClosed(recorderId) {
+        if (this.get('recorder').onConnectionStatus) {
+            this.get('recorder').onConnectionStatus(recorderId, 'disconnected'); 
         }
-    }
+    },
 
     // Additional hooks available:
+    // NOTE: these hooks are a carry-over from Pipe and not actually implemented (yet). 
+    // All except for 'onSaveOk' are related to Pipe's built-in recording/playback menu. The new recorder is not linked to a 
+    // playback menu, which means that the buttons and callbacks should be implemented at the frame's component level (see video-config-quality for an example).
+    // The 'onSaveOk' hook is not used by our frames and the existing 'onUploadDone' hook should cover its uses.
     //  btRecordPressed = function (recorderId) {};
     //  btPlayPressed(recorderId)
     //  btStopRecordingPressed = function (recorderId) {};
     //  btPausePressed = function (recorderId) {};
     //  onPlaybackComplete = function (recorderId) {};
-    //  onConnectionClosed = function (recorderId) {};
     //  onSaveOk = function (recorderId, streamName, streamDuration, cameraName, micName, audioCodec, videoCodec, filetype, videoId, audioOnly, location) {};
 
+    // RecordRTC event-related callbacks
+    _onStateChanged(state) {
+        // RecordRTC states: inactive, recording, stopped, paused
+        // don't check for stopped state here - RecordRTC has a separate callback onRecordingStopped
+        if (state == "recording") {
+            let recorderId = this.get('recorderId');
+            this.set('_recording', true);
+            this.get('recorder')._onRecordingStarted(recorderId);
+        } else {
+            this.set('_recording', false);
+        }
+    },
+
+    _onRecordingStopped() {
+        this.set('_recording', false);
+    },
+
+    _ondataavailable(blob) {
+        this.get('s3').onDataAvailable(blob);
+    }
+
     // End webcam hooks
 });
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index f83ec297..f51898d9 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -96,6 +96,14 @@ p#pipeClickPowered {
 .lookit-video-recorder, .lookit-video-recorder > div, .lookit-video-recorder video.pipeNormal, .lookit-video-recorder video.pipeSmallNormal {
     height: 100% !important;
     width: 100% !important;
+    background-color: black;
+    border-radius: 8px;
+}
+
+.lookit-video-recorder video {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
 }
 
 // Make sure the microphone symbol and meter show up even if aspect ratio is such that
diff --git a/app/styles/components/exp-lookit-observation.scss b/app/styles/components/exp-lookit-observation.scss
index 32e99f9f..9869eacc 100644
--- a/app/styles/components/exp-lookit-observation.scss
+++ b/app/styles/components/exp-lookit-observation.scss
@@ -53,7 +53,9 @@
     position: absolute;
     font-size: 2em;
     text-align: center;
-    margin: 30% 0 0 30%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .exp-lookit-observation #webcamToggleButton {
diff --git a/app/styles/components/exp-video-config-quality.scss b/app/styles/components/exp-video-config-quality.scss
index af354619..0fc4268a 100644
--- a/app/styles/components/exp-video-config-quality.scss
+++ b/app/styles/components/exp-video-config-quality.scss
@@ -162,4 +162,80 @@ $medium-focus-color: #87b79f;
         margin-top: 50px;
     }
 
+    .recorder-container {
+        width:100%;
+        margin: 0px;
+        height: 20vh;
+    }
+  
+    .recorder {
+        padding: 0px;
+        margin-bottom: 1em;
+        margin-top: 1em;
+        background-color: #ccc;
+        width: 110%;
+        height:100%;
+        min-width:450px;
+        margin-left:-10%;
+        clear:both !important;
+        position: relative;
+      }
+  
+    .Blink {
+        animation: exp-lookit-video-config-quality-blinker 1.0s cubic-bezier(.5, 0, 1, 1) infinite alternate;
+        float:left;
+        font-size:large;
+        margin-right: .5em;
+    }
+    @keyframes exp-lookit-video-config-quality-blinker {
+        from { opacity: 1; }
+        to { opacity: 0; }
+    }
+
+    #recordingStatus {
+        position: absolute;
+        z-index: 999;
+        text-align: center;
+        margin: .25em;
+        padding: .5em;
+        border-radius: .5em;
+        background-color: white;
+        opacity: 0.6;
+    }
+
+    #recordingIndicator {
+        margin: .25em;
+    }
+
+    .menu-btn {
+        position: absolute;
+        margin-top: 5px;
+    }
+
+    .menu-btn i {
+        margin: .25em;
+    }
+
+    .menu-btn:disabled {
+        opacity: 0.5;
+        border-color: lightgrey;
+        cursor: not-allowed;
+    }
+
+    #recordbutton {
+        left: 10%;
+    }
+
+    #stopbutton {
+        left: 45%;
+    }
+
+    #playbutton {
+        right: 10%;
+    }
+
+    .recorder-container #recorder {
+        width: 100% !important;
+    }
+
 }
diff --git a/config/environment.js b/config/environment.js
index bd11cec1..3d365a21 100644
--- a/config/environment.js
+++ b/config/environment.js
@@ -13,6 +13,12 @@ module.exports = function(environment) {
         cdn: 'https://cdn.ravenjs.com/3.26.4/ember/raven.min.js', // probably unused
         development: process.env.SENTRY_DSN === ''
     },
+    awsRecording: {
+      region: process.env.S3_REGION,
+      accessKeyId: process.env.S3_ACCESS_KEY_ID,
+      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
+      bucket: process.env.S3_BUCKET
+    },
     EmberENV: {
       EXTEND_PROTOTYPES: true,
       FEATURES: {
diff --git a/public/assets/mic-check-processor.js b/public/assets/mic-check-processor.js
new file mode 100644
index 00000000..4357bfc1
--- /dev/null
+++ b/public/assets/mic-check-processor.js
@@ -0,0 +1,34 @@
+// Audio worklet processor for mic check
+// source: https://www.webrtc-developers.com/how-to-know-if-my-microphone-works/#detect-noise-or-silence
+
+const SMOOTHING_FACTOR = 0.99;
+const SCALING_FACTOR = 5;
+
+class MicCheckProcessor extends AudioWorkletProcessor {
+    constructor() {
+        super();
+        this._volume = 0;
+        this._micChecked = false;
+        this.port.onmessage = (event) => {
+            if (event.data && event.data.micChecked && event.data.micChecked == true) {
+                this._micChecked = true;
+            }
+        }
+    }
+
+    process(inputs, outputs, params) { // eslint-disable-line no-unused-vars
+        if (this._micChecked) {
+            return false;
+        } else {
+            const input = inputs[0];
+            const samples = input[0];
+            const sumSquare = samples.reduce((p,c) => p + (c * c), 0);
+            const rms = Math.sqrt(sumSquare / (samples.length || 1)) * SCALING_FACTOR;
+            this._volume = Math.max(rms, this._volume * SMOOTHING_FACTOR);
+            this.port.postMessage({volume: this._volume});
+            return true;
+        }
+    }
+}
+
+registerProcessor('mic-check-processor', MicCheckProcessor);
\ No newline at end of file
diff --git a/translations/en-us.yaml b/translations/en-us.yaml
index bf20aa11..94fb9e2a 100644
--- a/translations/en-us.yaml
+++ b/translations/en-us.yaml
@@ -193,7 +193,7 @@ exp-lookit-observation:
     Show: Show
     webcam-feed-not-displayed: Webcam feed <br>not displayed
     Recording: Recording
-    not-recording-yet: Not recording yet
+    not-recording-yet: Not recording
     Record: Record
     recording-required-warning: Recording required to continue
     stopping-and-uploading: Stopping and uploading