@openreplay/tracker 12.0.1 → 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 +8 -0
  2. package/cjs/app/canvas.d.ts +1 -0
  3. package/cjs/app/canvas.js +22 -6
  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 +22 -6
  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,11 @@
1
+ # 12.0.3
2
+
3
+ - fixed scaling option for canvas (to ignore window.devicePixelRatio and always render the canvas as 1)
4
+
5
+ # 12.0.2
6
+
7
+ - fix for canvas snapshot check
8
+
1
9
  # 12.0.1
2
10
 
3
11
  - pause canvas snapshotting when its offscreen
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
@@ -25,7 +25,7 @@ class CanvasRecorder {
25
25
  entries.forEach((entry) => {
26
26
  if (entry.isIntersecting) {
27
27
  if (entry.target) {
28
- if (this.snapshots[id].createdAt) {
28
+ if (this.snapshots[id] && this.snapshots[id].createdAt) {
29
29
  this.snapshots[id].paused = false;
30
30
  }
31
31
  else {
@@ -39,7 +39,9 @@ class CanvasRecorder {
39
39
  // observer.unobserve(entry.target)
40
40
  }
41
41
  else {
42
- this.snapshots[id].paused = true;
42
+ if (this.snapshots[id]) {
43
+ this.snapshots[id].paused = true;
44
+ }
43
45
  }
44
46
  }
45
47
  });
@@ -52,6 +54,7 @@ class CanvasRecorder {
52
54
  images: [],
53
55
  createdAt: ts,
54
56
  paused: false,
57
+ dummy: document.createElement('canvas'),
55
58
  };
56
59
  const canvasMsg = (0, messages_gen_js_1.CanvasNode)(id.toString(), ts);
57
60
  this.app.send(canvasMsg);
@@ -64,7 +67,7 @@ class CanvasRecorder {
64
67
  }
65
68
  else {
66
69
  if (!this.snapshots[id].paused) {
67
- const snapshot = captureSnapshot(canvas, this.options.quality);
70
+ const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
68
71
  this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
69
72
  if (this.snapshots[id].images.length > 9) {
70
73
  this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
@@ -120,13 +123,26 @@ class CanvasRecorder {
120
123
  }
121
124
  }
122
125
  const qualityInt = {
123
- low: 0.33,
126
+ low: 0.35,
124
127
  medium: 0.55,
125
128
  high: 0.8,
126
129
  };
127
- function captureSnapshot(canvas, quality = 'medium') {
130
+ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
128
131
  const imageFormat = 'image/jpeg'; // or /png'
129
- 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
+ }
130
146
  }
131
147
  function dataUrlToBlob(dataUrl) {
132
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.1'; // 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.1',
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
@@ -23,7 +23,7 @@ class CanvasRecorder {
23
23
  entries.forEach((entry) => {
24
24
  if (entry.isIntersecting) {
25
25
  if (entry.target) {
26
- if (this.snapshots[id].createdAt) {
26
+ if (this.snapshots[id] && this.snapshots[id].createdAt) {
27
27
  this.snapshots[id].paused = false;
28
28
  }
29
29
  else {
@@ -37,7 +37,9 @@ class CanvasRecorder {
37
37
  // observer.unobserve(entry.target)
38
38
  }
39
39
  else {
40
- this.snapshots[id].paused = true;
40
+ if (this.snapshots[id]) {
41
+ this.snapshots[id].paused = true;
42
+ }
41
43
  }
42
44
  }
43
45
  });
@@ -50,6 +52,7 @@ class CanvasRecorder {
50
52
  images: [],
51
53
  createdAt: ts,
52
54
  paused: false,
55
+ dummy: document.createElement('canvas'),
53
56
  };
54
57
  const canvasMsg = CanvasNode(id.toString(), ts);
55
58
  this.app.send(canvasMsg);
@@ -62,7 +65,7 @@ class CanvasRecorder {
62
65
  }
63
66
  else {
64
67
  if (!this.snapshots[id].paused) {
65
- const snapshot = captureSnapshot(canvas, this.options.quality);
68
+ const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
66
69
  this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
67
70
  if (this.snapshots[id].images.length > 9) {
68
71
  this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
@@ -118,13 +121,26 @@ class CanvasRecorder {
118
121
  }
119
122
  }
120
123
  const qualityInt = {
121
- low: 0.33,
124
+ low: 0.35,
122
125
  medium: 0.55,
123
126
  high: 0.8,
124
127
  };
125
- function captureSnapshot(canvas, quality = 'medium') {
128
+ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
126
129
  const imageFormat = 'image/jpeg'; // or /png'
127
- 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
+ }
128
144
  }
129
145
  function dataUrlToBlob(dataUrl) {
130
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.1'; // 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.1',
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.1",
4
+ "version": "12.0.3",
5
5
  "keywords": [
6
6
  "logging",
7
7
  "replay"