diff --git a/client/dive-common/components/ConfidenceFilter.vue b/client/dive-common/components/ConfidenceFilter.vue
index 915d1d899..34596543b 100644
--- a/client/dive-common/components/ConfidenceFilter.vue
+++ b/client/dive-common/components/ConfidenceFilter.vue
@@ -25,9 +25,7 @@ export default defineComponent({
   setup(props, { emit }) {
     function _updateConfidence(event: InputEvent) {
       if (event.target) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        emit('update:confidence', Number.parseFloat(event.target.value));
+        emit('update:confidence', Number.parseFloat((event.target as HTMLInputElement).value));
       }
     }
     function _emitEnd() {
diff --git a/client/dive-common/components/ControlsContainer.vue b/client/dive-common/components/ControlsContainer.vue
index 0edab8f44..f3877d64d 100644
--- a/client/dive-common/components/ControlsContainer.vue
+++ b/client/dive-common/components/ControlsContainer.vue
@@ -4,15 +4,14 @@ import {
 } from '@vue/composition-api';
 import type { DatasetType } from 'dive-common/apispec';
 import FileNameTimeDisplay from 'vue-media-annotator/components/controls/FileNameTimeDisplay.vue';
-import { injectMediaController } from 'vue-media-annotator/components/annotators/useMediaController';
 import {
   Controls,
   EventChart,
+  injectAggregateController,
   LineChart,
   Timeline,
 } from 'vue-media-annotator/components';
 
-
 export default defineComponent({
   components: {
     Controls,
@@ -35,11 +34,14 @@ export default defineComponent({
       type: String as PropType<DatasetType>,
       required: true,
     },
+    collapsed: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup() {
+  setup(_, { emit }) {
     const currentView = ref('Detections');
-    const collapsed = ref(false);
 
     const ticks = ref([0.25, 0.5, 0.75, 1.0, 2.0, 4.0, 8.0]);
 
@@ -49,16 +51,15 @@ export default defineComponent({
      */
     function toggleView(type: 'Detections' | 'Events') {
       currentView.value = type;
-      collapsed.value = false;
+      emit('update:collapsed', false);
     }
     const {
       maxFrame, frame, seek, volume, setVolume, setSpeed, speed,
-    } = injectMediaController();
+    } = injectAggregateController().value;
 
     return {
       currentView,
       toggleView,
-      collapsed,
       maxFrame,
       frame,
       seek,
@@ -73,7 +74,10 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <v-col
+    dense
+    style="position:absolute; bottom: 0px; padding: 0px; margin:0px;"
+  >
     <Controls>
       <template slot="timelineControls">
         <div style="min-width: 210px">
@@ -85,7 +89,7 @@ export default defineComponent({
               <v-icon
                 small
                 v-on="on"
-                @click="collapsed=!collapsed"
+                @click="$emit('update:collapsed', !collapsed)"
               >
                 {{ collapsed?'mdi-chevron-up-box': 'mdi-chevron-down-box' }}
               </v-icon>
@@ -261,7 +265,7 @@ export default defineComponent({
         />
       </template>
     </Timeline>
-  </div>
+  </v-col>
 </template>
 
 <style lang="scss" scoped>
diff --git a/client/dive-common/components/Sidebar.vue b/client/dive-common/components/Sidebar.vue
index 0131c47ce..dc5ec0921 100644
--- a/client/dive-common/components/Sidebar.vue
+++ b/client/dive-common/components/Sidebar.vue
@@ -6,7 +6,7 @@ import {
   watch,
 } from '@vue/composition-api';
 
-import { TypeList, TrackList } from 'vue-media-annotator/components';
+import { TypeList, TrackList, injectAggregateController } from 'vue-media-annotator/components';
 import { useAllTypes, useHandler } from 'vue-media-annotator/provides';
 
 import { clientSettings } from 'dive-common/store/settings';
@@ -45,6 +45,11 @@ export default defineComponent({
     const { visible } = usePrompt();
     const trackSettings = toRef(clientSettings, 'trackSettings');
     const typeSettings = toRef(clientSettings, 'typeSettings');
+    const aggregateController = injectAggregateController();
+
+    function seek(frame: number) {
+      aggregateController.value.seek(frame);
+    }
 
     const data = reactive({
       currentTab: 'tracks' as 'tracks' | 'attributes',
@@ -89,6 +94,7 @@ export default defineComponent({
       doToggleMerge,
       onResize,
       swapTabs,
+      seek,
     };
   },
 });
@@ -145,7 +151,7 @@ export default defineComponent({
           :lock-types="typeSettings.lockTypes"
           :hotkeys-disabled="visible()"
           :height="data.trackHeight"
-          @track-seek="$emit('track-seek', $event)"
+          @track-seek="seek"
         >
           <template slot="settings">
             <TrackSettingsPanel
@@ -159,7 +165,7 @@ export default defineComponent({
         :lock-types="typeSettings.lockTypes"
         :hotkeys-disabled="visible()"
         :width="width"
-        @track-seek="$emit('track-seek', $event)"
+        @track-seek="seek"
         @toggle-merge="doToggleMerge"
         @back="swapTabs"
         @commit-merge="commitMerge"
diff --git a/client/dive-common/components/Viewer.vue b/client/dive-common/components/Viewer.vue
index 76e44df32..bb609bff3 100644
--- a/client/dive-common/components/Viewer.vue
+++ b/client/dive-common/components/Viewer.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref, reactive, watch,
+  defineComponent, ref, toRef, computed, Ref, reactive, watch, onBeforeUnmount, nextTick,
 } from '@vue/composition-api';
 import type { Vue } from 'vue/types/vue';
+import type { AxiosError } from 'axios';
 
 /* VUE MEDIA ANNOTATOR */
 import Track, { TrackId } from 'vue-media-annotator/track';
@@ -16,16 +17,15 @@ import {
   useTimeObserver,
   useEventChart,
 } from 'vue-media-annotator/use';
+import { useMediaController } from 'vue-media-annotator/components';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { provideAnnotator } from 'vue-media-annotator/provides';
-import {
-  ImageAnnotator,
-  VideoAnnotator,
-  LayerManager,
-} from 'vue-media-annotator/components';
-import { MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import ImageAnnotator from 'vue-media-annotator/components/annotators/ImageAnnotator.vue';
+import VideoAnnotator from 'vue-media-annotator/components/annotators/VideoAnnotator.vue';
+import LayerManager from 'vue-media-annotator/components/LayerManager.vue';
 
 /* DIVE COMMON */
+
 import PolygonBase from 'dive-common/recipes/polygonbase';
 import HeadTail from 'dive-common/recipes/headtail';
 import EditorMenu from 'dive-common/components/EditorMenu.vue';
@@ -43,18 +43,24 @@ import { cloneDeep } from 'lodash';
 import { getResponseError } from 'vue-media-annotator/utils';
 import context from 'dive-common/store/context';
 
+export interface ImageDataItem {
+  url: string;
+  filename: string;
+}
+
+
 export default defineComponent({
   components: {
     ControlsContainer,
     DeleteControls,
+    ImageAnnotator,
     Sidebar,
     SidebarContext,
-    LayerManager,
-    VideoAnnotator,
-    ImageAnnotator,
     ConfidenceFilter,
     UserGuideButton,
     EditorMenu,
+    VideoAnnotator,
+    LayerManager,
   },
 
   // TODO: remove this in vue 3
@@ -77,27 +83,18 @@ export default defineComponent({
     const loadError = ref('');
     const baseMulticamDatasetId = ref(null as string | null);
     const datasetId = toRef(props, 'id');
-    const multiCamList: Ref<string[]> = ref([]);
-    const defaultCamera = ref('');
-    const currentCamera = ref('');
+    const multiCamList: Ref<string[]> = ref(['singleCam']);
+    const defaultCamera = ref('singleCam');
+    const selectedCamera = ref('singleCam');
     const playbackComponent = ref(undefined as Vue | undefined);
     const readonlyState = computed(() => props.readonlyMode || props.revision !== undefined);
-    const mediaController = computed(() => {
-      if (playbackComponent.value) {
-        // TODO: Bug in composition-api types incorrectly organizes the static members of a Vue
-        // instance when using typeof ImageAnnotator, so we can't use the "real" type here
-        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-        // @ts-ignore
-        return playbackComponent.value.mediaController as MediaController;
-      }
-      return {} as MediaController;
-    });
+    const { aggregateController, onResize, clear: mediaControllerClear } = useMediaController();
     const { time, updateTime, initialize: initTime } = useTimeObserver();
-    const imageData = ref([] as FrameImage[]);
+    const imageData = ref({ default: [] } as Record<string, FrameImage[]>);
     const datasetType: Ref<DatasetType> = ref('image-sequence');
     const datasetName = ref('');
     const saveInProgress = ref(false);
-    const videoUrl = ref(undefined as undefined | string);
+    const videoUrl: Ref<Record<string, string>> = ref({ });
     const { loadDetections, loadMetadata, saveMetadata } = useApi();
     const progress = reactive({
       // Loaded flag prevents annotator window from populating
@@ -117,6 +114,7 @@ export default defineComponent({
       return 0;
     });
 
+
     const {
       save: saveToServer,
       markChangesPending,
@@ -146,10 +144,12 @@ export default defineComponent({
 
     const {
       trackMap,
+      camTrackMap,
       sortedTracks,
       intervalTree,
       addTrack,
       insertTrack,
+      addCamera,
       removeTrack,
       getNewTrackId,
       removeTrack: tsRemoveTrack,
@@ -201,9 +201,11 @@ export default defineComponent({
     } = useModeManager({
       recipes,
       selectedTrackId,
+      selectedCamera,
       editingTrack,
       trackMap,
-      mediaController,
+      camTrackMap,
+      aggregateController,
       selectTrack,
       selectNextTrack,
       addTrack,
@@ -235,7 +237,7 @@ export default defineComponent({
         } catch (err) {
           await prompt({
             title: 'Error while splitting track',
-            text: err,
+            text: err as string,
             positiveButton: 'OK',
           });
           return;
@@ -270,7 +272,7 @@ export default defineComponent({
         });
       } catch (err) {
         let text = 'Unable to Save Data';
-        if (err.response && err.response.status === 403) {
+        if (err.response?.status === 403) {
           text = 'You do not have permission to Save Data to this Folder.';
         }
         await prompt({
@@ -321,12 +323,12 @@ export default defineComponent({
           const { cameras } = meta.multiCamMedia;
           multiCamList.value = Object.keys(cameras);
           defaultCamera.value = meta.multiCamMedia.defaultDisplay;
-          currentCamera.value = defaultCamera.value;
+          selectedCamera.value = defaultCamera.value;
           baseMulticamDatasetId.value = datasetId.value;
-          if (!currentCamera.value) {
+          if (!selectedCamera.value) {
             throw new Error('Multicamera dataset without default camera specified.');
           }
-          ctx.emit('update:id', `${props.id}/${currentCamera.value}`);
+          ctx.emit('update:id', `${props.id}/${selectedCamera.value}`);
           return;
         }
         /* Otherwise, complete loading of the dataset */
@@ -343,28 +345,58 @@ export default defineComponent({
           frameRate: meta.fps,
           originalFps: meta.originalFps || null,
         });
-        imageData.value = cloneDeep(meta.imageData) as FrameImage[];
-        videoUrl.value = meta.videoUrl;
-        datasetType.value = meta.type as DatasetType;
-
-        const trackData = await loadDetections(datasetId.value, props.revision);
-        const tracks = Object.values(trackData);
-        progress.total = tracks.length;
-        for (let i = 0; i < tracks.length; i += 1) {
-          if (i % 4000 === 0) {
-          /* Every N tracks, yeild some cycles for other scheduled tasks */
-            progress.progress = i;
+        // Load non-Default Cameras if they exist:
+        const filteredMultiCamList = multiCamList.value.filter((item) => item !== 'singleCam');
+        if (filteredMultiCamList.length === 0) {
+          imageData.value[selectedCamera.value] = cloneDeep(meta.imageData) as FrameImage[];
+          if (meta.videoUrl) {
+            videoUrl.value[selectedCamera.value] = meta.videoUrl;
+          }
+          datasetType.value = meta.type as DatasetType;
+          const trackData = await loadDetections(datasetId.value);
+          const tracks = Object.values(trackData);
+          progress.total = tracks.length;
+          for (let i = 0; i < tracks.length; i += 1) {
+            if (i % 4000 === 0) {
+              /* Every N tracks, yeild some cycles for other scheduled tasks */
+              progress.progress = i;
+              // eslint-disable-next-line no-await-in-loop
+              await new Promise((resolve) => window.setTimeout(resolve, 500));
+            }
+            insertTrack(Track.fromJSON(tracks[i]), { imported: true });
+          }
+        } else {
+          for (let i = 0; i < filteredMultiCamList.length; i += 1) {
+            const camera = filteredMultiCamList[i];
             // eslint-disable-next-line no-await-in-loop
-            await new Promise((resolve) => window.setTimeout(resolve, 500));
+            const subCameraMeta = await loadMetadata(`${baseMulticamDatasetId.value}/${camera}`);
+            imageData.value[camera] = cloneDeep(subCameraMeta.imageData) as FrameImage[];
+            if (subCameraMeta.videoUrl) {
+              videoUrl.value[camera] = subCameraMeta.videoUrl;
+            }
+            addCamera(camera);
+            // eslint-disable-next-line no-await-in-loop
+            const camTrackData = await loadDetections(`${baseMulticamDatasetId.value}/${camera}`);
+            const camTracks = Object.values(camTrackData);
+            progress.total = camTracks.length;
+            for (let j = 0; j < camTracks.length; j += 1) {
+              if (j % 4000 === 0) {
+              /* Every N tracks, yeild some cycles for other scheduled tasks */
+                progress.progress = j;
+                // eslint-disable-next-line no-await-in-loop
+                await new Promise((resolve) => window.setTimeout(resolve, 500));
+              }
+              insertTrack(Track.fromJSON(camTracks[j]), { imported: true, cameraName: camera });
+            }
           }
-          insertTrack(Track.fromJSON(tracks[i]), { imported: true });
         }
+
         progress.loaded = true;
       } catch (err) {
         progress.loaded = false;
         console.error(err);
         const errorEl = document.createElement('div');
-        errorEl.innerHTML = getResponseError(err);
+        errorEl.innerHTML = getResponseError(err as AxiosError);
         loadError.value = errorEl.innerText
           .concat(". If you don't know how to resolve this, please contact the server administrator.");
         throw err;
@@ -373,6 +405,7 @@ export default defineComponent({
     loadData();
 
     const reloadAnnotations = async () => {
+      mediaControllerClear();
       clearAllTracks();
       discardChanges();
       progress.loaded = false;
@@ -381,12 +414,33 @@ export default defineComponent({
 
     watch(datasetId, reloadAnnotations);
 
-    const changeCamera = async (camera: string) => {
-      if (!camera || !baseMulticamDatasetId.value) {
-        throw new Error('Attempted to change camera to invalid value or baseMultiCamDatasetId was missing');
+    const controlsRef = ref();
+    const controlsHeight = ref(0);
+    const controlsCollapsed = ref(false);
+    function handleResize() {
+      if (controlsRef.value) {
+        controlsHeight.value = controlsRef.value.$el.clientHeight;
+        onResize();
       }
-      const newId = `${baseMulticamDatasetId.value}/${camera}`;
-      ctx.emit('update:id', newId);
+    }
+    const observer = new ResizeObserver(handleResize);
+    /* On a reload this will watch the controls element and add on observer
+     * so that once done loading the or if the controlsRef is collapsed it will resize all cameras
+    */
+    watch(controlsRef, (previous) => {
+      if (previous) observer.unobserve(previous.$el);
+      if (controlsRef.value) observer.observe(controlsRef.value.$el);
+    });
+    watch(controlsCollapsed, async () => {
+      await nextTick();
+      handleResize();
+    });
+    onBeforeUnmount(() => {
+      if (controlsRef.value) observer.unobserve(controlsRef.value.$el);
+    });
+
+    const changeCamera = async (camera: string) => {
+      selectedCamera.value = camera;
     };
 
     const globalHandler = {
@@ -421,10 +475,12 @@ export default defineComponent({
         mergeList,
         pendingSaveCount,
         trackMap,
+        camTrackMap,
         filteredTracks,
         typeStyling,
         selectedKey,
         selectedTrackId,
+        selectedCamera,
         stateStyles: stateStyling,
         time,
         visibleModes,
@@ -436,6 +492,9 @@ export default defineComponent({
       /* props */
       confidenceFilters,
       clientSettings,
+      controlsRef,
+      controlsHeight,
+      controlsCollapsed,
       datasetName,
       datasetType,
       editingTrack,
@@ -445,7 +504,6 @@ export default defineComponent({
       imageData,
       lineChartData,
       loadError,
-      mediaController,
       mergeMode: mergeInProgress,
       pendingSaveCount,
       progress,
@@ -474,6 +532,7 @@ export default defineComponent({
       // multicam
       multiCamList,
       defaultCamera,
+      selectedCamera,
       changeCamera,
       // For Navigation Guarding
       navigateAwayGuard,
@@ -511,8 +570,8 @@ export default defineComponent({
           </template>
         </EditorMenu>
         <v-select
-          v-if="multiCamList.length"
-          :value="defaultCamera"
+          v-if="multiCamList.length && defaultCamera !== 'singleCam'"
+          :value="selectedCamera"
           :items="multiCamList"
           label="Camera"
           class="shrink"
@@ -568,8 +627,8 @@ export default defineComponent({
     >
       <sidebar
         :enable-slot="context.state.active !== 'TypeThreshold'"
+        class="fill-height"
         @import-types="importTypes($event)"
-        @track-seek="mediaController.seek($event)"
       >
         <template v-if="context.state.active !== 'TypeThreshold'">
           <v-divider />
@@ -587,27 +646,51 @@ export default defineComponent({
           </ConfidenceFilter>
         </template>
       </sidebar>
-      <v-col style="position: relative">
-        <component
-          :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
-          v-if="(imageData.length || videoUrl) && progress.loaded"
-          ref="playbackComponent"
+      <div
+        style="position: relative;"
+        class="d-flex flex-column grow"
+        dense
+      >
+        <div
+          v-if="progress.loaded"
           v-mousetrap="[
             { bind: 'n', handler: () => handler.trackAdd() },
             { bind: 'r', handler: () => mediaController.resetZoom() },
             { bind: 'esc', handler: () => handler.trackAbort() },
           ]"
-          v-bind="{ imageData, videoUrl, updateTime, frameRate, originalFps }"
-          class="playback-component"
+          class="d-flex flex-column grow"
         >
-          <template slot="control">
-            <controls-container
-              v-bind="{ lineChartData, eventChartData, datasetType }"
-              @select-track="handler.trackSelect"
-            />
-          </template>
-          <layer-manager />
-        </component>
+          <div class="d-flex grow">
+            <div
+              v-for="camera in multiCamList"
+              :key="camera"
+              class="d-flex flex-column grow"
+              :style="{ height: `calc(100% - ${controlsHeight}px)`}"
+              @click="changeCamera(camera)"
+              @mousedown.right="changeCamera(camera)"
+            >
+              <component
+                :is="datasetType === 'image-sequence' ? 'image-annotator' : 'video-annotator'"
+                v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+                ref="subPlaybackComponent"
+                class="fill-height"
+                :class="{'selected-camera': selectedCamera === camera && camera !== 'singleCam'}"
+                v-bind="{
+                  imageData: imageData[camera], videoUrl: videoUrl[camera],
+                  updateTime, frameRate, originalFps, camera }"
+              >
+                <LayerManager :camera="camera" />
+              </component>
+            </div>
+          </div>
+          <ControlsContainer
+            ref="controlsRef"
+            class="shrink"
+            :collapsed.sync="controlsCollapsed"
+            v-bind="{ lineChartData, eventChartData, datasetType }"
+            @select-track="handler.trackSelect"
+          />
+        </div>
         <div
           v-else
           class="d-flex justify-center align-center fill-height"
@@ -636,7 +719,7 @@ export default defineComponent({
             <span v-else>{{ progressValue }}%</span>
           </v-progress-circular>
         </div>
-      </v-col>
+      </div>
       <SidebarContext />
     </v-row>
   </v-main>
@@ -664,4 +747,15 @@ html {
 .text-xs-center {
   text-align: center !important;
 }
+
+.annotator-wrapper {
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/client/dive-common/use/useModeManager.ts b/client/dive-common/use/useModeManager.ts
index 62277f84d..34a299b05 100644
--- a/client/dive-common/use/useModeManager.ts
+++ b/client/dive-common/use/useModeManager.ts
@@ -6,7 +6,7 @@ import Track, { TrackId } from 'vue-media-annotator/track';
 import { getTrack } from 'vue-media-annotator/use/useTrackStore';
 import { RectBounds, updateBounds } from 'vue-media-annotator/utils';
 import { EditAnnotationTypes, VisibleAnnotationTypes } from 'vue-media-annotator/layers';
-import { MediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
+import { AggregateMediaController } from 'vue-media-annotator/components/annotators/mediaControllerType';
 
 import Recipe from 'vue-media-annotator/recipe';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
@@ -29,9 +29,11 @@ interface SetAnnotationStateArgs {
  */
 export default function useModeManager({
   selectedTrackId,
+  selectedCamera,
   editingTrack,
   trackMap,
-  mediaController,
+  camTrackMap,
+  aggregateController,
   recipes,
   selectTrack,
   selectNextTrack,
@@ -39,13 +41,15 @@ export default function useModeManager({
   removeTrack,
 }: {
   selectedTrackId: Ref<TrackId | null>;
+  selectedCamera: Ref<string>;
   editingTrack: Ref<boolean>;
   trackMap: Map<TrackId, Track>;
-  mediaController: Ref<MediaController>;
+  camTrackMap: Record<string, Map<TrackId, Track>>;
+    aggregateController: Ref<AggregateMediaController>;
   recipes: Recipe[];
   selectTrack: (trackId: TrackId | null, edit: boolean) => void;
   selectNextTrack: (delta?: number) => TrackId | null;
-  addTrack: (frame: number, defaultType: string, afterId?: TrackId) => Track;
+  addTrack: (frame: number, defaultType: string, afterId?: TrackId, cameraName?: string) => Track;
   removeTrack: (trackId: TrackId) => void;
 }) {
   let creating = false;
@@ -76,7 +80,7 @@ export default function useModeManager({
   const editingDetails = computed(() => {
     _depend();
     if (editingMode.value && selectedTrackId.value !== null) {
-      const { frame } = mediaController.value;
+      const { frame } = aggregateController.value;
       const track = trackMap.get(selectedTrackId.value);
       if (track) {
         const [feature] = track.getFeature(frame.value);
@@ -121,11 +125,11 @@ export default function useModeManager({
 
   function seekNearest(track: Track) {
     // Seek to the nearest point in the track.
-    const { frame } = mediaController.value;
+    const { frame } = aggregateController.value;
     if (frame.value < track.begin) {
-      mediaController.value.seek(track.begin);
+      aggregateController.value.seek(track.begin);
     } else if (frame.value > track.end) {
-      mediaController.value.seek(track.end);
+      aggregateController.value.seek(track.end);
     }
   }
 
@@ -183,10 +187,10 @@ export default function useModeManager({
 
   function handleAddTrackOrDetection(): TrackId {
     // Handles adding a new track with the NewTrack Settings
-    const { frame } = mediaController.value;
+    const { frame } = aggregateController.value;
     const newTrackId = addTrack(
       frame.value, trackSettings.value.newTrackSettings.type,
-      selectedTrackId.value || undefined,
+      selectedTrackId.value || undefined, selectedCamera.value,
     ).trackId;
     selectTrack(newTrackId, true);
     creating = true;
@@ -207,7 +211,7 @@ export default function useModeManager({
         if (trackSettings.value.newTrackSettings.mode === 'Track'
         && trackSettings.value.newTrackSettings.modeSettings.Track.autoAdvanceFrame
         ) {
-          mediaController.value.nextFrame();
+          aggregateController.value.nextFrame();
           newCreatingValue = true;
         } else if (trackSettings.value.newTrackSettings.mode === 'Detection') {
           if (
@@ -224,7 +228,10 @@ export default function useModeManager({
 
   function handleUpdateRectBounds(frameNum: number, flickNum: number, bounds: RectBounds) {
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'singleCam') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
       if (track) {
         // Determines if we are creating a new Detection
         const { interpolate } = track.canInterpolate(frameNum);
@@ -270,7 +277,10 @@ export default function useModeManager({
     };
 
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'singleCam') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
       if (track) {
         // newDetectionMode is true if there's no keyframe on frameNum
         const { features, interpolate } = track.canInterpolate(frameNum);
@@ -278,7 +288,8 @@ export default function useModeManager({
 
         // Give each recipe the opportunity to make changes
         recipes.forEach((recipe) => {
-          const changes = recipe.update(eventType, frameNum, track, [data], key);
+          // "as Track" used because TS doesn't know that forEach has the proper track setting
+          const changes = recipe.update(eventType, frameNum, track as Track, [data], key);
           // Prevent key conflicts among recipes
           Object.keys(changes.data).forEach((key_) => {
             if (key_ in update.geoJsonFeatureRecord) {
@@ -365,11 +376,14 @@ export default function useModeManager({
   /* If any recipes are active, allow them to remove a point */
   function handleRemovePoint() {
     if (selectedTrackId.value !== null && selectedFeatureHandle.value !== -1) {
-      const track = trackMap.get(selectedTrackId.value);
-      if (track) {
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'singleCam') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
+      if (track !== undefined) {
         recipes.forEach((r) => {
-          if (r.active.value) {
-            const { frame } = mediaController.value;
+          if (r.active.value && track) {
+            const { frame } = aggregateController.value;
             r.deletePoint(
               frame.value,
               track,
@@ -387,11 +401,14 @@ export default function useModeManager({
   /* If any recipes are active, remove the geometry they added */
   function handleRemoveAnnotation() {
     if (selectedTrackId.value !== null) {
-      const track = trackMap.get(selectedTrackId.value);
-      if (track) {
-        const { frame } = mediaController.value;
+      let track = trackMap.get(selectedTrackId.value);
+      if (selectedCamera.value !== 'singleCam') {
+        track = camTrackMap[selectedCamera.value].get(selectedTrackId.value);
+      }
+      if (track !== undefined) {
+        const { frame } = aggregateController.value;
         recipes.forEach((r) => {
-          if (r.active.value) {
+          if (r.active.value && track) {
             r.delete(frame.value, track, selectedKey.value, annotationModes.editing);
           }
         });
@@ -439,7 +456,10 @@ export default function useModeManager({
 
   /** Toggle editing mode for track */
   function handleTrackEdit(trackId: TrackId) {
-    const track = getTrack(trackMap, trackId);
+    let track = getTrack(trackMap, trackId);
+    if (selectedCamera.value !== 'singleCam') {
+      track = getTrack(camTrackMap[selectedCamera.value], trackId);
+    }
     seekNearest(track);
     const editing = trackId === selectedTrackId.value ? (!editingTrack.value) : true;
     handleSelectTrack(trackId, editing);
diff --git a/client/dive-common/use/useRequest.ts b/client/dive-common/use/useRequest.ts
index ec91c3c81..487151a62 100644
--- a/client/dive-common/use/useRequest.ts
+++ b/client/dive-common/use/useRequest.ts
@@ -1,4 +1,5 @@
 import { reactive, toRefs } from '@vue/composition-api';
+import { AxiosError } from 'axios';
 import { getResponseError } from 'vue-media-annotator/utils';
 
 export default function useRequest() {
@@ -18,7 +19,7 @@ export default function useRequest() {
       return val;
     } catch (err) {
       state.loading = false;
-      state.error = getResponseError(err);
+      state.error = getResponseError(err as AxiosError);
       throw err;
     }
   }
diff --git a/client/src/components/LayerManager.vue b/client/src/components/LayerManager.vue
index f9855efee..0601467bf 100644
--- a/client/src/components/LayerManager.vue
+++ b/client/src/components/LayerManager.vue
@@ -4,7 +4,7 @@ import {
 } from '@vue/composition-api';
 
 import { TrackWithContext } from '../use/useTrackFilters';
-import { injectMediaController } from './annotators/useMediaController';
+import { injectAggregateController } from './annotators/useMediaController';
 import RectangleLayer from '../layers/AnnotationLayers/RectangleLayer';
 import PolygonLayer from '../layers/AnnotationLayers/PolygonLayer';
 import PointLayer from '../layers/AnnotationLayers/PointLayer';
@@ -33,6 +33,8 @@ import {
   useStateStyles,
   useMergeList,
   useAnnotatorPreferences,
+  useCamTrackMap,
+  useSelectedCamera,
 } from '../provides';
 
 /** LayerManager is a component intended to be used as a child of an Annotator.
@@ -46,11 +48,20 @@ export default defineComponent({
       type: Function as PropType<FormatTextRow | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String,
+      default: 'singleCam',
+    },
   },
   setup(props) {
     const handler = useHandler();
     const intervalTree = useIntervalTree();
-    const trackMap = useTrackMap();
+    const camTrackMap = useCamTrackMap();
+    const selectedCamera = useSelectedCamera();
+    let trackMap = useTrackMap();
+    if (props.camera !== 'singleCam' && camTrackMap[props.camera] !== undefined) {
+      trackMap = camTrackMap[props.camera];
+    }
     const enabledTracksRef = useEnabledTracks();
     const selectedTrackIdRef = useSelectedTrackId();
     const mergeListRef = useMergeList();
@@ -61,7 +72,7 @@ export default defineComponent({
     const stateStyling = useStateStyles();
     const annotatorPrefs = useAnnotatorPreferences();
 
-    const annotator = injectMediaController();
+    const annotator = injectAggregateController().value.getController(props.camera);
     const frameNumberRef = annotator.frame;
     const flickNumberRef = annotator.flick;
 
@@ -141,7 +152,9 @@ export default defineComponent({
         (trackId: TrackId) => {
           const track = trackMap.get(trackId);
           if (track === undefined) {
-            throw new Error(`TrackID ${trackId} not found in map`);
+            // Track may be located in another Camera
+            // TODO: Find a better way to represent tracks outside of cameras
+            return;
           }
           const enabledIndex = enabledTracks.findIndex(
             (trackWithContext) => trackWithContext.track.trackId === trackId,
@@ -161,7 +174,8 @@ export default defineComponent({
             };
             frameData.push(trackFrame);
             if (trackFrame.selected) {
-              if (editingTrack) {
+              //Only edit current camera tracks
+              if (editingTrack && props.camera === selectedCamera.value) {
                 editingTracks.push(trackFrame);
               }
               if (annotator.lockedCamera.value) {
diff --git a/client/src/components/annotators/ImageAnnotator.vue b/client/src/components/annotators/ImageAnnotator.vue
index cdde8cd05..6e8dc6017 100644
--- a/client/src/components/annotators/ImageAnnotator.vue
+++ b/client/src/components/annotators/ImageAnnotator.vue
@@ -3,7 +3,7 @@ import {
   defineComponent, ref, onUnmounted, PropType, toRef, watch,
 } from '@vue/composition-api';
 import { SetTimeFunc } from '../../use/useTimeObserver';
-import useMediaController from './useMediaController';
+import { injectCameraInitializer } from './useMediaController';
 
 export interface ImageDataItem {
   url: string;
@@ -47,13 +47,29 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String as PropType<string>,
+      default: 'singleCam',
+    },
   },
 
   setup(props) {
     const loadingVideo = ref(false);
     const loadingImage = ref(true);
-    const commonMedia = useMediaController();
-    const { data } = commonMedia;
+    const cameraInitializer = injectCameraInitializer();
+    const {
+      state: data,
+      geoViewer,
+      cursorHandler,
+      imageCursor,
+      container,
+      initializeViewer,
+      mediaController,
+    } = cameraInitializer(props.camera, {
+      // allow hoisting for these functions to pass a reference before defining them.
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      seek, pause, play, setVolume: unimplemented, setSpeed: unimplemented,
+    });
     data.maxFrame = props.imageData.length - 1;
     // Below are configuration settings we can set until we decide on good numbers to utilize.
     let local = {
@@ -114,7 +130,7 @@ export default defineComponent({
          */
         local.width = img.naturalWidth;
         local.height = img.naturalHeight;
-        commonMedia.resetMapDimensions(local.width, local.height);
+        mediaController.resetMapDimensions(local.width, local.height);
       }
       local.quadFeature
         .data([
@@ -305,18 +321,6 @@ export default defineComponent({
       throw new Error('Method unimplemented!');
     }
 
-    const {
-      cursorHandler,
-      initializeViewer,
-      mediaController,
-    } = commonMedia.initialize({
-      seek,
-      play,
-      pause,
-      setVolume: unimplemented,
-      setSpeed: unimplemented,
-    });
-
     const setBrightnessFilter = (on: boolean) => {
       if (local.quadFeature !== undefined) {
         local.quadFeature.layer().node().css('filter', on ? 'url(#brightness)' : '');
@@ -327,7 +331,7 @@ export default defineComponent({
       const imgInternal = cacheFrame(0);
       imgInternal.onloadPromise.then(() => {
         initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-        const quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+        const quadFeatureLayer = geoViewer.value.createLayer('feature', {
           features: ['quad'],
           autoshareRenderer: false,
         });
@@ -360,7 +364,7 @@ export default defineComponent({
         const imgInternal = cacheFrame(0);
         imgInternal.onloadPromise.then(() => {
           initializeViewer(imgInternal.image.naturalWidth, imgInternal.image.naturalHeight);
-          const quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+          const quadFeatureLayer = geoViewer.value.createLayer('feature', {
             features: ['quad'],
             autoshareRenderer: false,
           });
@@ -392,11 +396,9 @@ export default defineComponent({
       data,
       loadingVideo,
       loadingImage,
-      imageCursorRef: commonMedia.imageCursorRef,
-      containerRef: commonMedia.containerRef,
-      onResize: commonMedia.onResize,
+      imageCursorRef: imageCursor,
+      containerRef: container,
       cursorHandler,
-      mediaController,
     };
   },
 });
@@ -455,11 +457,6 @@ export default defineComponent({
         </v-progress-circular>
       </div>
     </div>
-    <slot
-      ref="control"
-      name="control"
-      @resize="onResize"
-    />
     <slot v-if="data.ready" />
   </div>
 </template>
diff --git a/client/src/components/annotators/VideoAnnotator.vue b/client/src/components/annotators/VideoAnnotator.vue
index e15118cc0..e8862751a 100644
--- a/client/src/components/annotators/VideoAnnotator.vue
+++ b/client/src/components/annotators/VideoAnnotator.vue
@@ -4,7 +4,7 @@ import {
 } from '@vue/composition-api';
 
 import { Flick, SetTimeFunc } from '../../use/useTimeObserver';
-import useMediaController from './useMediaController';
+import { injectCameraInitializer } from './useMediaController';
 
 /**
  * For MPEG codecs, the PTS (Presentation Timestamp)
@@ -98,11 +98,27 @@ export default defineComponent({
       type: Number as PropType<number | undefined>,
       default: undefined,
     },
+    camera: {
+      type: String as PropType<string>,
+      default: 'singleCam',
+    },
   },
 
   setup(props) {
-    const commonMedia = useMediaController();
-    const { data } = commonMedia;
+    const cameraInitializer = injectCameraInitializer();
+    const {
+      state: data,
+      geoViewer,
+      cursorHandler,
+      imageCursor,
+      container,
+      initializeViewer,
+      mediaController,
+    } = cameraInitializer(props.camera, {
+      // allow hoisting for these functions.
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      seek, pause, play, setVolume, setSpeed,
+    });
 
     function makeVideo() {
       const video = document.createElement('video');
@@ -154,7 +170,7 @@ export default defineComponent({
         data.frame = Math.floor(newFrame);
         data.flick = Math.round(video.currentTime * Flick);
         data.syncedFrame = data.frame;
-        commonMedia.geoViewerRef.value.scheduleAnimationFrame(syncWithVideo);
+        geoViewer.value.scheduleAnimationFrame(syncWithVideo);
       }
       data.currentTime = video.currentTime;
     }
@@ -183,14 +199,6 @@ export default defineComponent({
       data.speed = video.playbackRate;
     }
 
-    const {
-      cursorHandler,
-      initializeViewer,
-      mediaController,
-    } = commonMedia.initialize({
-      seek, play, pause, setVolume, setSpeed,
-    });
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let quadFeatureLayer = undefined as any;
     const setBrightnessFilter = (on: boolean) => {
@@ -223,7 +231,7 @@ export default defineComponent({
         data.maxFrame = maybeMaxFrame;
       }
       initializeViewer(width, height);
-      quadFeatureLayer = commonMedia.geoViewerRef.value.createLayer('feature', {
+      quadFeatureLayer = geoViewer.value.createLayer('feature', {
         features: ['quad.video'],
         autoshareRenderer: false,
       });
@@ -268,9 +276,8 @@ export default defineComponent({
 
     return {
       data,
-      imageCursorRef: commonMedia.imageCursorRef,
-      containerRef: commonMedia.containerRef,
-      onResize: commonMedia.onResize,
+      imageCursorRef: imageCursor,
+      containerRef: container,
       cursorHandler,
       mediaController,
     };
@@ -280,7 +287,6 @@ export default defineComponent({
 
 <template>
   <div
-    v-resize="onResize"
     class="video-annotator"
     :style="{ cursor: data.cursor }"
   >
diff --git a/client/src/components/annotators/annotator.scss b/client/src/components/annotators/annotator.scss
index a567725e2..ac5879834 100644
--- a/client/src/components/annotators/annotator.scss
+++ b/client/src/components/annotators/annotator.scss
@@ -1,5 +1,10 @@
-.video-annotator {
+
+.controls {
   position: absolute;
+}
+
+.video-annotator {
+  position: relative;
   left: 0;
   right: 0;
   top: 0;
@@ -8,13 +13,17 @@
 
   display: flex;
   flex-direction: column;
+  .geojs-map {
+    margin:2px;
+    &.geojs-map:focus {
+      outline: none;
+    }  
+  }
 
   .playback-container {
     flex: 1;
 
-    &.geojs-map:focus {
-      outline: none;
-    }
+  
   }
   .loadingSpinnerContainer {
     z-index: 1;
@@ -29,6 +38,18 @@
     cursor: inherit;
   }
 }
+
+.selected-camera{
+  box-sizing: content-box;
+  .geojs-map {
+    outline: 3px cyan dashed;
+    &.geojs-map:focus {
+      outline: 3px cyan dashed;
+    }  
+  }
+
+}
+
 .imageCursor {
   z-index: 10; //So it will be above the annotator layers
   position: fixed;
@@ -37,4 +58,7 @@
   left: 0;
   pointer-events: none;
 }
+.controls {
+  bottom:0;
+}
 
diff --git a/client/src/components/annotators/mediaControllerType.ts b/client/src/components/annotators/mediaControllerType.ts
index 2a081b920..2e76670f9 100644
--- a/client/src/components/annotators/mediaControllerType.ts
+++ b/client/src/components/annotators/mediaControllerType.ts
@@ -1,36 +1,49 @@
 import type { Ref } from '@vue/composition-api';
 
 /**
- * MediaController provides an interface for time and a few
- * other properties of the annotator window.
+ * AggregateMediaController provides an interface for time and a few
+ * other properties of all cameras in the annotator window.
  *
  * See components/annotators/README.md for docs.
  */
-export interface MediaController {
+export interface AggregateMediaController {
   currentTime: Readonly<Ref<number>>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  geoViewerRef: Readonly<Ref<any>>;
-  playing: Readonly<Ref<boolean>>;
   frame: Readonly<Ref<number>>;
-  flick: Readonly<Ref<number>>;
-  filename: Readonly<Ref<string>>;
   lockedCamera: Readonly<Ref<boolean>>;
-  duration: Readonly<Ref<number>>;
-  volume: Readonly<Ref<number>>;
-  speed: Readonly<Ref<number>>;
   maxFrame: Readonly<Ref<number>>;
+  playing: Readonly<Ref<boolean>>;
+  speed: Readonly<Ref<number>>;
+  volume: Readonly<Ref<number>>;
+  cameras: Readonly<Ref<string[]>>;
+
+  pause: () => void;
+  play: () => void;
+  resetZoom: () => void;
+  seek: (frame: number) => void;
+  nextFrame: () => void;
+  prevFrame: () => void;
+  setVolume: (volume: number) => void;
+  setSpeed: (speed: number) => void;
+  toggleLockedCamera: (lock: boolean) => void;
+  getController: (cameraName: string) => MediaController;
+}
+
+/**
+ * MediaController provides some additional camera-specific
+ * functions to control an individual camera
+ */
+export interface MediaController extends AggregateMediaController {
+  cameraName: Readonly<Ref<string>>;
+  duration: Readonly<Ref<number>>;
+  filename: Readonly<Ref<string>>;
+  flick: Readonly<Ref<number>>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: Readonly<Ref<any>>;
   /** @deprecated may be removed in a future release */
   syncedFrame: Readonly<Ref<number>>;
-  prevFrame(): void;
-  nextFrame(): void;
-  play(): void;
-  pause(): void;
-  seek(frame: number): void;
-  resetZoom(): void;
-  toggleLockedCamera(): void;
-  centerOn(coords: {x: number; y: number; z: number }): void;
-  setCursor(c: string): void;
-  setImageCursor(c: string): void;
-  setVolume(v: number): void;
-  setSpeed(v: number): void;
+
+  centerOn(coords: { x: number; y: number; z: number }): void;
+  setCursor(camera: string): void;
+  setImageCursor(camera: string): void;
+  resetMapDimensions(width: number, height: number, margin?: number): void;
 }
diff --git a/client/src/components/annotators/useMediaController.ts b/client/src/components/annotators/useMediaController.ts
index 323fba3d9..19b7e7f72 100644
--- a/client/src/components/annotators/useMediaController.ts
+++ b/client/src/components/annotators/useMediaController.ts
@@ -2,127 +2,143 @@
 /// <reference types="resize-observer-browser" />
 import geo from 'geojs';
 import {
-  ref, reactive, onMounted, onBeforeUnmount, provide, toRef, Ref,
+  ref, reactive, provide, toRef, Ref, UnwrapRef, computed,
 } from '@vue/composition-api';
+import { map, over } from 'lodash';
 
 import { use } from '../../provides';
-import type { MediaController } from './mediaControllerType';
+import type { AggregateMediaController, MediaController } from './mediaControllerType';
 
-const MediaControllerSymbol = Symbol('media-controller');
+const AggregateControllerSymbol = Symbol('aggregate-controller');
+const CameraInitializerSymbol = Symbol('camera-initializer');
 
-export function injectMediaController() {
-  return use<MediaController>(MediaControllerSymbol);
+interface MediaControllerReactiveData {
+  cameraName: string;
+  ready: boolean;
+  playing: boolean;
+  frame: number;
+  flick: number;
+  filename: string;
+  lockedCamera: boolean;
+  currentTime: number;
+  duration: number;
+  volume: number;
+  speed: number;
+  maxFrame: number;
+  syncedFrame: number;
+  cursor: string;
+  imageCursor: string;
+  originalBounds: {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+  };
 }
 
-export default function useMediaController() {
+interface CameraInitializerReturn {
+  state: UnwrapRef<MediaControllerReactiveData>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const geoViewerRef: Ref<any> = ref(undefined);
-  const containerRef: Ref<HTMLElement | undefined> = ref(undefined);
-  const imageCursorRef: Ref<HTMLElement | undefined> = ref(undefined);
-
-  const data = reactive({
-    ready: false,
-    playing: false,
-    frame: 0,
-    flick: 0,
-    filename: '',
-    lockedCamera: false,
-    currentTime: 0,
-    duration: 0,
-    volume: 0,
-    speed: 1.0,
-    maxFrame: 0,
-    syncedFrame: 0,
-    observer: null,
-    cursor: 'default',
-    imageCursor: '',
-    originalBounds: {
-      left: 0,
-      top: 0,
-      bottom: 1,
-      right: 1,
-    },
-  });
+  geoViewer: Ref<any>;
+  container: Ref<HTMLElement | undefined>;
+  imageCursor: Ref<HTMLElement | undefined>;
+  cursorHandler: {
+    handleMouseLeave: () => void;
+    handleMouseEnter: () => void;
+    handleMouseMove: (evt: MouseEvent) => void;
+  };
+  initializeViewer: (width: number, height: number) => void;
+  mediaController: MediaController;
+}
 
-  function onResize() {
-    if (geoViewerRef.value === undefined || containerRef.value === undefined) {
-      return;
+type CameraInitializerFunc = (cameraName: string, {
+  seek, play, pause, setVolume, setSpeed,
+}: {
+  seek(frame: number): void;
+  play(): void;
+  pause(): void;
+  setVolume(level: number): void;
+  setSpeed(level: number): void;
+}) => CameraInitializerReturn;
+
+export function injectAggregateController() {
+  return use<Ref<AggregateMediaController>>(AggregateControllerSymbol);
+}
+
+export function injectCameraInitializer() {
+  return use<CameraInitializerFunc>(CameraInitializerSymbol);
+}
+
+export function useMediaController() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let geoViewers: Record<string, Ref<any>> = {};
+  let containers: Record<string, Ref<HTMLElement | undefined>> = {};
+  let imageCursors: Record<string, Ref<HTMLElement | undefined>> = {};
+  const cameras: Ref<symbol[]> = ref([]);
+  let subControllers: MediaController[] = [];
+  let state: Record<string, UnwrapRef<MediaControllerReactiveData>> = {};
+  let cameraControllerSymbols: Record<string, symbol> = {};
+
+  function clear() {
+    geoViewers = {};
+    containers = {};
+    imageCursors = {};
+    cameras.value = [];
+    subControllers = [];
+    state = {};
+    cameraControllerSymbols = {};
+  }
+
+  function getController(camera?: string) {
+    if (cameras.value.length === 0) {
+      throw new Error('no camera controllers currently exist');
     }
-    const size = containerRef.value.getBoundingClientRect();
-    const mapSize = geoViewerRef.value.size();
-    if (size.width !== mapSize.width || size.height !== mapSize.height) {
-      window.requestAnimationFrame(() => {
-        geoViewerRef.value.size(size);
-      });
+    if (camera === undefined) {
+      return subControllers[0];
+    }
+    const found = subControllers.find((c) => c.cameraName.value === camera);
+    if (!found) {
+      throw new Error('no controller found for that camera');
     }
+    return found;
   }
 
-  function resetZoom() {
-    const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
-      data.originalBounds, 0,
-    );
-    geoViewerRef.value.zoom(zoomAndCenter.zoom);
-    geoViewerRef.value.center(zoomAndCenter.center);
+  /**
+   * onResize resets the zoom of a camera when its window size changes.
+   */
+  function onResize() {
+    subControllers.forEach((mc) => {
+      const camera = cameraControllerSymbols[mc.cameraName.value].toString();
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      if (geoViewerRef.value === undefined || containerRef.value === undefined) {
+        return;
+      }
+      const size = containerRef.value.getBoundingClientRect();
+      const mapSize = geoViewerRef.value.size();
+      if (size.width !== mapSize.width || size.height !== mapSize.height) {
+        window.requestAnimationFrame(() => {
+          geoViewerRef.value.size(size);
+          mc.resetZoom();
+        });
+      }
+    });
   }
 
   function toggleLockedCamera() {
-    data.lockedCamera = !data.lockedCamera;
-  }
-
-  function resetMapDimensions(width: number, height: number, margin = 0.3) {
-    geoViewerRef.value.bounds({
-      left: 0,
-      top: 0,
-      bottom: height,
-      right: width,
-    });
-    const params = geo.util.pixelCoordinateParams(
-      containerRef.value, width, height, width, height,
-    );
-    const { right, bottom } = params.map.maxBounds;
-    data.originalBounds = params.map.maxBounds;
-    geoViewerRef.value.maxBounds({
-      left: 0 - (right * margin),
-      top: 0 - (bottom * margin),
-      right: right * (1 + margin),
-      bottom: bottom * (1 + margin),
-    });
-    geoViewerRef.value.zoomRange({
-      // do not set a min limit so that bounds clamping determines min
-      min: -Infinity,
-      // 4x zoom max
-      max: 4,
+    cameras.value.forEach((camera) => {
+      const data = state[camera.toString()];
+      data.lockedCamera = !data.lockedCamera;
     });
-    geoViewerRef.value.clampBoundsX(true);
-    geoViewerRef.value.clampBoundsY(true);
-    geoViewerRef.value.clampZoom(true);
-    resetZoom();
   }
 
-  let observer: ResizeObserver | null = null;
-  onMounted(() => {
-    if (containerRef.value) {
-      observer = new ResizeObserver(onResize);
-      observer.observe(containerRef.value);
-    } else {
-      throw new Error('Container was missing, could not register observer');
-    }
-  });
-  onBeforeUnmount(() => {
-    if (containerRef.value && observer !== null) {
-      observer.unobserve(containerRef.value);
-    } else {
-      throw new Error('Container or observer was missing');
-    }
-  });
-
   /**
    * This secondary initialization wrapper solves a sort of
    * chicken-and-egg problem, allowing the function consumer to use
    * the state above to construct the dependencies for the methods below.
    */
-  function initialize({
-    seek, play, pause, setVolume, setSpeed,
+  function initialize(cameraName: string, {
+    seek: _seek, play: _play, pause: _pause, setVolume: _setVolume, setSpeed: _setSpeed,
   }: {
     seek(frame: number): void;
     play(): void;
@@ -130,25 +146,99 @@ export default function useMediaController() {
     setVolume(level: number): void;
     setSpeed(level: number): void;
   }) {
+    const cameraSymbol = Symbol(`media-controller-${cameraName}`);
+    cameraControllerSymbols[cameraName] = cameraSymbol;
+    const camera = cameraSymbol.toString();
+    geoViewers[camera] = ref(undefined);
+    containers[camera] = ref(undefined);
+    imageCursors[camera] = ref(undefined);
+
+    state[camera] = reactive({
+      cameraName,
+      ready: false,
+      playing: false,
+      frame: 0,
+      flick: 0,
+      filename: '',
+      lockedCamera: false,
+      currentTime: 0,
+      duration: 0,
+      volume: 0,
+      speed: 1.0,
+      maxFrame: 0,
+      syncedFrame: 0,
+      cursor: 'default',
+      imageCursor: '',
+      originalBounds: {
+        left: 0,
+        top: 0,
+        bottom: 1,
+        right: 1,
+      },
+    });
+
     function setCursor(newCursor: string) {
-      data.cursor = `${newCursor}`;
+      state[camera].cursor = `${newCursor}`;
     }
 
     function setImageCursor(newCursor: string) {
-      data.imageCursor = `${newCursor}`;
+      state[camera].imageCursor = `${newCursor}`;
     }
 
     function centerOn(coords: { x: number; y: number; z: number }) {
-      geoViewerRef.value.center(coords);
+      geoViewers[camera].value.center(coords);
     }
 
-    function initializeViewer(width: number, height: number) {
+    function resetZoom() {
+      const geoViewerRef = geoViewers[camera];
+      const data = state[camera];
+      const zoomAndCenter = geoViewerRef.value.zoomAndCenterFromBounds(
+        data.originalBounds, 0,
+      );
+      geoViewerRef.value.zoom(zoomAndCenter.zoom);
+      geoViewerRef.value.center(zoomAndCenter.center);
+    }
+
+    function resetMapDimensions(width: number, height: number, margin = 0.3) {
+      const geoViewerRef = geoViewers[camera];
+      const containerRef = containers[camera];
+      const data = state[camera];
+      geoViewerRef.value.bounds({
+        left: 0,
+        top: 0,
+        bottom: height,
+        right: width,
+      });
       const params = geo.util.pixelCoordinateParams(
         containerRef.value, width, height, width, height,
       );
-      geoViewerRef.value = geo.map(params.map);
+      const { right, bottom } = params.map.maxBounds;
+      data.originalBounds = params.map.maxBounds;
+      geoViewerRef.value.maxBounds({
+        left: 0 - (right * margin),
+        top: 0 - (bottom * margin),
+        right: right * (1 + margin),
+        bottom: bottom * (1 + margin),
+      });
+      geoViewerRef.value.zoomRange({
+        // do not set a min limit so that bounds clamping determines min
+        min: -Infinity,
+        // 4x zoom max
+        max: 4,
+      });
+      geoViewerRef.value.clampBoundsX(true);
+      geoViewerRef.value.clampBoundsY(true);
+      geoViewerRef.value.clampZoom(true);
+      resetZoom();
+    }
+
+    function initializeViewer(width: number, height: number) {
+      const params = geo.util.pixelCoordinateParams(
+        containers[camera].value, width, height, width, height,
+      );
+      geoViewers[camera].value = geo.map(params.map);
       resetMapDimensions(width, height);
-      const interactorOpts = geoViewerRef.value.interactor().options();
+      const interactorOpts = geoViewers[camera].value.interactor().options();
       interactorOpts.keyboard.focusHighlight = false;
       interactorOpts.keyboard.actions = {};
       interactorOpts.click.cancelOnMove = 5;
@@ -188,23 +278,25 @@ export default function useMediaController() {
         enabled: false,
       };
       interactorOpts.wheelScaleY = 0.2;
-      geoViewerRef.value.interactor().options(interactorOpts);
+      geoViewers[camera].value.interactor().options(interactorOpts);
     }
 
     function prevFrame() {
-      const targetFrame = data.frame - 1;
+      const targetFrame = state[camera].frame - 1;
       if (targetFrame >= 0) {
-        seek(targetFrame);
+        _seek(targetFrame);
       }
     }
 
     function nextFrame() {
-      const targetFrame = data.frame + 1;
-      if (targetFrame <= data.maxFrame) {
-        seek(targetFrame);
+      const targetFrame = state[camera].frame + 1;
+      if (targetFrame <= state[camera].maxFrame) {
+        _seek(targetFrame);
       }
     }
 
+    const imageCursorRef = imageCursors[camera];
+
     const cursorHandler = {
       handleMouseLeave() {
         if (imageCursorRef.value) {
@@ -228,48 +320,85 @@ export default function useMediaController() {
     };
 
     const mediaController: MediaController = {
-      geoViewerRef,
-      currentTime: toRef(data, 'currentTime'),
-      playing: toRef(data, 'playing'),
-      frame: toRef(data, 'frame'),
-      flick: toRef(data, 'flick'),
-      filename: toRef(data, 'filename'),
-      lockedCamera: toRef(data, 'lockedCamera'),
-      duration: toRef(data, 'duration'),
-      volume: toRef(data, 'volume'),
-      maxFrame: toRef(data, 'maxFrame'),
-      speed: toRef(data, 'speed'),
-      syncedFrame: toRef(data, 'syncedFrame'),
+      geoViewerRef: geoViewers[camera],
+      cameraName: toRef(state[camera], 'cameraName'),
+      cameras: ref([]),
+      currentTime: toRef(state[camera], 'currentTime'),
+      playing: toRef(state[camera], 'playing'),
+      frame: toRef(state[camera], 'frame'),
+      flick: toRef(state[camera], 'flick'),
+      filename: toRef(state[camera], 'filename'),
+      lockedCamera: toRef(state[camera], 'lockedCamera'),
+      duration: toRef(state[camera], 'duration'),
+      volume: toRef(state[camera], 'volume'),
+      maxFrame: toRef(state[camera], 'maxFrame'),
+      speed: toRef(state[camera], 'speed'),
+      syncedFrame: toRef(state[camera], 'syncedFrame'),
       prevFrame,
       nextFrame,
-      play,
-      pause,
-      seek,
+      play: _play,
+      pause: _pause,
+      seek: _seek,
       resetZoom,
       toggleLockedCamera,
       centerOn,
       setCursor,
       setImageCursor,
-      setVolume,
-      setSpeed,
+      setVolume: _setVolume,
+      setSpeed: _setSpeed,
+      getController,
+      resetMapDimensions,
     };
 
-    provide(MediaControllerSymbol, mediaController);
+    subControllers.push(mediaController);
+    cameras.value.push(cameraSymbol);
 
     return {
+      state: state[camera],
+      geoViewer: geoViewers[camera],
+      container: containers[camera],
+      imageCursor: imageCursors[camera],
       cursorHandler,
       initializeViewer,
       mediaController,
     };
   }
 
+  const aggregateController: Ref<AggregateMediaController> = computed(() => {
+    const defaultController = getController();
+    return {
+      cameras: computed(() => cameras.value.map((v) => String(v))),
+      maxFrame: defaultController.maxFrame,
+      frame: defaultController.frame,
+      seek: over(map(subControllers, 'seek')),
+      nextFrame: over(map(subControllers, 'nextFrame')),
+      prevFrame: over(map(subControllers, 'prevFrame')),
+      volume: defaultController.volume,
+      setVolume: over(map(subControllers, 'setVolume')),
+      speed: defaultController.speed,
+      setSpeed: over(map(subControllers, 'setSpeed')),
+      lockedCamera: defaultController.lockedCamera,
+      toggleLockedCamera: over(map(subControllers, 'toggleLockedCamera')),
+      pause: over(map(subControllers, 'pause')),
+      play: over(map(subControllers, 'play')),
+      playing: defaultController.playing,
+      resetZoom: over(map(subControllers, 'resetZoom')),
+      currentTime: defaultController.currentTime,
+      getController,
+    };
+  });
+
+  provide(AggregateControllerSymbol, aggregateController as Ref<AggregateMediaController>);
+  provide(CameraInitializerSymbol, initialize as CameraInitializerFunc);
+
   return {
-    containerRef,
-    data,
-    geoViewerRef,
-    imageCursorRef,
+    aggregateController,
+    containers,
+    state,
+    geoViewers,
+    imageCursors,
     initialize,
     onResize,
-    resetMapDimensions,
+    clear,
   };
 }
diff --git a/client/src/components/controls/Controls.vue b/client/src/components/controls/Controls.vue
index aa0ed6d42..e93ba2257 100644
--- a/client/src/components/controls/Controls.vue
+++ b/client/src/components/controls/Controls.vue
@@ -1,7 +1,9 @@
 <script lang="ts">
-import { defineComponent, reactive, watch } from '@vue/composition-api';
+import {
+  defineComponent, reactive, watch,
+} from '@vue/composition-api';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
-import { injectMediaController } from '../annotators/useMediaController';
+import { injectAggregateController } from '../annotators/useMediaController';
 
 export default defineComponent({
   name: 'Control',
@@ -12,9 +14,8 @@ export default defineComponent({
       dragging: false,
     });
 
-    const mediaController = injectMediaController();
+    const mediaController = injectAggregateController().value;
     const { visible } = usePrompt();
-
     watch(mediaController.frame, (frame) => {
       if (!data.dragging) {
         data.frame = frame;
@@ -63,7 +64,10 @@ export default defineComponent({
       { bind: 'd', handler: mediaController.prevFrame, disabled: visible() },
     ]"
   >
-    <v-card class="px-4 py-1">
+    <v-card
+      class="px-4 py-1"
+      tile
+    >
       <v-slider
         hide-details
         :min="0"
diff --git a/client/src/components/controls/FileNameTimeDisplay.vue b/client/src/components/controls/FileNameTimeDisplay.vue
index 78b853c5b..1a0ea951f 100644
--- a/client/src/components/controls/FileNameTimeDisplay.vue
+++ b/client/src/components/controls/FileNameTimeDisplay.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from '@vue/composition-api';
-import { injectMediaController } from '../annotators/useMediaController';
+import { useSelectedCamera } from '../../provides';
+import { injectAggregateController } from '../annotators/useMediaController';
 
 export default defineComponent({
   name: 'FileNameTimeDisplay',
@@ -11,15 +12,24 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      currentTime, duration, filename, frame,
-    } = injectMediaController();
+    const mediaController = injectAggregateController();
+    const { currentTime, frame } = mediaController.value;
+    const selectedCamera = useSelectedCamera();
+    const selectedCameraController = computed(() => {
+      try {
+        return mediaController.value.getController(selectedCamera.value);
+      } catch {
+        return undefined;
+      }
+    });
+    const filename = computed(() => (selectedCameraController.value?.filename.value));
+    const duration = computed(() => (selectedCameraController.value?.duration.value));
     const display = computed(() => {
       let value = 'unsupported display';
       if (props.displayType === 'filename') {
-        value = filename.value;
+        value = filename.value || 'uninitialized';
       } if (props.displayType === 'time') {
-        value = `${new Date(currentTime.value * 1000).toISOString().substr(11, 8)} / ${new Date(duration.value * 1000).toISOString().substr(11, 8)}`;
+        value = `${new Date(currentTime.value * 1000).toISOString().substr(11, 8)} / ${new Date((duration.value || 0) * 1000).toISOString().substr(11, 8)}`;
       }
       return value;
     });
@@ -27,6 +37,7 @@ export default defineComponent({
       display,
       frame,
       currentTime,
+      selectedCamera,
     };
   },
 });
diff --git a/client/src/provides.ts b/client/src/provides.ts
index 9a208bb90..bdc47a75c 100644
--- a/client/src/provides.ts
+++ b/client/src/provides.ts
@@ -60,6 +60,9 @@ type IntervalTreeType = Readonly<IntervalTree>;
 const TrackMapSymbol = Symbol('trackMap');
 type TrackMapType = Readonly<Map<TrackId, Track>>;
 
+const CamTrackMapSymbol = Symbol('camTrackMap');
+type CamTrackMapType = Readonly<Record<string, Map<TrackId, Track>>>;
+
 const TracksSymbol = Symbol('tracks');
 type FilteredTracksType = Readonly<Ref<readonly TrackWithContext[]>>;
 
@@ -72,6 +75,9 @@ type SelectedKeyType = Readonly<Ref<string>>;
 const SelectedTrackIdSymbol = Symbol('selectedTrackId');
 type SelectedTrackIdType = Readonly<Ref<TrackId | null>>;
 
+const SelectedCameraSymbol = Symbol('selectedCamera');
+type SelectedCameraType = Readonly<Ref<string>>;
+
 const StateStylesSymbol = Symbol('stateStyles');
 type StateStylesType = Readonly<StateStyles>;
 
@@ -219,9 +225,11 @@ export interface State {
   mergeList: MergeList;
   pendingSaveCount: pendingSaveCountType;
   trackMap: TrackMapType;
+  camTrackMap: CamTrackMapType;
   typeStyling: TypeStylingType;
   selectedKey: SelectedKeyType;
   selectedTrackId: SelectedTrackIdType;
+  selectedCamera: SelectedCameraType;
   stateStyles: StateStylesType;
   time: TimeType;
   visibleModes: VisibleModesType;
@@ -256,6 +264,7 @@ function dummyState(): State {
     mergeList: ref([]),
     pendingSaveCount: ref(0),
     trackMap: new Map<TrackId, Track>(),
+    camTrackMap: { default: new Map<TrackId, Track>() },
     typeStyling: ref({
       color() { return style.color; },
       strokeWidth() { return style.strokeWidth; },
@@ -267,6 +276,7 @@ function dummyState(): State {
     }),
     selectedKey: ref(''),
     selectedTrackId: ref(null),
+    selectedCamera: ref('singleCam'),
     stateStyles: {
       disabled: style,
       selected: style,
@@ -305,10 +315,12 @@ function provideAnnotator(state: State, handler: Handler) {
   provide(MergeListSymbol, state.mergeList);
   provide(PendingSaveCountSymbol, state.pendingSaveCount);
   provide(TrackMapSymbol, state.trackMap);
+  provide(CamTrackMapSymbol, state.camTrackMap);
   provide(TracksSymbol, state.filteredTracks);
   provide(TypeStylingSymbol, state.typeStyling);
   provide(SelectedKeySymbol, state.selectedKey);
   provide(SelectedTrackIdSymbol, state.selectedTrackId);
+  provide(SelectedCameraSymbol, state.selectedCamera);
   provide(StateStylesSymbol, state.stateStyles);
   provide(TimeSymbol, state.time);
   provide(VisibleModesSymbol, state.visibleModes);
@@ -384,6 +396,9 @@ function usePendingSaveCount() {
 function useTrackMap() {
   return use<TrackMapType>(TrackMapSymbol);
 }
+function useCamTrackMap() {
+  return use<CamTrackMapType>(CamTrackMapSymbol);
+}
 
 function useFilteredTracks() {
   return use<FilteredTracksType>(TracksSymbol);
@@ -401,6 +416,10 @@ function useSelectedTrackId() {
   return use<SelectedTrackIdType>(SelectedTrackIdSymbol);
 }
 
+function useSelectedCamera() {
+  return use<SelectedCameraType>(SelectedCameraSymbol);
+}
+
 function useStateStyles() {
   return use<StateStylesType>(StateStylesSymbol);
 }
@@ -433,10 +452,12 @@ export {
   useMergeList,
   usePendingSaveCount,
   useTrackMap,
+  useCamTrackMap,
   useFilteredTracks,
   useTypeStyling,
   useSelectedKey,
   useSelectedTrackId,
+  useSelectedCamera,
   useStateStyles,
   useTime,
   useVisibleModes,
diff --git a/client/src/use/useTrackStore.ts b/client/src/use/useTrackStore.ts
index a47062e74..a316e246f 100644
--- a/client/src/use/useTrackStore.ts
+++ b/client/src/use/useTrackStore.ts
@@ -17,6 +17,7 @@ interface UseTrackStoreParams {
 interface InsertArgs {
   imported?: boolean;
   afterId?: TrackId;
+  cameraName?: string;
 }
 
 export function getTrack(
@@ -57,6 +58,9 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
   const trackIds: Ref<Array<TrackId>> = ref([]);
   const canary = ref(0);
 
+  // Multi-Camera Support
+  const camTrackMap: Record<string, Map<TrackId, Track>> = { default: new Map<TrackId, Track>() };
+  // internval Tree should be the same because all overlapping tracks have the same Id and length
 
   function _depend(): number {
     return canary.value;
@@ -82,15 +86,27 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     markChangesPending({ action: 'upsert', track });
   }
 
+  function addCamera(cameraName: string) {
+    if (camTrackMap[cameraName] === undefined) {
+      camTrackMap[cameraName] = new Map<TrackId, Track>();
+    }
+  }
+
   function insertTrack(track: Track, args?: InsertArgs) {
     track.setNotifier(onChange);
+    if (args?.cameraName !== undefined) {
+      if (camTrackMap[args.cameraName] === undefined) {
+        camTrackMap[args.cameraName] = new Map<TrackId, Track>();
+      }
+      camTrackMap[args.cameraName].set(track.trackId, track);
+    }
     trackMap.set(track.trackId, track);
     intervalTree.insert([track.begin, track.end], track.trackId.toString());
     if (args && args.afterId) {
       /* Insert specifically after another trackId */
       const insertIndex = trackIds.value.indexOf(args.afterId) + 1;
       trackIds.value.splice(insertIndex, 0, track.trackId);
-    } else {
+    } else if (trackIds.value.indexOf(track.trackId) === -1) {
       trackIds.value.push(track.trackId);
     }
     if (!args?.imported) {
@@ -98,13 +114,14 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
     }
   }
 
-  function addTrack(frame: number, defaultType: string, afterId?: TrackId): Track {
+  function addTrack(frame: number, defaultType: string,
+    afterId?: TrackId, cameraName?: string): Track {
     const track = new Track(getNewTrackId(), {
       begin: frame,
       end: frame,
       confidencePairs: [[defaultType, 1]],
     });
-    insertTrack(track, { afterId });
+    insertTrack(track, { afterId, cameraName });
     markChangesPending({ action: 'upsert', track });
     return track;
   }
@@ -161,9 +178,11 @@ export default function useTrackStore({ markChangesPending }: UseTrackStoreParam
 
   return {
     trackMap,
+    camTrackMap,
     sortedTracks,
     intervalTree,
     addTrack,
+    addCamera,
     insertTrack,
     getNewTrackId,
     removeTrack,