src/csui/src/PlayerUiPanels/AutodetectionSettingsPanel.vue

@@ -234,7 +234,6 @@
                 />
                 <input
                   v-model="settings.active.arDetect.timers.playing"
-                  @change="setArCheckFrequency($event.target.value)"
                   class="input"
                   type="text"
                 >
@@ -245,10 +244,10 @@
             <div class="field">
               <div class="label">Frame extraction canvas type:</div>
               <div class="select">
-                <select v-model="settings.active.arDetect.aardType" @change="settings.saveWithoutReload">
+                <select v-model="settings.active.arDetect.aardType">
                   <option value="auto">Automatic</option>
                   <option value="webgl">WebGL only</option>
-                  <option value="legacy">Legacy / fallback</option>
+                  <option value="fallback">Legacy / fallback</option>
                 </select>
               </div>
             </div>

src/ext/lib/aard/Aard.ts

@@ -349,13 +349,13 @@ export class Aard {
     this.startCheck();
   }
 
-  private createCanvas(canvasId: string, canvasType?: 'webgl' | 'legacy') {
+  private createCanvas(canvasId: string, canvasType?: 'webgl' | 'fallback') {
     if (canvasType) {
       if (canvasType === this.settings.active.arDetect.aardType || this.settings.active.arDetect.aardType === 'auto') {
         if (canvasType === 'webgl') {
           return new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'});
-        } else if (canvasType === 'legacy') {
+        } else if (canvasType === 'fallback') {
-          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
+          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
         } else {
           // TODO: throw error
         }
@@ -370,14 +370,14 @@ export class Aard {
         return new GlCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-gl'});
       } catch (e) {
         if (this.settings.active.arDetect.aardType !== 'webgl') {
-          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
+          return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
         }
         console.error('[ultrawidify|Aard::createCanvas] could not create webgl canvas:', e);
         this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {webglError: true}});
         throw e;
       }
     } else if (this.settings.active.arDetect.aardType === 'legacy') {
-      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-legacy'});
+      return new FallbackCanvas({...this.settings.active.arDetect.canvasDimensions.sampleCanvas, id: 'main-fallback'});
     } else {
       console.error('[ultrawidify|Aard::createCanvas] invalid value in settings.arDetect.aardType:', this.settings.active.arDetect.aardType);
       this.eventBus.send('uw-config-broadcast', {type: 'aard-error', aardErrors: {invalidSettings: true}});
@@ -556,7 +556,7 @@ export class Aard {
               } else {
                 if (this.settings.active.arDetect.aardType === 'auto') {
                   this.canvasStore.main.destroy();
-                  this.canvasStore.main = this.createCanvas('main-gl', 'legacy');
+                  this.canvasStore.main = this.createCanvas('main-gl', 'fallback');
                 }
                 this.inFallback = true;
                 this.fallbackReason = {cors: true};

src/ext/lib/aard/AardTimers.ts

@@ -23,9 +23,7 @@ export class AardTimer {
 
 
   constructor() {
-    // we need to deep clone, otherwise all buffer objects will point to the same object
+    this.aardPerformanceDataBuffer = new Array<AardPerformanceData>(16).fill(this.getEmptyMeasurement());
-    // (this makes calculating averages impossible)
-    this.aardPerformanceDataBuffer = JSON.parse(JSON.stringify(new Array<AardPerformanceData>(64).fill(this.getEmptyMeasurement())));
     this.current = this.aardPerformanceDataBuffer[0];
     this.previous = undefined;
     this.lastChange = this.getEmptyMeasurement();

src/ext/lib/aard/gl/FallbackCanvas.ts

@@ -2,9 +2,7 @@ import { GlCanvas, GlCanvasOptions } from './GlCanvas';
 
 
 export class FallbackCanvas extends GlCanvas {
-  get type() {
+
-    return 'legacy';
-  }
   context: CanvasRenderingContext2D;
 
   constructor(options: GlCanvasOptions) {
@@ -26,7 +24,7 @@ export class FallbackCanvas extends GlCanvas {
   protected initWebgl() { }
 
   drawVideoFrame(video: HTMLVideoElement) {
-    this.context.drawImage(video, 0, 0, this.context.canvas.width, this.context.canvas.height);
+    this.context.drawImage(video, this.context.canvas.width, this.context.canvas.height);
   }
 
   getImageData() {

src/ext/lib/aard/gl/GlCanvas.ts

@@ -52,9 +52,6 @@ interface GlCanvasProgramInfo {
 }
 
 export class GlCanvas {
-  get type() {
-    return 'webgl';
-  }
 
   private _canvas: HTMLCanvasElement;
   private set canvas(x: HTMLCanvasElement) {

src/options/AutodetectionSettings.vue

@@ -601,6 +601,17 @@ export default {
   },
   created() {
     this.sensitivity = this.getSensitivity();
+
+    const canvas = document.createElement('canvas');
+    canvas.width = 10;
+    canvas.height = 10;
+    const ctx = canvas.getContext('2d');
+    try {
+      ctx.drawWindow(window,0, 0, 10, 10, "rgba(0,0,0,0)");
+      this.fallbackModeAvailable = true;
+    } catch (e) {
+      this.fallbackModeAvailable = false;
+    }
   },
   methods: {
     setArCheckFrequency(event) {