diff --git a/app/components-react/pages/RecordingHistory.tsx b/app/components-react/pages/RecordingHistory.tsx
index e7a34e3812e3..f018e0c1998e 100644
--- a/app/components-react/pages/RecordingHistory.tsx
+++ b/app/components-react/pages/RecordingHistory.tsx
@@ -293,7 +293,11 @@ export function RecordingHistory() {
             <div className={styles.recording} key={recording.timestamp}>
               <span style={{ marginRight: '8px' }}>{formattedTimestamp(recording.timestamp)}</span>
               <Tooltip title={$t('Show in folder')}>
-                <span onClick={() => showFile(recording.filename)} className={styles.filename}>
+                <span
+                  data-test="filename"
+                  onClick={() => showFile(recording.filename)}
+                  className={styles.filename}
+                >
                   {recording.filename}
                 </span>
               </Tooltip>
diff --git a/app/components-react/root/NotificationsArea.tsx b/app/components-react/root/NotificationsArea.tsx
index 4307621658fe..5d27c49d630f 100644
--- a/app/components-react/root/NotificationsArea.tsx
+++ b/app/components-react/root/NotificationsArea.tsx
@@ -48,7 +48,7 @@ class NotificationsModule {
 
     message
       .info({
-        content: <MessageNode notif={notif} />,
+        content: <MessageNode notif={notif} data-testid="notification" />,
         duration: notif.lifeTime === -1 ? 0 : notif.lifeTime / 1000,
         key: `${notif.message}${notif.date}`,
         onClick: () => this.clickNotif(),
diff --git a/app/components-react/root/StudioFooter.tsx b/app/components-react/root/StudioFooter.tsx
index 3f57fe081afc..8619c748836c 100644
--- a/app/components-react/root/StudioFooter.tsx
+++ b/app/components-react/root/StudioFooter.tsx
@@ -4,7 +4,7 @@ import { EStreamQuality } from '../../services/performance';
 import { EStreamingState, EReplayBufferState, ERecordingState } from '../../services/streaming';
 import { Services } from '../service-provider';
 import { $t } from '../../services/i18n';
-import { useVuex } from '../hooks';
+import { useDebounce, useVuex } from '../hooks';
 import styles from './StudioFooter.m.less';
 import PerformanceMetrics from '../shared/PerformanceMetrics';
 import TestWidgets from './TestWidgets';
@@ -42,9 +42,12 @@ export default function StudioFooterComponent() {
       StreamingService.views.supports('stream-schedule') &&
       !RecordingModeService.views.isRecordingModeEnabled,
     streamQuality: PerformanceService.views.streamQuality,
-    replayBufferOffline: StreamingService.state.replayBufferStatus === EReplayBufferState.Offline,
-    replayBufferStopping: StreamingService.state.replayBufferStatus === EReplayBufferState.Stopping,
-    replayBufferSaving: StreamingService.state.replayBufferStatus === EReplayBufferState.Saving,
+    replayBufferOffline:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Offline,
+    replayBufferStopping:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Stopping,
+    replayBufferSaving:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Saving,
     recordingModeEnabled: RecordingModeService.views.isRecordingModeEnabled,
     replayBufferEnabled: SettingsService.views.values.Output.RecRB,
   }));
@@ -83,7 +86,7 @@ export default function StudioFooterComponent() {
   }
 
   function toggleReplayBuffer() {
-    if (StreamingService.state.replayBufferStatus === EReplayBufferState.Offline) {
+    if (replayBufferOffline) {
       StreamingService.actions.startReplayBuffer();
     } else {
       StreamingService.actions.stopReplayBuffer();
@@ -197,7 +200,7 @@ function RecordingButton() {
   const { StreamingService } = Services;
   const { isRecording, recordingStatus } = useVuex(() => ({
     isRecording: StreamingService.views.isRecording,
-    recordingStatus: StreamingService.state.recordingStatus,
+    recordingStatus: StreamingService.state.status.horizontal.recording,
   }));
 
   function toggleRecording() {
@@ -214,7 +217,7 @@ function RecordingButton() {
         >
           <button
             className={cx(styles.recordButton, 'record-button', { active: isRecording })}
-            onClick={toggleRecording}
+            onClick={useDebounce(200, toggleRecording)}
           >
             <span>
               {recordingStatus === ERecordingState.Stopping ? (
diff --git a/app/i18n/en-US/streaming.json b/app/i18n/en-US/streaming.json
index 2477815bae7b..86a8692a82fa 100644
--- a/app/i18n/en-US/streaming.json
+++ b/app/i18n/en-US/streaming.json
@@ -289,6 +289,8 @@
   "Issues": "Issues",
   "Multistream Error": "Multistream Error",
   "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.": "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.",
+  "A new Highlight has been saved. Click to edit in the Highlighter": "A new Highlight has been saved. Click to edit in the Highlighter",
+  "An unknown %{type} error occurred.": "An unknown %{type} error occurred.",
   "Failed Checks": "Failed Checks",
   "Video Transmission": "Video Transmission",
   "Optimized Settings": "Optimized Settings",
diff --git a/app/services/api/external-api/streaming/streaming.ts b/app/services/api/external-api/streaming/streaming.ts
index b1d8623d67f8..42d2c33ee163 100644
--- a/app/services/api/external-api/streaming/streaming.ts
+++ b/app/services/api/external-api/streaming/streaming.ts
@@ -23,6 +23,7 @@ enum ERecordingState {
   Starting = 'starting',
   Recording = 'recording',
   Stopping = 'stopping',
+  Start = 'start',
   Wrote = 'wrote',
 }
 
@@ -34,6 +35,7 @@ enum EReplayBufferState {
   Stopping = 'stopping',
   Offline = 'offline',
   Saving = 'saving',
+  Wrote = 'wrote',
 }
 
 /**
@@ -42,9 +44,13 @@ enum EReplayBufferState {
  */
 interface IStreamingState {
   streamingStatus: EStreamingState;
+  verticalStreamingStatus: EStreamingState;
   streamingStatusTime: string;
+  verticalStreamingStatusTime: string;
   recordingStatus: ERecordingState;
+  verticalRecordingStatus: ERecordingState;
   recordingStatusTime: string;
+  verticalRecordingStatusTime: string;
   replayBufferStatus: EReplayBufferState;
   replayBufferStatusTime: string;
   streamErrorCreated?: string;
diff --git a/app/services/app/app.ts b/app/services/app/app.ts
index 58a0fff6cd2f..b4c40d678e5e 100644
--- a/app/services/app/app.ts
+++ b/app/services/app/app.ts
@@ -44,6 +44,7 @@ import { DualOutputService } from 'services/dual-output';
 import { OS, getOS } from 'util/operating-systems';
 import * as remote from '@electron/remote';
 import { RealmService } from 'services/realm';
+import { StreamingService } from 'services/streaming';
 
 interface IAppState {
   loading: boolean;
@@ -96,6 +97,7 @@ export class AppService extends StatefulService<IAppState> {
   @Inject() private videoSettingsService: VideoSettingsService;
   @Inject() private dualOutputService: DualOutputService;
   @Inject() private realmService: RealmService;
+  @Inject() private streamingService: StreamingService;
 
   static initialState: IAppState = {
     loading: true,
@@ -192,6 +194,7 @@ export class AppService extends StatefulService<IAppState> {
       this.shutdownStarted.next();
       this.keyListenerService.shutdown();
       this.platformAppsService.unloadAllApps();
+      this.streamingService.shutdown();
       await this.usageStatisticsService.flushEvents();
       this.windowsService.shutdown();
       this.ipcServerService.stopListening();
diff --git a/app/services/highlighter/index.ts b/app/services/highlighter/index.ts
index d46602db71b8..8cb7be96b8be 100644
--- a/app/services/highlighter/index.ts
+++ b/app/services/highlighter/index.ts
@@ -353,6 +353,18 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     }
 
     this.handleStreamingChanges();
+
+    if (!this.userService.isLoggedIn) return;
+
+    this.streamingService.replayBufferFileWrite.subscribe(async clipPath => {
+      const message = $t('A new Highlight has been saved. Click to edit in the Highlighter');
+
+      this.notificationsService.push({
+        type: ENotificationType.SUCCESS,
+        message,
+        action: this.jsonrpcService.createRequest(Service.getResourceId(this), 'showHighlighter'),
+      });
+    });
   }
 
   private handleStreamingChanges() {
@@ -1544,6 +1556,10 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     return id;
   }
 
+  showHighlighter() {
+    this.navigationService.navigate('Highlighter');
+  }
+
   /**
    * Utility function that returns a promise that resolves after a specified delay
    * @param ms Delay in milliseconds
diff --git a/app/services/platform-apps/api/modules/replay.ts b/app/services/platform-apps/api/modules/replay.ts
index 1d8b58ab3e90..21ed83f8af31 100644
--- a/app/services/platform-apps/api/modules/replay.ts
+++ b/app/services/platform-apps/api/modules/replay.ts
@@ -107,8 +107,8 @@ export class ReplayModule extends Module {
 
   private serializeState(): IReplayBufferState {
     return {
-      status: this.streamingService.state.replayBufferStatus,
-      statusTime: this.streamingService.state.replayBufferStatusTime,
+      status: this.streamingService.state.status.horizontal.replayBuffer,
+      statusTime: this.streamingService.state.status.horizontal.replayBufferTime,
     };
   }
 }
diff --git a/app/services/recording-mode.ts b/app/services/recording-mode.ts
index fc605b727dc8..e687521dde55 100644
--- a/app/services/recording-mode.ts
+++ b/app/services/recording-mode.ts
@@ -8,7 +8,7 @@ import { ELayout, ELayoutElement, LayoutService } from './layout';
 import { ScenesService } from './scenes';
 import { EObsSimpleEncoder, SettingsService } from './settings';
 import { AnchorPoint, ScalableRectangle } from 'util/ScalableRectangle';
-import { VideoSettingsService } from './settings-v2/video';
+import { TDisplayType, VideoSettingsService } from './settings-v2/video';
 import { ENotificationType, NotificationsService } from 'services/notifications';
 import { DefaultHardwareService } from './hardware';
 import { RunInLoadingMode } from './app/app-decorators';
@@ -18,6 +18,7 @@ import { NavigationService, UsageStatisticsService, SharedStorageService } from
 import { getPlatformService } from 'services/platforms';
 import { IYoutubeUploadResponse } from 'services/platforms/youtube/uploader';
 import { YoutubeService } from 'services/platforms/youtube';
+import { capitalize } from 'lodash';
 
 export interface IRecordingEntry {
   timestamp: string;
@@ -180,12 +181,22 @@ export class RecordingModeService extends PersistentStatefulService<IRecordingMo
     }, 10 * 1000);
   }
 
-  addRecordingEntry(filename: string) {
+  /**
+   * Add entry to recording history and show notification
+   * @param filename - name of file to show in recording history
+   * @param showNotification - primarily used when recording in dual output mode to only show the notification once
+   */
+  addRecordingEntry(filename: string, display?: TDisplayType) {
     const timestamp = moment().format();
     this.ADD_RECORDING_ENTRY(timestamp, filename);
+
+    const message = display
+      ? $t(`A new ${capitalize(display)} Recording has been completed. Click for more info`)
+      : $t('A new Recording has been completed. Click for more info');
+
     this.notificationsService.actions.push({
       type: ENotificationType.SUCCESS,
-      message: $t('A new Recording has been completed. Click for more info'),
+      message,
       action: this.jsonrpcService.createRequest(
         Service.getResourceId(this),
         'showRecordingHistory',
diff --git a/app/services/settings/output/output-settings.ts b/app/services/settings/output/output-settings.ts
index 1b446463e78a..64df24096cd9 100644
--- a/app/services/settings/output/output-settings.ts
+++ b/app/services/settings/output/output-settings.ts
@@ -5,8 +5,17 @@ import { HighlighterService } from 'services/highlighter';
 import { Inject } from 'services/core/injector';
 import { Dictionary } from 'vuex';
 import { AudioService } from 'app-services';
-import { parse } from 'path';
-
+import {
+  ERecordingQuality,
+  ERecordingFormat,
+  ISimpleStreaming,
+  IAdvancedStreaming,
+} from 'obs-studio-node';
+
+export type IStreamingOutputSettings = Omit<
+  Partial<ISimpleStreaming | IAdvancedStreaming>,
+  'videoEncoder'
+>;
 /**
  * list of encoders for simple mode
  */
@@ -230,6 +239,429 @@ export class OutputSettingsService extends Service {
     };
   }
 
+  /**
+   * Get recording settings
+   * @remark Primarily used for setting up the recording output context,
+   * this function will automatically return either the simple or advanced
+   * settings based on the current mode.
+   * @returns settings for the recording
+   */
+  getStreamingSettings() {
+    const output = this.settingsService.state.Output.formData;
+
+    const mode: TOutputSettingsMode = this.settingsService.findSettingValue(
+      output,
+      'Untitled',
+      'Mode',
+    );
+
+    const convertedEncoderName:
+      | EObsSimpleEncoder.x264_lowcpu
+      | EObsAdvancedEncoder = this.convertEncoderToNewAPI(this.getSettings().streaming.encoder);
+
+    const videoEncoder: EObsAdvancedEncoder =
+      convertedEncoderName === EObsSimpleEncoder.x264_lowcpu
+        ? EObsAdvancedEncoder.obs_x264
+        : convertedEncoderName;
+
+    const enforceBitrateKey = mode === 'Advanced' ? 'ApplyServiceSettings' : 'EnforceBitrate';
+    const enforceServiceBitrate = this.settingsService.findSettingValue(
+      output,
+      'Streaming',
+      enforceBitrateKey,
+    );
+
+    const enableTwitchVOD = this.settingsService.findSettingValue(
+      output,
+      'Streaming',
+      'VodTrackEnabled',
+    );
+
+    const useAdvanced = this.settingsService.findSettingValue(output, 'Streaming', 'UseAdvanced');
+
+    const customEncSettings = this.settingsService.findSettingValue(
+      output,
+      'Streaming',
+      'x264Settings',
+    );
+
+    const rescaling = this.settingsService.findSettingValue(output, 'Recording', 'RecRescale');
+
+    if (mode === 'Advanced') {
+      const twitchTrack = 3; // 3 in the tests, 2 in the description
+
+      return {
+        videoEncoder,
+        enforceServiceBitrate,
+        enableTwitchVOD,
+        twitchTrack,
+        rescaling,
+      };
+    } else {
+      return {
+        videoEncoder,
+        enforceServiceBitrate,
+        enableTwitchVOD,
+        useAdvanced,
+        customEncSettings,
+      };
+    }
+  }
+
+  /**
+   * Get recording settings
+   * @remark Primarily used for setting up the recording output context,
+   * this function will automatically return either the simple or advanced
+   * settings based on the current mode.
+   * @returns settings for the recording
+   */
+  getRecordingSettings() {
+    const output = this.settingsService.state.Output.formData;
+    const advanced = this.settingsService.state.Advanced.formData;
+    const mode: TOutputSettingsMode = this.settingsService.findSettingValue(
+      output,
+      'Untitled',
+      'Mode',
+    );
+
+    const pathKey = mode === 'Advanced' ? 'RecFilePath' : 'FilePath';
+    const path: string = this.settingsService.findSettingValue(output, 'Recording', pathKey);
+
+    const format: ERecordingFormat = this.settingsService.findValidListValue(
+      output,
+      'Recording',
+      'RecFormat',
+    ) as ERecordingFormat;
+
+    const oldQualityName = this.settingsService.findSettingValue(output, 'Recording', 'RecQuality');
+    let quality: ERecordingQuality = ERecordingQuality.HigherQuality;
+    switch (oldQualityName) {
+      case 'Small':
+        quality = ERecordingQuality.HighQuality;
+        break;
+      case 'HQ':
+        quality = ERecordingQuality.HigherQuality;
+        break;
+      case 'Lossless':
+        quality = ERecordingQuality.Lossless;
+        break;
+      case 'Stream':
+        quality = ERecordingQuality.Stream;
+        break;
+    }
+
+    const convertedEncoderName:
+      | EObsSimpleEncoder.x264_lowcpu
+      | EObsAdvancedEncoder = this.convertEncoderToNewAPI(this.getSettings().recording.encoder);
+
+    const videoEncoder: EObsAdvancedEncoder =
+      convertedEncoderName === EObsSimpleEncoder.x264_lowcpu
+        ? EObsAdvancedEncoder.obs_x264
+        : convertedEncoderName;
+
+    const lowCPU: boolean = convertedEncoderName === EObsSimpleEncoder.x264_lowcpu;
+
+    const overwrite: boolean = this.settingsService.findSettingValue(
+      advanced,
+      'Recording',
+      'OverwriteIfExists',
+    );
+
+    const noSpace: boolean = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'FileNameWithoutSpace',
+    );
+
+    const prefix: string = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'RecRBPrefix',
+    );
+    const suffix: string = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'RecRBSuffix',
+    );
+    const duration: number = this.settingsService.findSettingValue(
+      output,
+      'Stream Delay',
+      'DelaySec',
+    );
+
+    if (mode === 'Advanced') {
+      const mixer = this.settingsService.findSettingValue(output, 'Recording', 'RecTracks');
+      const rescaling = this.settingsService.findSettingValue(output, 'Recording', 'RecRescale');
+      const useStreamEncoders =
+        this.settingsService.findSettingValue(output, 'Recording', 'RecEncoder') === 'none';
+
+      // advanced settings
+      return {
+        path,
+        format,
+        overwrite,
+        noSpace,
+        mixer,
+        rescaling,
+        useStreamEncoders,
+        videoEncoder,
+        prefix,
+        suffix,
+        duration,
+      };
+    } else {
+      // simple settings
+      return {
+        path,
+        format,
+        quality,
+        videoEncoder,
+        lowCPU,
+        overwrite,
+        noSpace,
+        prefix,
+        suffix,
+        duration,
+      };
+    }
+  }
+
+  getReplayBufferSettings() {
+    const output = this.settingsService.state.Output.formData;
+    const advanced = this.settingsService.state.Advanced.formData;
+
+    const mode: TOutputSettingsMode = this.settingsService.findSettingValue(
+      output,
+      'Untitled',
+      'Mode',
+    );
+
+    const pathKey = mode === 'Advanced' ? 'RecFilePath' : 'FilePath';
+    const path: string = this.settingsService.findSettingValue(output, 'Recording', pathKey);
+
+    const format: ERecordingFormat = this.settingsService.findValidListValue(
+      output,
+      'Recording',
+      'RecFormat',
+    ) as ERecordingFormat;
+
+    const oldQualityName = this.settingsService.findSettingValue(output, 'Recording', 'RecQuality');
+    let quality: ERecordingQuality = ERecordingQuality.HigherQuality;
+    switch (oldQualityName) {
+      case 'Small':
+        quality = ERecordingQuality.HighQuality;
+        break;
+      case 'HQ':
+        quality = ERecordingQuality.HigherQuality;
+        break;
+      case 'Lossless':
+        quality = ERecordingQuality.Lossless;
+        break;
+      case 'Stream':
+        quality = ERecordingQuality.Stream;
+        break;
+    }
+
+    const overwrite: boolean = this.settingsService.findSettingValue(
+      advanced,
+      'Recording',
+      'OverwriteIfExists',
+    );
+
+    const noSpace: boolean = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'FileNameWithoutSpace',
+    );
+
+    const prefix: string = this.settingsService.findSettingValue(
+      advanced,
+      'Replay Buffer',
+      'RecRBPrefix',
+    );
+
+    const suffix: string = this.settingsService.findSettingValue(
+      advanced,
+      'Replay Buffer',
+      'RecRBSuffix',
+    );
+
+    const duration: number = this.settingsService.findSettingValue(
+      output,
+      'Replay Buffer',
+      'RecRBTime',
+    );
+
+    const useStreamEncoders =
+      this.settingsService.findSettingValue(output, 'Recording', 'RecEncoder') === 'none';
+
+    if (mode === 'Advanced') {
+      const mixer = this.settingsService.findSettingValue(output, 'Recording', 'RecTracks');
+
+      // advanced settings
+      return {
+        path,
+        format,
+        overwrite,
+        noSpace,
+        mixer,
+        useStreamEncoders,
+        prefix,
+        suffix,
+        duration,
+      };
+    } else {
+      // simple settings
+      return {
+        path,
+        format,
+        overwrite,
+        noSpace,
+        prefix,
+        suffix,
+        duration,
+        useStreamEncoders,
+      };
+    }
+  }
+
+  getSimpleRecordingSettings() {
+    const output = this.settingsService.state.Output.formData;
+    const advanced = this.settingsService.state.Advanced.formData;
+
+    const path: string = this.settingsService.findSettingValue(output, 'Recording', 'FilePath');
+
+    const format: ERecordingFormat = this.settingsService.findValidListValue(
+      output,
+      'Recording',
+      'RecFormat',
+    ) as ERecordingFormat;
+
+    const oldQualityName = this.settingsService.findSettingValue(output, 'Recording', 'RecQuality');
+    let quality: ERecordingQuality = ERecordingQuality.HigherQuality;
+    switch (oldQualityName) {
+      case 'Small':
+        quality = ERecordingQuality.HighQuality;
+        break;
+      case 'HQ':
+        quality = ERecordingQuality.HigherQuality;
+        break;
+      case 'Lossless':
+        quality = ERecordingQuality.Lossless;
+        break;
+      case 'Stream':
+        quality = ERecordingQuality.Stream;
+        break;
+    }
+
+    const convertedEncoderName:
+      | EObsSimpleEncoder.x264_lowcpu
+      | EObsAdvancedEncoder = this.convertEncoderToNewAPI(this.getSettings().recording.encoder);
+
+    const encoder: EObsAdvancedEncoder =
+      convertedEncoderName === EObsSimpleEncoder.x264_lowcpu
+        ? EObsAdvancedEncoder.obs_x264
+        : convertedEncoderName;
+
+    const lowCPU: boolean = convertedEncoderName === EObsSimpleEncoder.x264_lowcpu;
+
+    const overwrite: boolean = this.settingsService.findSettingValue(
+      advanced,
+      'Recording',
+      'OverwriteIfExists',
+    );
+
+    const noSpace: boolean = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'FileNameWithoutSpace',
+    );
+
+    const prefix: string = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'RecRBPrefix',
+    );
+    const suffix: string = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'RecRBSuffix',
+    );
+    const duration: number = this.settingsService.findSettingValue(
+      output,
+      'Stream Delay',
+      'DelaySec',
+    );
+
+    return {
+      path,
+      format,
+      quality,
+      encoder,
+      lowCPU,
+      overwrite,
+      noSpace,
+      prefix,
+      suffix,
+      duration,
+    };
+  }
+
+  getAdvancedRecordingSettings() {
+    const output = this.settingsService.state.Output.formData;
+    const advanced = this.settingsService.state.Advanced.formData;
+
+    const path = this.settingsService.findSettingValue(output, 'Recording', 'RecFilePath');
+    const rescaling = this.settingsService.findSettingValue(output, 'Recording', 'RecRescale');
+    const mixer = this.settingsService.findSettingValue(output, 'Recording', 'RecTracks');
+    const prefix = this.settingsService.findSettingValue(output, 'Recording', 'RecRBPrefix');
+    const suffix = this.settingsService.findSettingValue(output, 'Recording', 'RecRBSuffix');
+    const duration = this.settingsService.findSettingValue(output, 'Stream Delay', 'DelaySec');
+    const useStreamEncoders =
+      this.settingsService.findSettingValue(output, 'Recording', 'RecEncoder') === 'none';
+
+    const convertedEncoderName:
+      | EObsSimpleEncoder.x264_lowcpu
+      | EObsAdvancedEncoder = this.convertEncoderToNewAPI(this.getSettings().recording.encoder);
+
+    const encoder: EObsAdvancedEncoder =
+      convertedEncoderName === EObsSimpleEncoder.x264_lowcpu
+        ? EObsAdvancedEncoder.obs_x264
+        : convertedEncoderName;
+
+    const format = this.settingsService.findValidListValue(
+      output,
+      'Recording',
+      'RecFormat',
+    ) as ERecordingFormat;
+
+    const overwrite = this.settingsService.findSettingValue(
+      advanced,
+      'Recording',
+      'OverwriteIfExists',
+    );
+
+    const noSpace = this.settingsService.findSettingValue(
+      output,
+      'Recording',
+      'RecFileNameWithoutSpace',
+    );
+
+    return {
+      path,
+      format,
+      encoder,
+      overwrite,
+      noSpace,
+      rescaling,
+      mixer,
+      prefix,
+      suffix,
+      duration,
+      useStreamEncoders,
+    };
+  }
+
   private getStreamingEncoderSettings(
     output: ISettingsSubCategory[],
     video: ISettingsSubCategory[],
@@ -484,4 +916,23 @@ export class OutputSettingsService extends Service {
       this.settingsService.setSettingValue('Output', 'Recbitrate', settingsPatch.bitrate);
     }
   }
+
+  convertEncoderToNewAPI(
+    encoder: EObsSimpleEncoder | string,
+  ): EObsSimpleEncoder.x264_lowcpu | EObsAdvancedEncoder {
+    switch (encoder) {
+      case EObsSimpleEncoder.x264:
+        return EObsAdvancedEncoder.obs_x264;
+      case EObsSimpleEncoder.nvenc:
+        return EObsAdvancedEncoder.ffmpeg_nvenc;
+      case EObsSimpleEncoder.amd:
+        return EObsAdvancedEncoder.amd_amf_h264;
+      case EObsSimpleEncoder.qsv:
+        return EObsAdvancedEncoder.obs_qsv11;
+      case EObsSimpleEncoder.jim_nvenc:
+        return EObsAdvancedEncoder.jim_nvenc;
+      case EObsSimpleEncoder.x264_lowcpu:
+        return EObsSimpleEncoder.x264_lowcpu;
+    }
+  }
 }
diff --git a/app/services/settings/settings.ts b/app/services/settings/settings.ts
index c584474cc094..aa5d471f0071 100644
--- a/app/services/settings/settings.ts
+++ b/app/services/settings/settings.ts
@@ -150,7 +150,7 @@ class SettingsViews extends ViewHandler<ISettingsServiceState> {
     const settingsValues: Partial<ISettingsValues> = {};
 
     for (const groupName in this.state) {
-      this.state[groupName].formData.forEach(subGroup => {
+      this.state[groupName].formData.forEach((subGroup: ISettingsSubCategory) => {
         subGroup.parameters.forEach(parameter => {
           (settingsValues as any)[groupName] =
             settingsValues[groupName as keyof ISettingsValues] || {};
@@ -260,6 +260,7 @@ export class SettingsService extends StatefulService<ISettingsServiceState> {
   private videoEncodingOptimizationService: VideoEncodingOptimizationService;
 
   audioRefreshed = new Subject();
+  settingsUpdated = new Subject<DeepPartial<ISettingsValues>>();
 
   get views() {
     return new SettingsViews(this.state);
@@ -620,6 +621,8 @@ export class SettingsService extends StatefulService<ISettingsServiceState> {
 
       this.setSettings(categoryName, formSubCategories);
     });
+
+    this.settingsUpdated.next(patch);
   }
 
   private setAudioSettings(settingsData: ISettingsSubCategory[]) {
diff --git a/app/services/streaming/stream-error.ts b/app/services/streaming/stream-error.ts
index 5c81a30afd17..1341d37f78a2 100644
--- a/app/services/streaming/stream-error.ts
+++ b/app/services/streaming/stream-error.ts
@@ -397,10 +397,11 @@ export function formatUnknownErrorMessage(
     } catch (error: unknown) {
       // if it's not JSON, it is the message itself
       // don't show blocked message to user
-      if (!info.split(' ').includes('blocked')) {
+      if (info.split(' ').includes('blocked')) {
+        messages.user.push(errorTypes['UNKNOWN_STREAMING_ERROR_WITH_MESSAGE'].message);
         messages.user.push(info);
       } else {
-        messages.user.push(errorTypes['UNKNOWN_STREAMING_ERROR_WITH_MESSAGE'].message);
+        messages.user.push(info);
       }
 
       // always add non-JSON info to diag report
@@ -414,7 +415,7 @@ export function formatUnknownErrorMessage(
         let error;
         let platform;
 
-        if (typeof info.error === 'string') {
+        if (typeof info.error === 'string' && info.error !== '') {
           /*
            * Try to parse error as JSON as originally done, however, if it's just a string
            * (such as in the case of invalid path and many other unknown -4 errors we've
diff --git a/app/services/streaming/streaming-api.ts b/app/services/streaming/streaming-api.ts
index 9baec256eb06..d11fcd98517a 100644
--- a/app/services/streaming/streaming-api.ts
+++ b/app/services/streaming/streaming-api.ts
@@ -26,6 +26,7 @@ export enum ERecordingState {
   Starting = 'starting',
   Recording = 'recording',
   Stopping = 'stopping',
+  Start = 'start',
   Wrote = 'wrote',
 }
 
@@ -34,6 +35,7 @@ export enum EReplayBufferState {
   Stopping = 'stopping',
   Offline = 'offline',
   Saving = 'saving',
+  Wrote = 'wrote',
 }
 
 export interface IStreamInfo {
@@ -95,11 +97,25 @@ export interface IPlatformFlags {
   video?: IVideo;
 }
 
+export interface IOutputStatus {
+  streaming: EStreamingState;
+  streamingTime: string;
+  recording: ERecordingState;
+  recordingTime: string;
+  replayBuffer: EReplayBufferState;
+  replayBufferTime: string;
+}
+
 export interface IStreamingServiceState {
+  status: { [display: string]: IOutputStatus };
   streamingStatus: EStreamingState;
+  verticalStreamingStatus: EStreamingState;
   streamingStatusTime: string;
+  verticalStreamingStatusTime: string;
   recordingStatus: ERecordingState;
+  verticalRecordingStatus: ERecordingState;
   recordingStatusTime: string;
+  verticalRecordingStatusTime: string;
   replayBufferStatus: EReplayBufferState;
   replayBufferStatusTime: string;
   selectiveRecording: boolean;
diff --git a/app/services/streaming/streaming-view.ts b/app/services/streaming/streaming-view.ts
index e363ae5459d3..04ace797f528 100644
--- a/app/services/streaming/streaming-view.ts
+++ b/app/services/streaming/streaming-view.ts
@@ -4,7 +4,6 @@ import {
   IStreamSettings,
   EStreamingState,
   ERecordingState,
-  EReplayBufferState,
 } from './streaming-api';
 import { StreamSettingsService, ICustomStreamDestination } from '../settings/streaming';
 import { UserService } from '../user';
@@ -545,11 +544,7 @@ export class StreamInfoView<T extends Object> extends ViewHandler<T> {
   }
 
   get isRecording() {
-    return this.streamingState.recordingStatus !== ERecordingState.Offline;
-  }
-
-  get isReplayBufferActive() {
-    return this.streamingState.replayBufferStatus !== EReplayBufferState.Offline;
+    return this.streamingState.status.horizontal.recording !== ERecordingState.Offline;
   }
 
   get isIdle(): boolean {
@@ -564,4 +559,8 @@ export class StreamInfoView<T extends Object> extends ViewHandler<T> {
   get selectiveRecording() {
     return this.streamingState.selectiveRecording;
   }
+
+  get replayBufferStatus() {
+    return this.streamingState.status.horizontal.replayBuffer;
+  }
 }
diff --git a/app/services/streaming/streaming.ts b/app/services/streaming/streaming.ts
index ab7355f2671d..3ae1e1da5628 100644
--- a/app/services/streaming/streaming.ts
+++ b/app/services/streaming/streaming.ts
@@ -1,10 +1,34 @@
 import Vue from 'vue';
 import { mutation, StatefulService } from 'services/core/stateful-service';
-import { EOutputCode, Global, NodeObs } from '../../../obs-api';
+import {
+  AdvancedRecordingFactory,
+  AudioEncoderFactory,
+  AudioTrackFactory,
+  EOutputCode,
+  Global,
+  IAdvancedRecording,
+  ISimpleRecording,
+  NodeObs,
+  SimpleRecordingFactory,
+  VideoEncoderFactory,
+  EOutputSignal,
+  SimpleReplayBufferFactory,
+  ISimpleReplayBuffer,
+  AdvancedReplayBufferFactory,
+  IAdvancedReplayBuffer,
+  ISimpleStreaming,
+  IAdvancedStreaming,
+  AdvancedStreamingFactory,
+  SimpleStreamingFactory,
+  ServiceFactory,
+  DelayFactory,
+  ReconnectFactory,
+  NetworkFactory,
+} from '../../../obs-api';
 import { Inject } from 'services/core/injector';
 import moment from 'moment';
 import padStart from 'lodash/padStart';
-import { IOutputSettings, OutputSettingsService } from 'services/settings';
+import { IOutputSettings, OutputSettingsService, SettingsService } from 'services/settings';
 import { WindowsService } from 'services/windows';
 import { Subject } from 'rxjs';
 import {
@@ -63,18 +87,42 @@ enum EOBSOutputType {
   ReplayBuffer = 'replay-buffer',
 }
 
+const outputType = (type: EOBSOutputType) =>
+  ({
+    [EOBSOutputType.Streaming]: $t('Streaming'),
+    [EOBSOutputType.Recording]: $t('Recording'),
+    [EOBSOutputType.ReplayBuffer]: $t('Replay Buffer'),
+  }[type]);
+
 enum EOBSOutputSignal {
   Starting = 'starting',
   Start = 'start',
   Stopping = 'stopping',
   Stop = 'stop',
+  Activate = 'activate',
   Deactivate = 'deactivate',
   Reconnect = 'reconnect',
   ReconnectSuccess = 'reconnect_success',
   Wrote = 'wrote',
+  Writing = 'writing',
   WriteError = 'writing_error',
 }
 
+enum EOutputSignalState {
+  Saving = 'saving',
+  Starting = 'starting',
+  Start = 'start',
+  Stopping = 'stopping',
+  Stop = 'stop',
+  Activate = 'activate',
+  Deactivate = 'deactivate',
+  Reconnect = 'reconnect',
+  ReconnectSuccess = 'reconnect_success',
+  Running = 'running',
+  Wrote = 'wrote',
+  Writing = 'writing',
+  WriteError = 'writing_error',
+}
 export interface IOBSOutputSignalInfo {
   type: EOBSOutputType;
   signal: EOBSOutputSignal;
@@ -83,6 +131,14 @@ export interface IOBSOutputSignalInfo {
   service: string; // 'default' | 'vertical'
 }
 
+type TOBSOutputType = 'streaming' | 'recording' | 'replayBuffer';
+
+interface IOutputContext {
+  streaming: ISimpleStreaming | IAdvancedStreaming;
+  recording: ISimpleRecording | IAdvancedRecording;
+  replayBuffer: ISimpleReplayBuffer | IAdvancedReplayBuffer;
+}
+
 export class StreamingService
   extends StatefulService<IStreamingServiceState>
   implements IStreamingServiceApi {
@@ -101,6 +157,7 @@ export class StreamingService
   @Inject() private markersService: MarkersService;
   @Inject() private dualOutputService: DualOutputService;
   @Inject() private youtubeService: YoutubeService;
+  @Inject() private settingsService: SettingsService;
 
   streamingStatusChange = new Subject<EStreamingState>();
   recordingStatusChange = new Subject<ERecordingState>();
@@ -113,17 +170,57 @@ export class StreamingService
 
   // Dummy subscription for stream deck
   streamingStateChange = new Subject<void>();
+  private recordingStopped = new Subject();
 
   powerSaveId: number;
 
   private resolveStartStreaming: Function = () => {};
   private rejectStartStreaming: Function = () => {};
 
+  private contexts: {
+    [name: string]: IOutputContext;
+    horizontal: IOutputContext;
+    vertical: IOutputContext;
+  } = {
+    horizontal: {
+      streaming: null,
+      recording: null,
+      replayBuffer: null,
+    },
+    vertical: {
+      streaming: null,
+      recording: null,
+      replayBuffer: null,
+    },
+  };
+
   static initialState: IStreamingServiceState = {
+    status: {
+      horizontal: {
+        streaming: EStreamingState.Offline,
+        streamingTime: new Date().toISOString(),
+        recording: ERecordingState.Offline,
+        recordingTime: new Date().toISOString(),
+        replayBuffer: EReplayBufferState.Offline,
+        replayBufferTime: new Date().toISOString(),
+      },
+      vertical: {
+        streaming: EStreamingState.Offline,
+        streamingTime: new Date().toISOString(),
+        recording: ERecordingState.Offline,
+        recordingTime: new Date().toISOString(),
+        replayBuffer: EReplayBufferState.Offline,
+        replayBufferTime: new Date().toISOString(),
+      },
+    },
     streamingStatus: EStreamingState.Offline,
+    verticalStreamingStatus: EStreamingState.Offline,
     streamingStatusTime: new Date().toISOString(),
+    verticalStreamingStatusTime: new Date().toISOString(),
     recordingStatus: ERecordingState.Offline,
+    verticalRecordingStatus: ERecordingState.Offline,
     recordingStatusTime: new Date().toISOString(),
+    verticalRecordingStatusTime: new Date().toString(),
     replayBufferStatus: EReplayBufferState.Offline,
     replayBufferStatusTime: new Date().toISOString(),
     selectiveRecording: false,
@@ -177,6 +274,14 @@ export class StreamingService
         deep: true,
       },
     );
+
+    this.settingsService.settingsUpdated.subscribe(patch => {
+      // TODO: write a more versatile handler for settings updates
+      // For now, only handle updating the replay buffer duration
+      if (patch.Output?.RecRBTime && this.contexts.horizontal.replayBuffer) {
+        this.contexts.horizontal.replayBuffer.duration = patch.Output.RecRBTime;
+      }
+    });
   }
 
   get views() {
@@ -212,12 +317,12 @@ export class StreamingService
         } catch (e: unknown) {
           // cast all PLATFORM_REQUEST_FAILED errors to PREPOPULATE_FAILED
           if (e instanceof StreamError) {
-            const type =
+            e.type =
               (e.type as TStreamErrorType) === 'PLATFORM_REQUEST_FAILED'
                 ? 'PREPOPULATE_FAILED'
                 : e.type || 'UNKNOWN_ERROR';
-            const error = this.handleTypedStreamError(e, type, `Failed to prepopulate ${platform}`);
-            this.setError(error, platform);
+
+            this.setError(e, platform);
           } else {
             this.setError('PREPOPULATE_FAILED', platform);
           }
@@ -570,7 +675,6 @@ export class StreamingService
           ? 'SETTINGS_UPDATE_FAILED'
           : e.type || 'UNKNOWN_ERROR';
       this.setError(e, platform);
-      console.log('handleSetupPlatformError e', e);
     } else {
       this.setError('SETTINGS_UPDATE_FAILED', platform);
     }
@@ -840,11 +944,11 @@ export class StreamingService
   }
 
   get isRecording() {
-    return this.state.recordingStatus !== ERecordingState.Offline;
+    return this.state.status.horizontal.recording !== ERecordingState.Offline;
   }
 
   get isReplayBufferActive() {
-    return this.state.replayBufferStatus !== EReplayBufferState.Offline;
+    return this.state.status.horizontal.replayBuffer !== EReplayBufferState.Offline;
   }
 
   get isIdle(): boolean {
@@ -911,10 +1015,11 @@ export class StreamingService
 
     this.powerSaveId = remote.powerSaveBlocker.start('prevent-display-sleep');
 
-    // start streaming
+    // handle start streaming and recording
     if (this.views.isDualOutputMode) {
       // start dual output
 
+      // stream horizontal and stream vertical
       const horizontalContext = this.videoSettingsService.contexts.horizontal;
       const verticalContext = this.videoSettingsService.contexts.vertical;
 
@@ -926,10 +1031,21 @@ export class StreamingService
           if (signalInfo.code !== 0) {
             NodeObs.OBS_service_stopStreaming(true, 'horizontal');
             NodeObs.OBS_service_stopStreaming(true, 'vertical');
+            // Refactor when move streaming to new API
+            if (this.state.status.vertical.streaming !== EStreamingState.Offline) {
+              this.SET_STREAMING_STATUS(EStreamingState.Offline, 'vertical');
+            }
           }
 
           if (signalInfo.signal === EOBSOutputSignal.Start) {
             NodeObs.OBS_service_startStreaming('vertical');
+
+            // Refactor when move streaming to new API
+            const time = new Date().toISOString();
+            if (this.state.status.vertical.streaming === EStreamingState.Offline) {
+              this.SET_STREAMING_STATUS(EStreamingState.Live, 'vertical', time);
+            }
+
             signalChanged.unsubscribe();
           }
         }
@@ -944,12 +1060,16 @@ export class StreamingService
       NodeObs.OBS_service_setVideoInfo(horizontalContext, 'horizontal');
 
       NodeObs.OBS_service_startStreaming();
-    }
 
-    const recordWhenStreaming = this.streamSettingsService.settings.recordWhenStreaming;
+      const recordWhenStreaming = this.streamSettingsService.settings.recordWhenStreaming;
 
-    if (recordWhenStreaming && this.state.recordingStatus === ERecordingState.Offline) {
-      this.toggleRecording();
+      if (
+        recordWhenStreaming &&
+        this.state.status.horizontal.recording === ERecordingState.Offline &&
+        this.state.status.vertical.recording === ERecordingState.Offline
+      ) {
+        await this.toggleRecording();
+      }
     }
 
     const replayWhenStreaming = this.streamSettingsService.settings.replayBufferWhileStreaming;
@@ -958,7 +1078,8 @@ export class StreamingService
     if (
       replayWhenStreaming &&
       isReplayBufferEnabled &&
-      this.state.replayBufferStatus === EReplayBufferState.Offline
+      this.state.status.horizontal.replayBuffer === EReplayBufferState.Offline &&
+      this.state.status.vertical.replayBuffer === EReplayBufferState.Offline
     ) {
       this.startReplayBuffer();
     }
@@ -1038,6 +1159,10 @@ export class StreamingService
               signalInfo.signal === EOBSOutputSignal.Deactivate
             ) {
               NodeObs.OBS_service_stopStreaming(false, 'vertical');
+              // Refactor when move streaming to new API
+              if (this.state.status.vertical.streaming !== EStreamingState.Offline) {
+                this.SET_STREAMING_STATUS(EStreamingState.Offline, 'vertical');
+              }
               signalChanged.unsubscribe();
             }
           },
@@ -1051,12 +1176,18 @@ export class StreamingService
       }
 
       const keepRecording = this.streamSettingsService.settings.keepRecordingWhenStreamStops;
-      if (!keepRecording && this.state.recordingStatus === ERecordingState.Recording) {
-        this.toggleRecording();
+      const isRecording =
+        this.state.status.horizontal.recording === ERecordingState.Recording ||
+        this.state.status.vertical.recording === ERecordingState.Recording;
+      if (!keepRecording && isRecording) {
+        await this.toggleRecording();
       }
 
       const keepReplaying = this.streamSettingsService.settings.keepReplayBufferStreamStops;
-      if (!keepReplaying && this.state.replayBufferStatus === EReplayBufferState.Running) {
+      if (
+        !keepReplaying &&
+        this.state.status.horizontal.replayBuffer === EReplayBufferState.Running
+      ) {
         this.stopReplayBuffer();
       }
 
@@ -1070,8 +1201,15 @@ export class StreamingService
     }
 
     if (this.state.streamingStatus === EStreamingState.Ending) {
-      if (this.views.isDualOutputMode) {
+      if (
+        this.views.isDualOutputMode &&
+        this.state.status.vertical.recording === ERecordingState.Offline
+      ) {
         NodeObs.OBS_service_stopStreaming(true, 'horizontal');
+        // Refactor when move streaming to new API
+        if (this.state.status.vertical.streaming !== EStreamingState.Offline) {
+          this.SET_STREAMING_STATUS(EStreamingState.Offline, 'vertical');
+        }
         NodeObs.OBS_service_stopStreaming(true, 'vertical');
       } else {
         NodeObs.OBS_service_stopStreaming(true);
@@ -1095,46 +1233,624 @@ export class StreamingService
   }
 
   toggleRecording() {
-    if (this.state.recordingStatus === ERecordingState.Recording) {
-      NodeObs.OBS_service_stopRecording();
+    /**
+     * START SINGLE OUTPUT RECORDING
+     * Note: Comment out the below and comment in the dual output recording code block to enable dual output recording
+     */
+    if (
+      this.state.status.horizontal.recording === ERecordingState.Recording &&
+      this.contexts.horizontal.recording !== null
+    ) {
+      // stop recording horizontal display
+      // change the recording status for the loading animation
+      this.SET_RECORDING_STATUS(ERecordingState.Stopping, 'horizontal', new Date().toISOString());
+      this.contexts.horizontal.recording.stop(true);
       return;
+    } else if (this.state.status.horizontal.recording === ERecordingState.Offline) {
+      this.validateOrCreateOutputInstance('horizontal', 'recording', 1, true);
+    } else {
+      throwStreamError(
+        'UNKNOWN_STREAMING_ERROR_WITH_MESSAGE',
+        {},
+        'Unable to create replay buffer instance',
+      );
+    }
+
+    /**
+     * END SINGLE OUTPUT RECORDING
+     */
+
+    /**
+     * START DUAL OUTPUT RECORDING BELOW
+     * Note: Comment in the below and comment out the single output recording code block to enable dual output recording
+     */
+
+    // stop recording
+    // if (
+    //   this.state.status.horizontal.recording === ERecordingState.Recording &&
+    //   this.state.status.vertical.recording === ERecordingState.Recording
+    // ) {
+    //   // stop recording both displays
+    //   let time = new Date().toISOString();
+
+    //   if (this.contexts.vertical.recording !== null) {
+    //     const recordingStopped = this.recordingStopped.subscribe(async () => {
+    //       await new Promise(resolve =>
+    //         // sleep for 2 seconds to allow a different time stamp to be generated
+    //         // because the recording history uses the time stamp as keys
+    //         // if the same time stamp is used, the entry will be replaced in the recording history
+    //         setTimeout(() => {
+    //           time = new Date().toISOString();
+    //           this.SET_RECORDING_STATUS(ERecordingState.Stopping, 'horizontal', time);
+    //           if (this.contexts.horizontal.recording !== null) {
+    //             this.contexts.horizontal.recording.stop();
+    //           }
+    //         }, 2000),
+    //       );
+    //       recordingStopped.unsubscribe();
+    //     });
+
+    //     this.SET_RECORDING_STATUS(ERecordingState.Stopping, 'vertical', time);
+    //     this.contexts.vertical.recording.stop();
+    //     this.recordingStopped.next();
+    //   }
+
+    //   return;
+    // } else if (
+    //   this.state.status.vertical.recording === ERecordingState.Recording &&
+    //   this.contexts.vertical.recording !== null
+    // ) {
+    //   // stop recording vertical display
+    //   // change the recording status for the loading animation
+    //   this.SET_RECORDING_STATUS(ERecordingState.Stopping, 'vertical', new Date().toISOString());
+
+    //   this.contexts.vertical.recording.stop(true);
+    //   return;
+    // } else if (
+    //   this.state.status.horizontal.recording === ERecordingState.Recording &&
+    //   this.contexts.horizontal.recording !== null
+    // ) {
+    //   // stop recording horizontal display
+    //   // change the recording status for the loading animation
+    //   this.SET_RECORDING_STATUS(ERecordingState.Stopping, 'horizontal', new Date().toISOString());
+    //   this.contexts.horizontal.recording.stop(true);
+    //   return;
+    // }
+
+    // // start recording
+    // if (
+    //   this.state.status.horizontal.recording === ERecordingState.Offline &&
+    //   this.state.status.vertical.recording === ERecordingState.Offline
+    // ) {
+    //   if (this.views.isDualOutputMode) {
+    //     if (this.state.streamingStatus !== EStreamingState.Offline) {
+    //       // In dual output mode, if the streaming status is starting then this call to toggle recording came from the function to toggle streaming.
+    //       // In this case, only stream the horizontal display (don't record the horizontal display) and record the vertical display.
+    //       this.validateOrCreateOutputInstance('vertical', 'recording', 2, true);
+    //     } else {
+    //       // Otherwise, record both displays in dual output mode
+    //       this.validateOrCreateOutputInstance('vertical', 'recording', 2, true);
+    //       this.validateOrCreateOutputInstance('horizontal', 'recording', 1, true);
+    //     }
+    //   } else {
+    //     // In single output mode, recording only the horizontal display
+    //     this.validateOrCreateOutputInstance('horizontal', 'recording', 1, true);
+    //   }
+    // }
+
+    /**
+     * END DUAL OUTPUT RECORDING
+     */
+  }
+
+  /**
+   * Create a recording instance for the given display
+   * @param display - The display to create the recording for
+   * @param index - The index of the audio track
+   */
+  private async createRecording(display: TDisplayType, index: number, start?: boolean) {
+    const mode = this.outputSettingsService.getSettings().mode;
+    const settings = this.outputSettingsService.getRecordingSettings();
+
+    // recordings must have a streaming instance
+    await this.validateOrCreateOutputInstance(display, 'streaming', index);
+
+    // handle unique properties (including audio)
+    if (mode === 'Advanced') {
+      const recording = AdvancedRecordingFactory.create() as IAdvancedRecording;
+
+      Object.keys(settings).forEach(key => {
+        if ((settings as any)[key] === undefined) return;
+
+        // share the video encoder with the streaming instance if it exists
+        if (key === 'videoEncoder') {
+          recording.videoEncoder = VideoEncoderFactory.create(
+            settings.videoEncoder,
+            'video-encoder',
+          );
+        } else {
+          (recording as any)[key] = (settings as any)[key];
+        }
+      });
+
+      // output resolutions
+      const resolution = this.videoSettingsService.outputResolutions[display];
+      recording.outputWidth = resolution.outputWidth;
+      recording.outputHeight = resolution.outputHeight;
+
+      // audio track
+      this.createAudioTrack(index);
+
+      recording.streaming = this.contexts[display].streaming as IAdvancedStreaming;
+      this.contexts[display].recording = recording as IAdvancedRecording;
+    } else {
+      const recording = SimpleRecordingFactory.create() as ISimpleRecording;
+      Object.keys(settings).forEach(key => {
+        if ((settings as any)[key] === undefined) return;
+
+        // share the video encoder with the streaming instance if it exists
+        if (key === 'videoEncoder') {
+          recording.videoEncoder = VideoEncoderFactory.create(
+            settings.videoEncoder,
+            'video-encoder',
+          );
+        } else {
+          (recording as any)[key] = (settings as any)[key];
+        }
+      });
+
+      recording.streaming = this.contexts[display].streaming as ISimpleStreaming;
+      recording.audioEncoder = AudioEncoderFactory.create();
+      this.contexts[display].recording = recording as ISimpleRecording;
     }
 
-    if (this.state.recordingStatus === ERecordingState.Offline) {
-      NodeObs.OBS_service_startRecording();
+    // assign context
+    this.contexts[display].recording.video = this.videoSettingsService.contexts[display];
+
+    // set signal handler
+    this.contexts[display].recording.signalHandler = async (signal: EOutputSignal) => {
+      await this.handleSignal(signal, display);
+    };
+
+    if (start) {
+      this.contexts[display].recording.start();
+    }
+
+    return Promise.resolve(this.contexts[display].recording);
+  }
+
+  /**
+   * Create a streaming instance for the given display
+   * @param display - The display to create the streaming for
+   * @param index - The index of the audio track
+   */
+  private async createStreaming(display: TDisplayType, index: number, start?: boolean) {
+    const mode = this.outputSettingsService.getSettings().mode;
+
+    const settings = this.outputSettingsService.getStreamingSettings();
+
+    const stream =
+      mode === 'Advanced'
+        ? (AdvancedStreamingFactory.create() as IAdvancedStreaming)
+        : (SimpleStreamingFactory.create() as ISimpleStreaming);
+
+    // assign settings
+    Object.keys(settings).forEach((key: keyof Partial<ISimpleStreaming>) => {
+      if ((settings as any)[key] === undefined) return;
+
+      // share the video encoder with the recording instance if it exists
+      if (key === 'videoEncoder') {
+        stream.videoEncoder = VideoEncoderFactory.create(settings.videoEncoder, 'video-encoder');
+      } else {
+        (stream as any)[key] = (settings as any)[key];
+      }
+    });
+
+    if (this.isAdvancedStreaming(stream)) {
+      const resolution = this.videoSettingsService.outputResolutions[display];
+      stream.outputWidth = resolution.outputWidth;
+      stream.outputHeight = resolution.outputHeight;
+      // stream audio track
+      this.createAudioTrack(index);
+      stream.audioTrack = index;
+      // Twitch VOD audio track
+      if (stream.enableTwitchVOD && stream.twitchTrack) {
+        this.createAudioTrack(stream.twitchTrack);
+      } else if (stream.enableTwitchVOD) {
+        // do not use the same audio track for the VOD as the stream
+        stream.twitchTrack = index + 1;
+        this.createAudioTrack(stream.twitchTrack);
+      }
+
+      this.contexts[display].streaming = stream as IAdvancedStreaming;
+    } else if (this.isSimpleStreaming(stream)) {
+      stream.audioEncoder = AudioEncoderFactory.create();
+      this.contexts[display].streaming = stream as ISimpleStreaming;
+    } else {
+      throwStreamError(
+        'UNKNOWN_STREAMING_ERROR_WITH_MESSAGE',
+        {},
+        'Unable to create streaming instance',
+      );
+    }
+
+    this.contexts[display].streaming.video = this.videoSettingsService.contexts[display];
+    this.contexts[display].streaming.signalHandler = async signal => {
+      await this.handleSignal(signal, display);
+    };
+
+    this.contexts[display].streaming.service = ServiceFactory.legacySettings;
+    this.contexts[display].streaming.delay = DelayFactory.create();
+    this.contexts[display].streaming.reconnect = ReconnectFactory.create();
+    this.contexts[display].streaming.network = NetworkFactory.create();
+
+    if (start) {
+      this.contexts[display].streaming.start();
+    }
+
+    return Promise.resolve(this.contexts[display].streaming);
+  }
+
+  /**
+   * Signal handler for the Factory API for streaming, recording, and replay buffer
+   * @param info - The signal info
+   * @param display - The context to handle the signal for
+   */
+  private async handleSignal(info: EOutputSignal, display: TDisplayType) {
+    if (info.code !== EOutputCode.Success) {
+      // handle errors before attempting anything else
+      console.error('Output Signal Error:', info);
+
+      if (!info.error || info.error === '') {
+        info.error = $t('An unknown %{type} error occurred.', {
+          type: outputType(info.type as EOBSOutputType),
+        });
+      }
+
+      this.handleFactoryOutputError(info, display);
+    } else if (info.type === EOBSOutputType.Streaming) {
+      this.handleStreamingSignal(info, display);
+    } else if (info.type === EOBSOutputType.Recording) {
+      await this.handleRecordingSignal(info, display);
+    } else if (info.type === EOBSOutputType.ReplayBuffer) {
+      await this.handleReplayBufferSignal(info, display);
+    } else {
+      console.debug('Unknown Output Signal or Error:', info);
+    }
+  }
+
+  private handleStreamingSignal(info: EOutputSignal, display: TDisplayType) {
+    // map signals to status
+
+    // const nextState: EStreamingState = ({
+    //   [EOBSOutputSignal.Start]: EStreamingState.Starting,
+    //   [EOBSOutputSignal.Stop]: EStreamingState.Offline,
+    //   [EOBSOutputSignal.Stopping]: EStreamingState.Ending,
+    //   [EOBSOutputSignal.Deactivate]: EStreamingState.Offline,
+    // } as Dictionary<EStreamingState>)[info.signal];
+
+    // EOBSOutputSignal.Starting;
+    // EOBSOutputSignal.Activate;
+    // EOBSOutputSignal.Start;
+    // EOBSOutputSignal.Stopping;
+    // EOBSOutputSignal.Stop;
+
+    this.handleFactoryOutputError(info, display);
+  }
+
+  private async handleRecordingSignal(info: EOutputSignal, display: TDisplayType) {
+    // map signals to status
+    const nextState: ERecordingState = ({
+      [EOutputSignalState.Start]: ERecordingState.Recording,
+      [EOutputSignalState.Stop]: ERecordingState.Offline,
+      [EOutputSignalState.Stopping]: ERecordingState.Stopping,
+      [EOutputSignalState.Wrote]: ERecordingState.Offline,
+    } as Dictionary<ERecordingState>)[info.signal];
+
+    // We received a signal we didn't recognize
+    if (!nextState) return;
+
+    if (info.signal === EOBSOutputSignal.Start) {
+      this.usageStatisticsService.recordFeatureUsage('Recording');
+      this.usageStatisticsService.recordAnalyticsEvent('RecordingStatus', {
+        status: nextState,
+        code: info.code,
+      });
+    }
+
+    if (nextState === ERecordingState.Recording) {
+      const mode = this.views.isDualOutputMode ? 'dual' : 'single';
+      this.usageStatisticsService.recordFeatureUsage('Recording');
+      this.usageStatisticsService.recordAnalyticsEvent('RecordingStatus', {
+        status: ERecordingState.Recording,
+        code: info.code,
+        mode,
+        display,
+      });
+    }
+
+    if (info.signal === EOutputSignalState.Wrote) {
+      const fileName = this.contexts[display].recording.lastFile();
+
+      const parsedName = byOS({
+        [OS.Mac]: fileName,
+        [OS.Windows]: fileName.replace(/\//, '\\'),
+      });
+
+      // In dual output mode, each confirmation should be labelled for each display
+      if (this.views.isDualOutputMode) {
+        this.recordingModeService.addRecordingEntry(parsedName, display);
+      } else {
+        this.recordingModeService.addRecordingEntry(parsedName);
+      }
+      await this.markersService.exportCsv(parsedName);
+
+      // Only destroy instances if all outputs are offline
+      const offline =
+        this.state.status[display].replayBuffer === EReplayBufferState.Offline &&
+        this.state.status[display].streaming === EStreamingState.Offline;
+
+      if (offline) {
+        await this.destroyOutputContextIfExists(display, 'replayBuffer');
+        await this.destroyOutputContextIfExists(display, 'recording');
+        await this.destroyOutputContextIfExists(display, 'streaming');
+      }
+
+      this.latestRecordingPath.next(fileName);
+    }
+
+    const time = new Date().toISOString();
+    this.SET_RECORDING_STATUS(nextState, display, time);
+    this.recordingStatusChange.next(nextState);
+  }
+
+  private async handleReplayBufferSignal(info: EOutputSignal, display: TDisplayType) {
+    // map signals to status
+    const nextState: EReplayBufferState = ({
+      [EOBSOutputSignal.Start]: EReplayBufferState.Running,
+      [EOBSOutputSignal.Writing]: EReplayBufferState.Saving,
+      [EOBSOutputSignal.Wrote]: EReplayBufferState.Running,
+      [EOBSOutputSignal.Stopping]: EReplayBufferState.Stopping,
+      [EOBSOutputSignal.Stop]: EReplayBufferState.Offline,
+    } as Dictionary<EReplayBufferState>)[info.signal];
+
+    // We received a signal we didn't recognize
+    if (!nextState) {
+      this.SET_REPLAY_BUFFER_STATUS(EReplayBufferState.Offline, display);
       return;
     }
+
+    if (info.signal === EOBSOutputSignal.Wrote) {
+      this.usageStatisticsService.recordAnalyticsEvent('ReplayBufferStatus', {
+        status: 'wrote',
+        code: info.code,
+      });
+
+      this.replayBufferFileWrite.next(this.contexts[display].replayBuffer.lastFile());
+    }
+
+    if (info.signal === EOBSOutputSignal.Stop) {
+      this.usageStatisticsService.recordAnalyticsEvent('ReplayBufferStatus', {
+        status: 'stop',
+        code: info.code,
+      });
+
+      const offline =
+        this.state.status[display].recording === ERecordingState.Offline &&
+        this.state.status[display].streaming === EStreamingState.Offline;
+
+      if (offline) {
+        await this.destroyOutputContextIfExists(display, 'replayBuffer');
+        await this.destroyOutputContextIfExists(display, 'recording');
+        await this.destroyOutputContextIfExists(display, 'streaming');
+      }
+    }
+
+    const time = new Date().toISOString();
+    this.SET_REPLAY_BUFFER_STATUS(nextState, display, time);
+    this.replayBufferStatusChange.next(nextState);
   }
 
-  splitFile() {
-    if (this.state.recordingStatus === ERecordingState.Recording) {
-      NodeObs.OBS_service_splitFile();
+  splitFile(display: TDisplayType = 'horizontal') {
+    if (
+      this.state.status[display].recording === ERecordingState.Recording &&
+      this.contexts[display].recording
+    ) {
+      this.contexts[display].recording.splitFile();
     }
   }
 
-  startReplayBuffer() {
-    if (this.state.replayBufferStatus !== EReplayBufferState.Offline) return;
+  startReplayBuffer(display: TDisplayType = 'horizontal'): void {
+    if (this.state.status[display].replayBuffer !== EReplayBufferState.Offline) return;
+    // change the replay buffer status for the loading animation
+    this.SET_REPLAY_BUFFER_STATUS(EReplayBufferState.Running, display);
 
+    Promise.resolve(this.createReplayBuffer(display));
+  }
+
+  /**
+   * Create Replay Buffer
+   * @remark Create a replay buffer instance for the given display using the Factory API.
+   * Currently there are no cases where a replay buffer is not started immediately after creation.
+   * @param display - The display to create the replay buffer for
+   */
+  private async createReplayBuffer(display: TDisplayType = 'horizontal') {
+    const mode = this.outputSettingsService.getSettings().mode;
+
+    // A replay buffer requires a recording instance and a streaming instance
+    await this.validateOrCreateOutputInstance(display, 'recording', 1);
+    await this.validateOrCreateOutputInstance(display, 'streaming', 1);
+
+    const settings = this.outputSettingsService.getReplayBufferSettings();
+    const replayBuffer =
+      mode === 'Advanced'
+        ? (AdvancedReplayBufferFactory.create() as IAdvancedReplayBuffer)
+        : (SimpleReplayBufferFactory.create() as ISimpleReplayBuffer);
+
+    // assign settings
+    Object.keys(settings).forEach(key => {
+      if ((settings as any)[key] === undefined) return;
+      (replayBuffer as any)[key] = (settings as any)[key];
+    });
+
+    if (this.isAdvancedReplayBuffer(replayBuffer)) {
+      replayBuffer.recording = this.contexts[display].recording as IAdvancedRecording;
+      replayBuffer.streaming = this.contexts[display].streaming as IAdvancedStreaming;
+
+      this.contexts[display].replayBuffer = replayBuffer as IAdvancedReplayBuffer;
+    } else if (this.isSimpleReplayBuffer(replayBuffer)) {
+      replayBuffer.recording = this.contexts[display].recording as ISimpleRecording;
+      replayBuffer.streaming = this.contexts[display].streaming as ISimpleStreaming;
+
+      this.contexts[display].replayBuffer = replayBuffer as ISimpleReplayBuffer;
+    } else {
+      throwStreamError(
+        'UNKNOWN_STREAMING_ERROR_WITH_MESSAGE',
+        {},
+        'Unable to create replay buffer instance',
+      );
+    }
+
+    this.contexts[display].replayBuffer.video = this.videoSettingsService.contexts[display];
+    this.contexts[display].replayBuffer.signalHandler = async (signal: EOutputSignal) => {
+      await this.handleSignal(signal, display);
+    };
+
+    this.contexts[display].replayBuffer.start();
     this.usageStatisticsService.recordFeatureUsage('ReplayBuffer');
-    NodeObs.OBS_service_startReplayBuffer();
   }
 
-  stopReplayBuffer() {
-    if (this.state.replayBufferStatus === EReplayBufferState.Running) {
-      NodeObs.OBS_service_stopReplayBuffer(false);
-    } else if (this.state.replayBufferStatus === EReplayBufferState.Stopping) {
-      NodeObs.OBS_service_stopReplayBuffer(true);
+  stopReplayBuffer(display: TDisplayType = 'horizontal') {
+    if (
+      !this.contexts[display].replayBuffer ||
+      this.state.status[display].replayBuffer === EReplayBufferState.Offline
+    ) {
+      return;
     }
+
+    const forceStop = this.state.status[display].replayBuffer === EReplayBufferState.Stopping;
+
+    this.contexts[display].replayBuffer.stop(forceStop);
+    // change the replay buffer status for the loading animation
+    this.SET_REPLAY_BUFFER_STATUS(EReplayBufferState.Stopping, display, new Date().toISOString());
   }
 
-  saveReplay() {
-    if (this.state.replayBufferStatus === EReplayBufferState.Running) {
-      this.SET_REPLAY_BUFFER_STATUS(EReplayBufferState.Saving);
-      this.replayBufferStatusChange.next(EReplayBufferState.Saving);
-      NodeObs.OBS_service_processReplayBufferHotkey();
+  saveReplay(display: TDisplayType = 'horizontal') {
+    if (!this.contexts[display].replayBuffer) return;
+    // change the replay buffer status for the loading animation
+    this.SET_REPLAY_BUFFER_STATUS(EReplayBufferState.Saving, display, new Date().toISOString());
+    this.contexts[display].replayBuffer.save();
+  }
+
+  private async validateOrCreateOutputInstance(
+    display: TDisplayType,
+    type: 'streaming' | 'recording',
+    index: number,
+    start?: boolean,
+  ) {
+    const mode = this.outputSettingsService.getSettings().mode;
+    const validOutput = this.validateOutputInstance(mode, display, type);
+
+    // If the instance matches the mode, return to validate it
+    if (validOutput && start) {
+      this.contexts[display][type]?.start();
+      return;
+    }
+    if (validOutput) return;
+
+    await this.destroyOutputContextIfExists(display, type);
+
+    if (type === 'streaming') {
+      await this.createStreaming(display, index, start);
+    } else {
+      await this.createRecording(display, index, start);
     }
   }
 
+  private validateOutputInstance(
+    mode: 'Simple' | 'Advanced',
+    display: TDisplayType,
+    type: 'streaming' | 'recording',
+  ) {
+    if (!this.contexts[display][type]) return false;
+
+    const isAdvancedOutput =
+      type === 'streaming'
+        ? this.isAdvancedStreaming(this.contexts[display][type])
+        : this.isAdvancedRecording(this.contexts[display][type]);
+
+    const isSimpleOutput =
+      type === 'streaming'
+        ? this.isSimpleStreaming(this.contexts[display][type])
+        : this.isSimpleRecording(this.contexts[display][type]);
+
+    return (mode === 'Advanced' && isAdvancedOutput) || (mode === 'Simple' && isSimpleOutput);
+  }
+
+  /**
+   * Create an audio track
+   * @param index - index of the audio track to create
+   */
+  createAudioTrack(index: number) {
+    const trackName = `track${index}`;
+    const track = AudioTrackFactory.create(160, trackName);
+    AudioTrackFactory.setAtIndex(track, index);
+  }
+
+  isAdvancedStreaming(
+    instance: ISimpleStreaming | IAdvancedStreaming | null,
+  ): instance is IAdvancedStreaming {
+    if (!instance) return false;
+    return 'rescaling' in instance;
+  }
+
+  isAdvancedRecording(
+    instance: ISimpleRecording | IAdvancedRecording | null,
+  ): instance is IAdvancedRecording {
+    if (!instance) return false;
+    return 'useStreamEncoders' in instance;
+  }
+
+  isAdvancedReplayBuffer(
+    instance: ISimpleReplayBuffer | IAdvancedReplayBuffer | null,
+  ): instance is IAdvancedReplayBuffer {
+    if (!instance) return false;
+    return 'mixer' in instance;
+  }
+
+  isSimpleStreaming(
+    instance: ISimpleStreaming | IAdvancedStreaming | null,
+  ): instance is ISimpleStreaming {
+    if (!instance) return false;
+    return 'useAdvanced' in instance;
+  }
+
+  isSimpleRecording(
+    instance: ISimpleRecording | IAdvancedRecording | null,
+  ): instance is ISimpleRecording {
+    if (!instance) return false;
+    return 'lowCPU' in instance;
+  }
+
+  isSimpleReplayBuffer(
+    instance: ISimpleReplayBuffer | IAdvancedReplayBuffer | null,
+  ): instance is ISimpleReplayBuffer {
+    if (!instance) return false;
+    return !('mixer' in instance);
+  }
+
+  handleFactoryOutputError(info: EOutputSignal, display: TDisplayType) {
+    const legacyInfo = {
+      type: info.type as EOBSOutputType,
+      signal: info.signal as EOBSOutputSignal,
+      code: info.code as EOutputCode,
+      error: info.error,
+      service: display as string,
+    } as IOBSOutputSignalInfo;
+
+    this.handleOBSOutputError(legacyInfo);
+  }
+
   /**
    * Show the GoLiveWindow
    * Prefill fields with data if `prepopulateOptions` provided
@@ -1213,6 +1929,13 @@ export class StreamingService
   }
 
   get formattedDurationInCurrentRecordingState() {
+    // in dual output mode, if using vertical recording as the second destination
+    // display the vertical recording status time
+    if (this.state.status.horizontal.recording !== ERecordingState.Offline) {
+      this.formattedDurationSince(moment(this.state.recordingStatusTime));
+    } else if (this.state.status.vertical.recording !== ERecordingState.Offline) {
+      return this.formattedDurationSince(moment(this.state.status.vertical.recordingTime));
+    }
     return this.formattedDurationSince(moment(this.state.recordingStatusTime));
   }
 
@@ -1263,14 +1986,28 @@ export class StreamingService
   private handleOBSOutputSignal(info: IOBSOutputSignalInfo) {
     console.debug('OBS Output signal: ', info);
 
+    /*
+     * Resolve when:
+     * - Single output mode: always resolve
+     * - Dual output mode: after vertical stream started
+     * - Dual output mode: when vertical display is second destination,
+     *   resolve after horizontal stream started
+     */
+    const display = this.convertSignalToDisplay(info.service);
+
+    const isVerticalDisplayStartSignal =
+      display === 'vertical' && info.signal === EOBSOutputSignal.Start;
+
     const shouldResolve =
-      !this.views.isDualOutputMode || (this.views.isDualOutputMode && info.service === 'vertical');
+      !this.views.isDualOutputMode ||
+      (this.views.isDualOutputMode && isVerticalDisplayStartSignal) ||
+      (this.views.isDualOutputMode && info.signal === EOBSOutputSignal.Start);
 
     const time = new Date().toISOString();
 
     if (info.type === EOBSOutputType.Streaming) {
       if (info.signal === EOBSOutputSignal.Start && shouldResolve) {
-        this.SET_STREAMING_STATUS(EStreamingState.Live, time);
+        this.SET_STREAMING_STATUS(EStreamingState.Live, display, time);
         this.resolveStartStreaming();
         this.streamingStatusChange.next(EStreamingState.Live);
 
@@ -1298,22 +2035,6 @@ export class StreamingService
         eventMetadata.streamType = streamSettings.streamType;
         eventMetadata.platform = streamSettings.platform;
         eventMetadata.server = streamSettings.server;
-        eventMetadata.outputMode = this.views.isDualOutputMode ? 'dual' : 'single';
-        eventMetadata.platforms = this.views.protectedModeEnabled
-          ? [
-              ...this.views.enabledPlatforms,
-              /*
-               * This is to be consistent with `stream_end`, unsure what multiple `custom_rtmp`'s
-               * provide on their own without URL, but it could be a privacy or payload size issue.
-               */
-              ...this.views.customDestinations.filter(d => d.enabled).map(_ => 'custom_rtmp'),
-            ]
-          : ['custom_rtmp'];
-
-        if (eventMetadata.platforms.includes('youtube')) {
-          eventMetadata.streamId = this.youtubeService.state.streamId;
-          eventMetadata.broadcastId = this.youtubeService.state.settings?.broadcastId;
-        }
 
         this.usageStatisticsService.recordEvent('stream_start', eventMetadata);
         this.usageStatisticsService.recordAnalyticsEvent('StreamingStatus', {
@@ -1323,10 +2044,10 @@ export class StreamingService
         });
         this.usageStatisticsService.recordFeatureUsage('Streaming');
       } else if (info.signal === EOBSOutputSignal.Starting && shouldResolve) {
-        this.SET_STREAMING_STATUS(EStreamingState.Starting, time);
+        this.SET_STREAMING_STATUS(EStreamingState.Starting, display, time);
         this.streamingStatusChange.next(EStreamingState.Starting);
       } else if (info.signal === EOBSOutputSignal.Stop) {
-        this.SET_STREAMING_STATUS(EStreamingState.Offline, time);
+        this.SET_STREAMING_STATUS(EStreamingState.Offline, display, time);
         this.RESET_STREAM_INFO();
         this.rejectStartStreaming();
         this.streamingStatusChange.next(EStreamingState.Offline);
@@ -1336,225 +2057,204 @@ export class StreamingService
         });
       } else if (info.signal === EOBSOutputSignal.Stopping) {
         this.sendStreamEndEvent();
-        this.SET_STREAMING_STATUS(EStreamingState.Ending, time);
+        this.SET_STREAMING_STATUS(EStreamingState.Ending, display, time);
         this.streamingStatusChange.next(EStreamingState.Ending);
       } else if (info.signal === EOBSOutputSignal.Reconnect) {
-        this.SET_STREAMING_STATUS(EStreamingState.Reconnecting);
+        this.SET_STREAMING_STATUS(EStreamingState.Reconnecting, display);
         this.streamingStatusChange.next(EStreamingState.Reconnecting);
         this.sendReconnectingNotification();
       } else if (info.signal === EOBSOutputSignal.ReconnectSuccess) {
-        this.SET_STREAMING_STATUS(EStreamingState.Live);
+        this.SET_STREAMING_STATUS(EStreamingState.Live, display);
         this.streamingStatusChange.next(EStreamingState.Live);
         this.clearReconnectingNotification();
       }
-    } else if (info.type === EOBSOutputType.Recording) {
-      const nextState: ERecordingState = ({
-        [EOBSOutputSignal.Start]: ERecordingState.Recording,
-        [EOBSOutputSignal.Starting]: ERecordingState.Starting,
-        [EOBSOutputSignal.Stop]: ERecordingState.Offline,
-        [EOBSOutputSignal.Stopping]: ERecordingState.Stopping,
-        [EOBSOutputSignal.Wrote]: ERecordingState.Wrote,
-      } as Dictionary<ERecordingState>)[info.signal];
-
-      // We received a signal we didn't recognize
-      if (!nextState) return;
-
-      if (info.signal === EOBSOutputSignal.Start) {
-        this.usageStatisticsService.recordFeatureUsage('Recording');
-        this.usageStatisticsService.recordAnalyticsEvent('RecordingStatus', {
-          status: nextState,
-          code: info.code,
-        });
-      }
+    }
 
-      if (info.signal === EOBSOutputSignal.Wrote) {
-        const filename = NodeObs.OBS_service_getLastRecording();
-        const parsedFilename = byOS({
-          [OS.Mac]: filename,
-          [OS.Windows]: filename.replace(/\//, '\\'),
-        });
-        this.recordingModeService.actions.addRecordingEntry(parsedFilename);
-        this.markersService.actions.exportCsv(parsedFilename);
-        this.recordingModeService.addRecordingEntry(parsedFilename);
-        this.latestRecordingPath.next(filename);
-        // Wrote signals come after Offline, so we return early here
-        // to not falsely set our state out of Offline
-        return;
-      }
+    if (info.code === EOutputCode.Success) return;
+    this.handleOBSOutputError(info);
+  }
 
-      this.SET_RECORDING_STATUS(nextState, time);
-      this.recordingStatusChange.next(nextState);
-    } else if (info.type === EOBSOutputType.ReplayBuffer) {
-      const nextState: EReplayBufferState = ({
-        [EOBSOutputSignal.Start]: EReplayBufferState.Running,
-        [EOBSOutputSignal.Stopping]: EReplayBufferState.Stopping,
-        [EOBSOutputSignal.Stop]: EReplayBufferState.Offline,
-        [EOBSOutputSignal.Wrote]: EReplayBufferState.Running,
-        [EOBSOutputSignal.WriteError]: EReplayBufferState.Running,
-      } as Dictionary<EReplayBufferState>)[info.signal];
-
-      if (nextState) {
-        this.SET_REPLAY_BUFFER_STATUS(nextState, time);
-        this.replayBufferStatusChange.next(nextState);
-      }
+  /**
+   * Convert the signal from IOBSOutputSignalInfo to the display type
+   * @remark This is required to facilitate special handling for each display in dual output mode
+   * @param service - String representing the name of the service returned from the API
+   * @returns - The display type
+   */
+  private convertSignalToDisplay(service: string): TDisplayType {
+    switch (service) {
+      case 'vertical':
+        return 'vertical';
+      case 'horizontal':
+        return 'horizontal';
+      case 'default':
+        return 'horizontal';
+      default:
+        return 'horizontal';
+    }
+  }
 
-      if (info.signal === EOBSOutputSignal.Wrote) {
-        this.usageStatisticsService.recordAnalyticsEvent('ReplayBufferStatus', {
-          status: 'wrote',
-          code: info.code,
-        });
-        this.replayBufferFileWrite.next(NodeObs.OBS_service_getLastReplay());
-      }
+  private handleOBSOutputError(info: IOBSOutputSignalInfo) {
+    console.debug('OBS Output signal: ', info);
+
+    if (!info.code) return;
+    if ((info.code as EOutputCode) === EOutputCode.Success) return;
+
+    if (this.outputErrorOpen) {
+      console.warn('Not showing error message because existing window is open.', info);
+
+      const messages = formatUnknownErrorMessage(
+        info,
+        this.streamErrorUserMessage,
+        this.streamErrorReportMessage,
+      );
+
+      this.streamErrorCreated.next(messages.report);
+
+      return;
     }
 
-    if (info.code) {
-      if (this.outputErrorOpen) {
-        console.warn('Not showing error message because existing window is open.', info);
+    let errorText = this.streamErrorUserMessage;
+    let details = '';
+    let linkToDriverInfo = false;
+    let showNativeErrorMessage = false;
+    let diagReportMessage = this.streamErrorUserMessage;
 
-        const messages = formatUnknownErrorMessage(
-          info,
-          this.streamErrorUserMessage,
-          this.streamErrorReportMessage,
-        );
+    if (info.code === EOutputCode.BadPath) {
+      errorText = $t(
+        'Invalid Path or Connection URL.  Please check your settings to confirm that they are valid.',
+      );
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.ConnectFailed) {
+      errorText = $t(
+        'Failed to connect to the streaming server.  Please check your internet connection.',
+      );
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.Disconnected) {
+      errorText = $t(
+        'Disconnected from the streaming server.  Please check your internet connection.',
+      );
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.InvalidStream) {
+      errorText = $t(
+        'Could not access the specified channel or stream key. Please log out and back in to refresh your credentials. If the problem persists, there may be a problem connecting to the server.',
+      );
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.NoSpace) {
+      errorText = $t('There is not sufficient disk space to continue recording.');
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.Unsupported) {
+      errorText =
+        $t(
+          'The output format is either unsupported or does not support more than one audio track.  ',
+        ) + $t('Please check your settings and try again.');
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else if (info.code === EOutputCode.OutdatedDriver) {
+      linkToDriverInfo = true;
+      errorText = $t(
+        'An error occurred with the output. This is usually caused by out of date video drivers. Please ensure your Nvidia or AMD drivers are up to date and try again.',
+      );
+      diagReportMessage = diagReportMessage.concat(errorText);
+    } else {
+      // -4 is used for generic unknown messages in OBS. Both -4 and any other code
+      // we don't recognize should fall into this branch and show a generic error.
 
-        this.streamErrorCreated.next(messages.report);
+      if (!this.userService.isLoggedIn) {
+        const messages = formatStreamErrorMessage('LOGGED_OUT_ERROR');
 
-        return;
-      }
+        errorText = messages.user;
+        diagReportMessage = messages.report;
+        if (messages.details) details = messages.details;
 
-      let errorText = this.streamErrorUserMessage;
-      let details = '';
-      let linkToDriverInfo = false;
-      let showNativeErrorMessage = false;
-      let diagReportMessage = this.streamErrorUserMessage;
+        showNativeErrorMessage = details !== '';
+      } else {
+        if (
+          !info.error ||
+          (info.error && typeof info.error !== 'string') ||
+          (info.error && info.error === '')
+        ) {
+          info.error = $t('An unknown %{type} error occurred.', {
+            type: outputType(info.type),
+          });
+        }
 
-      if (info.code === EOutputCode.BadPath) {
-        errorText = $t(
-          'Invalid Path or Connection URL.  Please check your settings to confirm that they are valid.',
-        );
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.ConnectFailed) {
-        errorText = $t(
-          'Failed to connect to the streaming server.  Please check your internet connection.',
-        );
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.Disconnected) {
-        errorText = $t(
-          'Disconnected from the streaming server.  Please check your internet connection.',
-        );
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.InvalidStream) {
-        errorText = $t(
-          'Could not access the specified channel or stream key. Please log out and back in to refresh your credentials. If the problem persists, there may be a problem connecting to the server.',
-        );
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.NoSpace) {
-        errorText = $t('There is not sufficient disk space to continue recording.');
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.Unsupported) {
-        errorText =
-          $t(
-            'The output format is either unsupported or does not support more than one audio track.  ',
-          ) + $t('Please check your settings and try again.');
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else if (info.code === EOutputCode.OutdatedDriver) {
-        linkToDriverInfo = true;
-        errorText = $t(
-          'An error occurred with the output. This is usually caused by out of date video drivers. Please ensure your Nvidia or AMD drivers are up to date and try again.',
+        const messages = formatUnknownErrorMessage(
+          info,
+          this.streamErrorUserMessage,
+          this.streamErrorReportMessage,
         );
-        diagReportMessage = diagReportMessage.concat(errorText);
-      } else {
-        // -4 is used for generic unknown messages in OBS. Both -4 and any other code
-        // we don't recognize should fall into this branch and show a generic error.
-
-        if (!this.userService.isLoggedIn) {
-          const messages = formatStreamErrorMessage('LOGGED_OUT_ERROR');
-
-          errorText = messages.user;
-          diagReportMessage = messages.report;
-          if (messages.details) details = messages.details;
-
-          showNativeErrorMessage = details !== '';
-        } else if (info.error && typeof info.error === 'string') {
-          const messages = formatUnknownErrorMessage(
-            info,
-            this.streamErrorUserMessage,
-            this.streamErrorReportMessage,
-          );
 
-          errorText = messages.user;
-          diagReportMessage = messages.report;
-          if (messages.details) details = messages.details;
+        errorText = messages.user;
+        diagReportMessage = messages.report;
+        if (messages.details) details = messages.details;
 
-          showNativeErrorMessage = details !== '';
-        }
+        showNativeErrorMessage = details !== '';
       }
+    }
 
-      const buttons = [$t('OK')];
+    const buttons = [$t('OK')];
 
-      const title = {
-        [EOBSOutputType.Streaming]: $t('Streaming Error'),
-        [EOBSOutputType.Recording]: $t('Recording Error'),
-        [EOBSOutputType.ReplayBuffer]: $t('Replay Buffer Error'),
-      }[info.type];
+    const title = {
+      [EOBSOutputType.Streaming]: $t('Streaming Error'),
+      [EOBSOutputType.Recording]: $t('Recording Error'),
+      [EOBSOutputType.ReplayBuffer]: $t('Replay Buffer Error'),
+    }[info.type];
 
-      if (linkToDriverInfo) buttons.push($t('Learn More'));
-      if (showNativeErrorMessage) {
-        buttons.push($t('More'));
-      }
+    if (linkToDriverInfo) buttons.push($t('Learn More'));
+    if (showNativeErrorMessage) {
+      buttons.push($t('More'));
+    }
 
-      this.outputErrorOpen = true;
-      const errorType = 'error';
-      remote.dialog
-        .showMessageBox(Utils.getMainWindow(), {
-          buttons,
-          title,
-          type: errorType,
-          message: errorText,
-        })
-        .then(({ response }) => {
-          if (linkToDriverInfo && response === 1) {
-            this.outputErrorOpen = false;
-            remote.shell.openExternal(
-              'https://howto.streamlabs.com/streamlabs-obs-19/nvidia-graphics-driver-clean-install-tutorial-7000',
-            );
+    this.outputErrorOpen = true;
+    const errorType = 'error';
+    remote.dialog
+      .showMessageBox(Utils.getMainWindow(), {
+        buttons,
+        title,
+        type: errorType,
+        message: errorText,
+      })
+      .then(({ response }) => {
+        if (linkToDriverInfo && response === 1) {
+          this.outputErrorOpen = false;
+          remote.shell.openExternal(
+            'https://howto.streamlabs.com/streamlabs-obs-19/nvidia-graphics-driver-clean-install-tutorial-7000',
+          );
+        } else {
+          let expectedResponse = 1;
+          if (linkToDriverInfo) {
+            expectedResponse = 2;
+          }
+          if (showNativeErrorMessage && response === expectedResponse) {
+            const buttons = [$t('OK')];
+            remote.dialog
+              .showMessageBox({
+                buttons,
+                title,
+                type: errorType,
+                message: details,
+              })
+              .then(({ response }) => {
+                this.outputErrorOpen = false;
+                this.streamErrorUserMessage = '';
+                this.streamErrorReportMessage = '';
+              })
+              .catch(() => {
+                this.outputErrorOpen = false;
+              });
           } else {
-            let expectedResponse = 1;
-            if (linkToDriverInfo) {
-              expectedResponse = 2;
-            }
-            if (showNativeErrorMessage && response === expectedResponse) {
-              const buttons = [$t('OK')];
-              remote.dialog
-                .showMessageBox({
-                  buttons,
-                  title,
-                  type: errorType,
-                  message: details,
-                })
-                .then(({ response }) => {
-                  this.outputErrorOpen = false;
-                  this.streamErrorUserMessage = '';
-                  this.streamErrorReportMessage = '';
-                })
-                .catch(() => {
-                  this.outputErrorOpen = false;
-                });
-            } else {
-              this.outputErrorOpen = false;
-            }
+            this.outputErrorOpen = false;
           }
-        })
-        .catch(() => {
-          this.outputErrorOpen = false;
-        });
+        }
+      })
+      .catch(() => {
+        this.outputErrorOpen = false;
+      });
 
-      this.windowsService.actions.closeChildWindow();
+    this.windowsService.actions.closeChildWindow();
 
-      // pass streaming error to diag report
-      if (info.type === EOBSOutputType.Streaming || !this.userService.isLoggedIn) {
-        this.streamErrorCreated.next(diagReportMessage);
-      }
+    // pass streaming error to diag report
+    if (info.type === EOBSOutputType.Streaming || !this.userService.isLoggedIn) {
+      this.streamErrorCreated.next(diagReportMessage);
     }
   }
 
@@ -1624,22 +2324,163 @@ export class StreamingService
     return fetch(request);
   }
 
+  /**
+   * Shut down the streaming service
+   *
+   * @remark Each streaming/recording/replay buffer context must be destroyed
+   * on app shutdown to prevent errors.
+   */
+  shutdown() {
+    Object.keys(this.contexts).forEach(display => {
+      Object.keys(this.contexts[display]).forEach(async (contextType: keyof IOutputContext) => {
+        this.destroyOutputContextIfExists(display, contextType);
+      });
+    });
+  }
+
+  /**
+   * Destroy the streaming context for a given display and output
+   * @remark Will just return if the context is null
+   * @param display - The display to destroy the output context for
+   * @param contextType - The name of the output context to destroy
+   * @param confirmOffline - If true, the context will be destroyed regardless
+   * of the status of the other outputs. Default is false.
+   * @returns A promise that resolves to true if the context was destroyed, false
+   * if the context did not exist
+   */
+  private async destroyOutputContextIfExists(
+    display: TDisplayType | string,
+    contextType: keyof IOutputContext,
+  ) {
+    // if the context does not exist there is nothing to destroy
+    if (!this.contexts[display] || !this.contexts[display][contextType]) return;
+
+    // prevent errors by stopping an active context before destroying it
+    if (this.state.status[display][contextType].toString() !== 'offline') {
+      this.contexts[display][contextType].stop();
+
+      // change the status to offline for the UI
+      switch (contextType) {
+        case 'streaming':
+          this.SET_STREAMING_STATUS(
+            EStreamingState.Offline,
+            display as TDisplayType,
+            new Date().toISOString(),
+          );
+          break;
+        case 'recording':
+          this.SET_RECORDING_STATUS(
+            ERecordingState.Offline,
+            display as TDisplayType,
+            new Date().toISOString(),
+          );
+          break;
+        case 'replayBuffer':
+          this.SET_REPLAY_BUFFER_STATUS(
+            EReplayBufferState.Offline,
+            display as TDisplayType,
+            new Date().toISOString(),
+          );
+          break;
+      }
+    }
+
+    // identify the output's factory in order to destroy the context
+    if (this.outputSettingsService.getSettings().mode === 'Advanced') {
+      switch (contextType) {
+        case 'streaming':
+          this.isAdvancedStreaming(this.contexts[display][contextType])
+            ? AdvancedStreamingFactory.destroy(
+                this.contexts[display][contextType] as IAdvancedStreaming,
+              )
+            : SimpleStreamingFactory.destroy(
+                this.contexts[display][contextType] as ISimpleStreaming,
+              );
+          break;
+        case 'recording':
+          this.isAdvancedRecording(this.contexts[display][contextType])
+            ? AdvancedRecordingFactory.destroy(
+                this.contexts[display][contextType] as IAdvancedRecording,
+              )
+            : SimpleRecordingFactory.destroy(
+                this.contexts[display][contextType] as ISimpleRecording,
+              );
+          break;
+        case 'replayBuffer':
+          this.isAdvancedReplayBuffer(this.contexts[display][contextType])
+            ? AdvancedReplayBufferFactory.destroy(
+                this.contexts[display][contextType] as IAdvancedReplayBuffer,
+              )
+            : SimpleReplayBufferFactory.destroy(
+                this.contexts[display][contextType] as ISimpleReplayBuffer,
+              );
+          break;
+      }
+    }
+
+    this.contexts[display][contextType] = null;
+
+    return Promise.resolve();
+  }
+
+  logContexts(display: TDisplayType, label?: string) {
+    console.log(
+      display,
+      [label, 'this.contexts[display].recording'].join(' '),
+      this.isAdvancedRecording(this.contexts[display].recording)
+        ? (this.contexts[display].recording as IAdvancedRecording)
+        : (this.contexts[display].recording as ISimpleRecording),
+    );
+    console.log(
+      display,
+      [label, 'this.contexts[display].streaming'].join(' '),
+      this.contexts[display].streaming,
+    );
+    console.log(
+      display,
+      [label, 'this.contexts[display].replayBuffer'].join(' '),
+      this.contexts[display].replayBuffer,
+    );
+  }
+
   @mutation()
-  private SET_STREAMING_STATUS(status: EStreamingState, time?: string) {
+  private SET_STREAMING_STATUS(status: EStreamingState, display: TDisplayType, time?: string) {
+    // while recording and the replay buffer are in the v2 API and streaming is in the old API
+    // we need to duplicate tracking the replay buffer status
     this.state.streamingStatus = status;
-    if (time) this.state.streamingStatusTime = time;
+    this.state.status[display].streaming = status;
+
+    if (time) {
+      this.state.streamingStatusTime = time;
+      this.state.status[display].streamingTime = time;
+    }
   }
 
   @mutation()
-  private SET_RECORDING_STATUS(status: ERecordingState, time: string) {
+  private SET_RECORDING_STATUS(status: ERecordingState, display: TDisplayType, time: string) {
+    // while recording and the replay buffer are in the v2 API and streaming is in the old API
+    // we need to duplicate tracking the replay buffer status
+    this.state.status[display].recording = status;
+    this.state.status[display].recordingTime = time;
     this.state.recordingStatus = status;
     this.state.recordingStatusTime = time;
   }
 
   @mutation()
-  private SET_REPLAY_BUFFER_STATUS(status: EReplayBufferState, time?: string) {
+  private SET_REPLAY_BUFFER_STATUS(
+    status: EReplayBufferState,
+    display: TDisplayType,
+    time?: string,
+  ) {
+    // while recording and the replay buffer are in the v2 API and streaming is in the old API
+    // we need to duplicate tracking the replay buffer status
+    this.state.status[display].replayBuffer = status;
     this.state.replayBufferStatus = status;
-    if (time) this.state.replayBufferStatusTime = time;
+
+    if (time) {
+      this.state.status[display].replayBufferTime = time;
+      this.state.replayBufferStatusTime = time;
+    }
   }
 
   @mutation()
diff --git a/test/helpers/modules/settings/settings.ts b/test/helpers/modules/settings/settings.ts
index 98f98d627edc..da59998ca731 100644
--- a/test/helpers/modules/settings/settings.ts
+++ b/test/helpers/modules/settings/settings.ts
@@ -1,17 +1,9 @@
-import {
-  click,
-  clickButton,
-  clickCheckbox,
-  focusChild,
-  useChildWindow,
-  useMainWindow,
-} from '../core';
+import { click, clickButton, focusChild, useChildWindow, useMainWindow } from '../core';
 import { mkdtemp } from 'fs-extra';
 import { tmpdir } from 'os';
 import * as path from 'path';
 import { setInputValue } from '../forms/base';
-import { FormMonkey } from '../../form-monkey';
-import { TExecutionContext } from '../../../helpers/webdriver';
+import { setFormDropdown } from '../../webdriver/forms';
 
 /**
  * Open the settings window with a given category selected
@@ -35,12 +27,21 @@ export async function showSettingsWindow(category: string, cb?: () => Promise<un
 /**
  * Set recording path to a temp dir
  */
-export async function setTemporaryRecordingPath(): Promise<string> {
+export async function setTemporaryRecordingPath(advanced: boolean = false): Promise<string> {
   const tmpDir = await mkdtemp(path.join(tmpdir(), 'slobs-recording-'));
-  await showSettingsWindow('Output', async () => {
-    await setInputValue('[data-name="FilePath"] input', tmpDir);
-    await clickButton('Done');
-  });
+
+  if (advanced) {
+    await showSettingsWindow('Output', async () => {
+      await setFormDropdown('Output Mode', 'Advanced');
+      await clickButton('Recording');
+      await setInputValue('[data-name="RecFilePath"] input', tmpDir);
+    });
+  } else {
+    await showSettingsWindow('Output', async () => {
+      await setInputValue('[data-name="FilePath"] input', tmpDir);
+      await clickButton('Done');
+    });
+  }
   return tmpDir;
 }
 
diff --git a/test/regular/recording.ts b/test/regular/recording.ts
index 551db9d4d377..9839cd26f74b 100644
--- a/test/regular/recording.ts
+++ b/test/regular/recording.ts
@@ -1,5 +1,5 @@
 import { readdir } from 'fs-extra';
-import { test, useWebdriver } from '../helpers/webdriver';
+import { test, TExecutionContext, useWebdriver } from '../helpers/webdriver';
 import { sleep } from '../helpers/sleep';
 import { startRecording, stopRecording } from '../helpers/modules/streaming';
 import { FormMonkey } from '../helpers/form-monkey';
@@ -8,29 +8,39 @@ import {
   setTemporaryRecordingPath,
   showSettingsWindow,
 } from '../helpers/modules/settings/settings';
-import { clickButton, focusMain } from '../helpers/modules/core';
+import {
+  clickButton,
+  clickWhenDisplayed,
+  focusMain,
+  getNumElements,
+  waitForDisplayed,
+} from '../helpers/modules/core';
 import { logIn } from '../helpers/webdriver/user';
 import { toggleDualOutputMode } from '../helpers/modules/dual-output';
+import { setFormDropdown } from '../helpers/webdriver/forms';
+import { setInputValue } from '../helpers/modules/forms';
 
+// not a react hook
+// eslint-disable-next-line react-hooks/rules-of-hooks
 useWebdriver();
 
 /**
- * Recording with one context active (horizontal)
+ * Iterate over all formats and record a 0.5s video in each.
+ * @param t - AVA test context
+ * @param advanced - whether to use advanced settings
+ * @returns number of formats
  */
-
-test('Recording', async t => {
-  const tmpDir = await setTemporaryRecordingPath();
-
-  // low resolution reduces CPU usage
-  await setOutputResolution('100x100');
-
+async function createRecordingFiles(advanced: boolean = false): Promise<number> {
   const formats = ['flv', 'mp4', 'mov', 'mkv', 'ts', 'm3u8'];
 
   // Record 0.5s video in every format
   for (const format of formats) {
     await showSettingsWindow('Output', async () => {
-      const form = new FormMonkey(t);
-      await form.setInputValue(await form.getInputSelectorByTitle('Recording Format'), format);
+      if (advanced) {
+        await clickButton('Recording');
+      }
+
+      await setFormDropdown('Recording Format', format);
       await clickButton('Done');
     });
 
@@ -39,15 +49,52 @@ test('Recording', async t => {
     await sleep(500);
     await stopRecording();
 
-    // Wait to ensure that output setting are editable
-    await sleep(500);
+    // Confirm notification has been shown
+    await focusMain();
+    await clickWhenDisplayed('span=A new Recording has been completed. Click for more info');
+    await waitForDisplayed('h1=Recordings', { timeout: 1000 });
   }
 
+  return Promise.resolve(formats.length);
+}
+
+async function validateRecordingFiles(t: TExecutionContext, tmpDir: string, numFormats: number) {
   // Check that every file was created
   const files = await readdir(tmpDir);
 
+  const numFiles = files.length;
+
   // M3U8 creates multiple TS files in addition to the catalog itself.
-  t.true(files.length >= formats.length, `Files that were created:\n${files.join('\n')}`);
+  t.true(numFiles >= numFormats, `Files that were created:\n${files.join('\n')}`);
+  waitForDisplayed('h1=Recordings');
+
+  const numRecordings = await getNumElements('[data-test=filename]');
+  t.is(numRecordings, numFiles, 'Number of recordings in history matches number of files recorded');
+}
+
+/**
+ * Recording with one context active (horizontal)
+ */
+
+test('Recording', async t => {
+  // low resolution reduces CPU usage
+  await setOutputResolution('100x100');
+  const tmpDir = await setTemporaryRecordingPath();
+
+  // Simple Recording
+  const numFormats = await createRecordingFiles();
+  await validateRecordingFiles(t, tmpDir, numFormats);
+});
+
+test('Advanced Recording', async t => {
+  // low resolution reduces CPU usage
+  await setOutputResolution('100x100');
+
+  // Advanced Recording
+  const tmpAdvDir = await setTemporaryRecordingPath(true);
+  const numFiles = await createRecordingFiles(true);
+  console.log('numFiles', numFiles);
+  await validateRecordingFiles(t, tmpAdvDir, numFiles);
 });
 
 /**
@@ -60,6 +107,12 @@ test('Recording with two contexts active', async t => {
   const tmpDir = await setTemporaryRecordingPath();
   // low resolution reduces CPU usage
   await setOutputResolution('100x100');
+  await showSettingsWindow('Output', async () => {
+    await setFormDropdown('Output Mode', 'Advanced');
+    await clickButton('Recording');
+    await setInputValue('[data-name="RecFilePath"] input', tmpDir);
+  });
+
   const formats = ['flv', 'mp4', 'mov', 'mkv', 'ts', 'm3u8'];
   // Record 0.5s video in every format
   for (const format of formats) {