Check if video source has CORS enabled

biigle · Dec 12, 2024 · 7715e5e · 7715e5e
1 parent 6233512
commit 7715e5e
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/resources/assets/js/videos/videoContainer.vue b/resources/assets/js/videos/videoContainer.vue
@@ -99,6 +99,7 @@ export default {
             swappingLabel: false,
             disableJobTracking: false,
             supportsJumpByFrame: false,
+            hasCrossOriginError: false,
         };
     },
     provide() {
@@ -174,9 +175,6 @@ export default {
         hasTooLargeError() {
             return this.error instanceof VideoTooLargeError;
         },
-        hasCrossOriginError() {
-            return this.error instanceof TypeError;
-        },
         errorClass() {
             if (this.hasVideoError) {
                 if (this.error instanceof VideoNotProcessedError) {
@@ -582,7 +580,19 @@ export default {
                 .then(this.maybeFocusInitialAnnotation)
                 .then(this.maybeInitCurrentTime);
 
-            this.video.src = this.videoFileUri.replace(':id', video.id);
+            let self = this;
+            fetch(this.videoFileUri.replace(':id', video.id))
+                .then((res) => {
+                    res.blob().then(function (blob) {
+                        let urlCreator = window.URL || window.webkitURL;
+                        self.video.src = urlCreator.createObjectURL(blob);
+                    });
+                })
+                .catch((e) => {
+                    // Access on non-CORS enabled file causes TypeError
+                    this.hasCrossOriginError = e instanceof TypeError;
+                    self.video.src = self.videoFileUri.replace(':id', video.id);
+                });
 
             return promise;
         },