First-pass native video ffmpeg display setting to prevent transcoding, when selected

client/dive-common/apispec.ts

@@ -144,6 +144,8 @@ interface DatasetMeta extends DatasetMetaMutable {
   id: Readonly<string>;
   imageData: Readonly<FrameImage[]>;
   videoUrl: Readonly<string | undefined>;
+  // Path to original video for native (non-transcoded) playback via frame extraction
+  nativeVideoPath?: Readonly<string>;
   type: Readonly<DatasetType | 'multi'>;
   fps: Readonly<number>; // this will become mutable in the future.
   name: Readonly<string>;

client/dive-common/components/Viewer.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import {
-  defineComponent, ref, toRef, computed, Ref,
+  defineComponent, defineAsyncComponent, ref, toRef, computed, Ref,
   reactive, watch, inject, nextTick, onBeforeUnmount, PropType,
 } from 'vue';
 import type { Vue } from 'vue/types/vue';
@@ -51,6 +51,12 @@ import GroupSidebarVue from './GroupSidebar.vue';
 import MultiCamToolsVue from './MultiCamTools.vue';
 import PrimaryAttributeTrackFilter from './PrimaryAttributeTrackFilter.vue';
 
+// NativeVideoAnnotator uses electron APIs - only load in desktop app
+// The webpackIgnore comment prevents bundling in web builds
+const NativeVideoAnnotator = defineAsyncComponent(
+  () => import(/* webpackIgnore: true */ 'vue-media-annotator/components/annotators/NativeVideoAnnotator.vue'),
+);
+
 export interface ImageDataItem {
   url: string;
   filename: string;
@@ -63,6 +69,7 @@ export default defineComponent({
     Sidebar,
     LayerManager,
     VideoAnnotator,
+    NativeVideoAnnotator,
     ImageAnnotator,
     LargeImageAnnotator,
     ConfidenceFilter,
@@ -119,6 +126,7 @@ export default defineComponent({
     const datasetName = ref('');
     const saveInProgress = ref(false);
     const videoUrl: Ref<Record<string, string>> = ref({});
+    const nativeVideoPath: Ref<Record<string, string>> = ref({});
     const {
       loadDetections, loadMetadata, saveMetadata, getTiles, getTileURL,
     } = useApi();
@@ -597,6 +605,9 @@ export default defineComponent({
           if (subCameraMeta.videoUrl) {
             videoUrl.value[camera] = subCameraMeta.videoUrl;
           }
+          if (subCameraMeta.nativeVideoPath) {
+            nativeVideoPath.value[camera] = subCameraMeta.nativeVideoPath;
+          }
           cameraStore.addCamera(camera);
           addSaveCamera(camera);
           // eslint-disable-next-line no-await-in-loop
@@ -865,6 +876,7 @@ export default defineComponent({
       selectedKey,
       trackFilters,
       videoUrl,
+      nativeVideoPath,
       visibleModes,
       frameRate: time.frameRate,
       originalFps: time.originalFps,
@@ -1139,14 +1151,17 @@ export default defineComponent({
             >
               <component
                 :is="datasetType === 'image-sequence' ? 'image-annotator'
-                  : datasetType === 'video' ? 'video-annotator' : 'large-image-annotator'"
-                v-if="(imageData[camera].length || videoUrl[camera]) && progress.loaded"
+                  : datasetType === 'video'
+                    ? (nativeVideoPath[camera] ? 'native-video-annotator' : 'video-annotator')
+                    : 'large-image-annotator'"
+                v-if="(imageData[camera].length || videoUrl[camera] || nativeVideoPath[camera]) && progress.loaded"
                 ref="subPlaybackComponent"
                 class="fill-height"
                 :class="{ 'selected-camera': selectedCamera === camera && camera !== 'singleCam' }"
                 v-bind="{
                   imageData: imageData[camera],
                   videoUrl: videoUrl[camera],
+                  nativeVideoPath: nativeVideoPath[camera],
                   updateTime,
                   frameRate,
                   originalFps,

client/platform/desktop/backend/native/common.spec.ts

@@ -76,6 +76,7 @@ const settings: Settings = {
   dataPath: '/home/user/viamedata',
   viamePath: '/opt/viame',
   readonlyMode: false,
+  nativeVideoPlayback: false,
   overrides: {},
 };
 const urlMapper = (a: string) => `http://localhost:8888/api/media?path=${a}`;

client/platform/desktop/backend/native/common.ts

@@ -262,6 +262,7 @@ async function loadMetadata(
   const projectMetaData = await loadJsonMetadata(projectDirData.metaFileAbsPath);
 
   let videoUrl = '';
+  let nativeVideoPath: string | undefined;
   let imageData = [] as FrameImage[];
   let multiCamMedia: MultiCamMedia | null = null;
   const { subType } = projectMetaData;
@@ -277,8 +278,20 @@ async function loadMetadata(
     imageData = defaultDisplay.imageData;
     videoUrl = defaultDisplay.videoUrl;
   } else if (projectMetaData.type === 'video') {
-    /* If the video has been transcoded, use that video */
-    if (projectMetaData.transcodedVideoFile) {
+    /* If using native playback (no transcoding), provide the native video path */
+    if (projectMetaData.useNativePlayback) {
+      // Get the original video path for native playback
+      const originalVideoPath = npath.join(
+        projectMetaData.originalBasePath,
+        projectMetaData.originalVideoFile,
+      );
+      // For native playback, we pass the file path directly (not a URL)
+      // The frontend will use the frame extraction API
+      nativeVideoPath = originalVideoPath;
+      // Still provide videoUrl as empty - frontend will use nativeVideoPath instead
+      videoUrl = '';
+    } else if (projectMetaData.transcodedVideoFile) {
+      /* If the video has been transcoded, use that video */
       const video = npath.join(projectDirData.basePath, projectMetaData.transcodedVideoFile);
       videoUrl = makeMediaUrl(video);
     } else {
@@ -307,6 +320,7 @@ async function loadMetadata(
   return {
     ...projectMetaData,
     videoUrl,
+    nativeVideoPath,
     imageData,
     multiCamMedia,
     subType,
@@ -1021,6 +1035,7 @@ async function beginMediaImport(path: string): Promise<DesktopMediaImportRespons
     mediaConvertList,
     trackFileAbsPath,
     forceMediaTranscode: false,
+    useNativePlayback: false,
     multiCamTrackFiles: null,
     metaFileAbsPath,
   };
@@ -1142,7 +1157,13 @@ async function finalizeMediaImport(
     jsonMeta.fps = (
       Math.max(1, Math.min(jsonMeta.fps, jsonMeta.originalFps))
     );
-    if (args.forceMediaTranscode) {
+
+    // If using native playback, skip conversion entirely
+    if (args.useNativePlayback) {
+      jsonMeta.useNativePlayback = true;
+      // Clear any conversion list for videos when using native playback
+      mediaConvertList = [];
+    } else if (args.forceMediaTranscode) {
       mediaConvertList.push(npath.join(jsonMeta.originalBasePath, jsonMeta.originalVideoFile));
     }
   }