@openreplay/tracker 12.0.2 → 12.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/cjs/app/canvas.d.ts +1 -0
  3. package/cjs/app/canvas.js +18 -4
  4. package/cjs/app/index.d.ts +1 -0
  5. package/cjs/app/index.js +3 -1
  6. package/cjs/index.js +1 -1
  7. package/lib/app/canvas.d.ts +1 -0
  8. package/lib/app/canvas.js +18 -4
  9. package/lib/app/index.d.ts +1 -0
  10. package/lib/app/index.js +3 -1
  11. package/lib/index.js +1 -1
  12. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ # 12.0.3
2
+
3
+ - fixed scaling option for canvas (to ignore window.devicePixelRatio and always render the canvas as 1)
4
+
1
5
  # 12.0.2
2
6
 
3
7
  - fix for canvas snapshot check
package/cjs/app/canvas.d.ts CHANGED
@@ -3,6 +3,7 @@ interface Options {
3
3
  fps: number;
4
4
  quality: 'low' | 'medium' | 'high';
5
5
  isDebug?: boolean;
6
+ fixedScaling?: boolean;
6
7
  }
7
8
  declare class CanvasRecorder {
8
9
  private readonly app;
package/cjs/app/canvas.js CHANGED
@@ -54,6 +54,7 @@ class CanvasRecorder {
54
54
  images: [],
55
55
  createdAt: ts,
56
56
  paused: false,
57
+ dummy: document.createElement('canvas'),
57
58
  };
58
59
  const canvasMsg = (0, messages_gen_js_1.CanvasNode)(id.toString(), ts);
59
60
  this.app.send(canvasMsg);
@@ -66,7 +67,7 @@ class CanvasRecorder {
66
67
  }
67
68
  else {
68
69
  if (!this.snapshots[id].paused) {
69
- const snapshot = captureSnapshot(canvas, this.options.quality);
70
+ const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
70
71
  this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
71
72
  if (this.snapshots[id].images.length > 9) {
72
73
  this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
@@ -122,13 +123,26 @@ class CanvasRecorder {
122
123
  }
123
124
  }
124
125
  const qualityInt = {
125
- low: 0.33,
126
+ low: 0.35,
126
127
  medium: 0.55,
127
128
  high: 0.8,
128
129
  };
129
- function captureSnapshot(canvas, quality = 'medium') {
130
+ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
130
131
  const imageFormat = 'image/jpeg'; // or /png'
131
- return canvas.toDataURL(imageFormat, qualityInt[quality]);
132
+ if (fixedScaling) {
133
+ const canvasScaleRatio = window.devicePixelRatio || 1;
134
+ dummy.width = canvas.width / canvasScaleRatio;
135
+ dummy.height = canvas.height / canvasScaleRatio;
136
+ const ctx = dummy.getContext('2d');
137
+ if (!ctx) {
138
+ return '';
139
+ }
140
+ ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height);
141
+ return dummy.toDataURL(imageFormat, qualityInt[quality]);
142
+ }
143
+ else {
144
+ return canvas.toDataURL(imageFormat, qualityInt[quality]);
145
+ }
132
146
  }
133
147
  function dataUrlToBlob(dataUrl) {
134
148
  const [header, base64] = dataUrl.split(',');
package/cjs/app/index.d.ts CHANGED
@@ -50,6 +50,7 @@ type AppOptions = {
50
50
  __debug_report_edp: string | null;
51
51
  __debug__?: ILogLevel;
52
52
  __save_canvas_locally?: boolean;
53
+ fixedCanvasScaling?: boolean;
53
54
  localStorage: Storage | null;
54
55
  sessionStorage: Storage | null;
55
56
  forceSingleTab?: boolean;
package/cjs/app/index.js CHANGED
@@ -81,7 +81,7 @@ class App {
81
81
  this.stopCallbacks = [];
82
82
  this.commitCallbacks = [];
83
83
  this.activityState = ActivityState.NotActive;
84
- this.version = '12.0.2'; // TODO: version compatability check inside each plugin.
84
+ this.version = '12.0.3'; // TODO: version compatability check inside each plugin.
85
85
  this.compressionThreshold = 24 * 1000;
86
86
  this.restartAttempts = 0;
87
87
  this.bc = null;
@@ -141,6 +141,7 @@ class App {
141
141
  disableStringDict: false,
142
142
  forceSingleTab: false,
143
143
  assistSocketHost: '',
144
+ fixedCanvasScaling: false,
144
145
  }, options);
145
146
  if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
146
147
  const host = location.hostname.split('.').slice(-2).join('_');
@@ -845,6 +846,7 @@ class App {
845
846
  fps: canvasFPS,
846
847
  quality: canvasQuality,
847
848
  isDebug: this.options.__save_canvas_locally,
849
+ fixedScaling: this.options.fixedCanvasScaling,
848
850
  });
849
851
  this.canvasRecorder.startTracking();
850
852
  }
package/cjs/index.js CHANGED
@@ -98,7 +98,7 @@ class API {
98
98
  const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
99
99
  req.open('POST', orig + '/v1/web/not-started');
100
100
  req.send(JSON.stringify({
101
- trackerVersion: '12.0.2',
101
+ trackerVersion: '12.0.3',
102
102
  projectKey: this.options.projectKey,
103
103
  doNotTrack,
104
104
  reason,
package/lib/app/canvas.d.ts CHANGED
@@ -3,6 +3,7 @@ interface Options {
3
3
  fps: number;
4
4
  quality: 'low' | 'medium' | 'high';
5
5
  isDebug?: boolean;
6
+ fixedScaling?: boolean;
6
7
  }
7
8
  declare class CanvasRecorder {
8
9
  private readonly app;
package/lib/app/canvas.js CHANGED
@@ -52,6 +52,7 @@ class CanvasRecorder {
52
52
  images: [],
53
53
  createdAt: ts,
54
54
  paused: false,
55
+ dummy: document.createElement('canvas'),
55
56
  };
56
57
  const canvasMsg = CanvasNode(id.toString(), ts);
57
58
  this.app.send(canvasMsg);
@@ -64,7 +65,7 @@ class CanvasRecorder {
64
65
  }
65
66
  else {
66
67
  if (!this.snapshots[id].paused) {
67
- const snapshot = captureSnapshot(canvas, this.options.quality);
68
+ const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
68
69
  this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
69
70
  if (this.snapshots[id].images.length > 9) {
70
71
  this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
@@ -120,13 +121,26 @@ class CanvasRecorder {
120
121
  }
121
122
  }
122
123
  const qualityInt = {
123
- low: 0.33,
124
+ low: 0.35,
124
125
  medium: 0.55,
125
126
  high: 0.8,
126
127
  };
127
- function captureSnapshot(canvas, quality = 'medium') {
128
+ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
128
129
  const imageFormat = 'image/jpeg'; // or /png'
129
- return canvas.toDataURL(imageFormat, qualityInt[quality]);
130
+ if (fixedScaling) {
131
+ const canvasScaleRatio = window.devicePixelRatio || 1;
132
+ dummy.width = canvas.width / canvasScaleRatio;
133
+ dummy.height = canvas.height / canvasScaleRatio;
134
+ const ctx = dummy.getContext('2d');
135
+ if (!ctx) {
136
+ return '';
137
+ }
138
+ ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height);
139
+ return dummy.toDataURL(imageFormat, qualityInt[quality]);
140
+ }
141
+ else {
142
+ return canvas.toDataURL(imageFormat, qualityInt[quality]);
143
+ }
130
144
  }
131
145
  function dataUrlToBlob(dataUrl) {
132
146
  const [header, base64] = dataUrl.split(',');
package/lib/app/index.d.ts CHANGED
@@ -50,6 +50,7 @@ type AppOptions = {
50
50
  __debug_report_edp: string | null;
51
51
  __debug__?: ILogLevel;
52
52
  __save_canvas_locally?: boolean;
53
+ fixedCanvasScaling?: boolean;
53
54
  localStorage: Storage | null;
54
55
  sessionStorage: Storage | null;
55
56
  forceSingleTab?: boolean;
package/lib/app/index.js CHANGED
@@ -52,7 +52,7 @@ export default class App {
52
52
  this.stopCallbacks = [];
53
53
  this.commitCallbacks = [];
54
54
  this.activityState = ActivityState.NotActive;
55
- this.version = '12.0.2'; // TODO: version compatability check inside each plugin.
55
+ this.version = '12.0.3'; // TODO: version compatability check inside each plugin.
56
56
  this.compressionThreshold = 24 * 1000;
57
57
  this.restartAttempts = 0;
58
58
  this.bc = null;
@@ -112,6 +112,7 @@ export default class App {
112
112
  disableStringDict: false,
113
113
  forceSingleTab: false,
114
114
  assistSocketHost: '',
115
+ fixedCanvasScaling: false,
115
116
  }, options);
116
117
  if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
117
118
  const host = location.hostname.split('.').slice(-2).join('_');
@@ -816,6 +817,7 @@ export default class App {
816
817
  fps: canvasFPS,
817
818
  quality: canvasQuality,
818
819
  isDebug: this.options.__save_canvas_locally,
820
+ fixedScaling: this.options.fixedCanvasScaling,
819
821
  });
820
822
  this.canvasRecorder.startTracking();
821
823
  }
package/lib/index.js CHANGED
@@ -67,7 +67,7 @@ export default class API {
67
67
  const orig = this.options.ingestPoint || DEFAULT_INGEST_POINT;
68
68
  req.open('POST', orig + '/v1/web/not-started');
69
69
  req.send(JSON.stringify({
70
- trackerVersion: '12.0.2',
70
+ trackerVersion: '12.0.3',
71
71
  projectKey: this.options.projectKey,
72
72
  doNotTrack,
73
73
  reason,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@openreplay/tracker",
3
3
  "description": "The OpenReplay tracker main package",
4
- "version": "12.0.2",
4
+ "version": "12.0.3",
5
5
  "keywords": [
6
6
  "logging",
7
7
  "replay"