@highlight-run/rrweb 2.0.1 → 2.0.4

package/es/rrweb/packages/rrweb/src/record/observers/canvas/2d.js

@@ -1,78 +1,49 @@
-import { __values, __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
 import { CanvasContext } from '../../../types.js';
 import { patch, isBlocked, hookSetter } from '../../../utils.js';
+import { serializeArgs } from './serialize-args.js';
 
-function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
-    var e_1, _a;
-    var handlers = [];
-    var props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
-    var _loop_1 = function (prop) {
-        try {
-            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
-                return "continue";
-            }
-            var restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
-                return function () {
-                    var _this = this;
-                    var args = [];
-                    for (var _i = 0; _i < arguments.length; _i++) {
-                        args[_i] = arguments[_i];
-                    }
-                    if (!isBlocked(this.canvas, blockClass)) {
-                        setTimeout(function () {
-                            var recordArgs = __spreadArray([], __read(args), false);
-                            if (prop === 'drawImage') {
-                                if (recordArgs[0] &&
-                                    recordArgs[0] instanceof HTMLCanvasElement) {
-                                    var canvas = recordArgs[0];
-                                    var ctx = canvas.getContext('2d');
-                                    var imgd = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(0, 0, canvas.width, canvas.height);
-                                    var pix = imgd === null || imgd === void 0 ? void 0 : imgd.data;
-                                    recordArgs[0] = JSON.stringify(pix);
-                                }
-                            }
-                            cb(_this.canvas, {
-                                type: CanvasContext['2D'],
-                                property: prop,
-                                args: recordArgs,
-                            });
-                        }, 0);
-                    }
-                    return original.apply(this, args);
-                };
-            });
-            handlers.push(restoreHandler);
-        }
-        catch (_b) {
-            var hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
-                set: function (v) {
-                    cb(this.canvas, {
-                        type: CanvasContext['2D'],
-                        property: prop,
-                        args: [v],
-                        setter: true,
-                    });
-                },
-            });
-            handlers.push(hookHandler);
-        }
-    };
-    try {
-        for (var props2D_1 = __values(props2D), props2D_1_1 = props2D_1.next(); !props2D_1_1.done; props2D_1_1 = props2D_1.next()) {
-            var prop = props2D_1_1.value;
-            _loop_1(prop);
-        }
-    }
-    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-    finally {
-        try {
-            if (props2D_1_1 && !props2D_1_1.done && (_a = props2D_1.return)) _a.call(props2D_1);
-        }
-        finally { if (e_1) throw e_1.error; }
-    }
-    return function () {
-        handlers.forEach(function (h) { return h(); });
-    };
+function initCanvas2DMutationObserver(cb, win, blockClass, mirror) {
+    const handlers = [];
+    const props2D = Object.getOwnPropertyNames(win.CanvasRenderingContext2D.prototype);
+    for (const prop of props2D) {
+        try {
+            if (typeof win.CanvasRenderingContext2D.prototype[prop] !== 'function') {
+                continue;
+            }
+            const restoreHandler = patch(win.CanvasRenderingContext2D.prototype, prop, function (original) {
+                return function (...args) {
+                    if (!isBlocked(this.canvas, blockClass)) {
+                        setTimeout(() => {
+                            const recordArgs = serializeArgs([...args], win, this);
+                            cb(this.canvas, {
+                                type: CanvasContext['2D'],
+                                property: prop,
+                                args: recordArgs,
+                            });
+                        }, 0);
+                    }
+                    return original.apply(this, args);
+                };
+            });
+            handlers.push(restoreHandler);
+        }
+        catch (_a) {
+            const hookHandler = hookSetter(win.CanvasRenderingContext2D.prototype, prop, {
+                set(v) {
+                    cb(this.canvas, {
+                        type: CanvasContext['2D'],
+                        property: prop,
+                        args: [v],
+                        setter: true,
+                    });
+                },
+            });
+            handlers.push(hookHandler);
+        }
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
 }
 
-export default initCanvas2DMutationObserver;
+export { initCanvas2DMutationObserver as default };

package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js

@@ -1,93 +1,172 @@
-import { __rest } from '../../../../ext/tslib/tslib.es6.js';
+import { __rest, __awaiter } from './../../../../../../ext/tslib/tslib.es6.js';
+import { CanvasContext } from '../../../types.js';
 import initCanvas2DMutationObserver from './2d.js';
 import initCanvasContextObserver from './canvas.js';
 import initCanvasWebGLMutationObserver from './webgl.js';
+import WorkerFactory from '../../../../../../_virtual/image-bitmap-data-url-worker.js';
 
-var CanvasManager = (function () {
-    function CanvasManager(options) {
-        this.pendingCanvasMutations = new Map();
-        this.rafStamps = { latestId: 0, invokeId: null };
-        this.frozen = false;
-        this.locked = false;
-        this.processMutation = function (target, mutation) {
-            var newFrame = this.rafStamps.invokeId &&
-                this.rafStamps.latestId !== this.rafStamps.invokeId;
-            if (newFrame || !this.rafStamps.invokeId)
-                this.rafStamps.invokeId = this.rafStamps.latestId;
-            if (!this.pendingCanvasMutations.has(target)) {
-                this.pendingCanvasMutations.set(target, []);
-            }
-            this.pendingCanvasMutations.get(target).push(mutation);
-        };
-        this.mutationCb = options.mutationCb;
-        this.mirror = options.mirror;
-        if (options.recordCanvas === true)
-            this.initCanvasMutationObserver(options.win, options.blockClass);
-    }
-    CanvasManager.prototype.reset = function () {
-        this.pendingCanvasMutations.clear();
-        this.resetObservers && this.resetObservers();
-    };
-    CanvasManager.prototype.freeze = function () {
-        this.frozen = true;
-    };
-    CanvasManager.prototype.unfreeze = function () {
-        this.frozen = false;
-    };
-    CanvasManager.prototype.lock = function () {
-        this.locked = true;
-    };
-    CanvasManager.prototype.unlock = function () {
-        this.locked = false;
-    };
-    CanvasManager.prototype.initCanvasMutationObserver = function (win, blockClass) {
-        this.startRAFTimestamping();
-        this.startPendingCanvasMutationFlusher();
-        var canvasContextReset = initCanvasContextObserver(win, blockClass);
-        var canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
-        var canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
-        this.resetObservers = function () {
-            canvasContextReset();
-            canvas2DReset();
-            canvasWebGL1and2Reset();
-        };
-    };
-    CanvasManager.prototype.startPendingCanvasMutationFlusher = function () {
-        var _this = this;
-        requestAnimationFrame(function () { return _this.flushPendingCanvasMutations(); });
-    };
-    CanvasManager.prototype.startRAFTimestamping = function () {
-        var _this = this;
-        var setLatestRAFTimestamp = function (timestamp) {
-            _this.rafStamps.latestId = timestamp;
-            requestAnimationFrame(setLatestRAFTimestamp);
-        };
-        requestAnimationFrame(setLatestRAFTimestamp);
-    };
-    CanvasManager.prototype.flushPendingCanvasMutations = function () {
-        var _this = this;
-        this.pendingCanvasMutations.forEach(function (values, canvas) {
-            var id = _this.mirror.getId(canvas);
-            _this.flushPendingCanvasMutationFor(canvas, id);
-        });
-        requestAnimationFrame(function () { return _this.flushPendingCanvasMutations(); });
-    };
-    CanvasManager.prototype.flushPendingCanvasMutationFor = function (canvas, id) {
-        if (this.frozen || this.locked) {
-            return;
-        }
-        var valuesWithType = this.pendingCanvasMutations.get(canvas);
-        if (!valuesWithType || id === -1)
-            return;
-        var values = valuesWithType.map(function (value) {
-            value.type; var rest = __rest(value, ["type"]);
-            return rest;
-        });
-        var type = valuesWithType[0].type;
-        this.mutationCb({ id: id, type: type, commands: values });
-        this.pendingCanvasMutations.delete(canvas);
-    };
-    return CanvasManager;
-}());
+class CanvasManager {
+    constructor(options) {
+        this.pendingCanvasMutations = new Map();
+        this.rafStamps = { latestId: 0, invokeId: null };
+        this.frozen = false;
+        this.locked = false;
+        this.processMutation = function (target, mutation) {
+            const newFrame = this.rafStamps.invokeId &&
+                this.rafStamps.latestId !== this.rafStamps.invokeId;
+            if (newFrame || !this.rafStamps.invokeId)
+                this.rafStamps.invokeId = this.rafStamps.latestId;
+            if (!this.pendingCanvasMutations.has(target)) {
+                this.pendingCanvasMutations.set(target, []);
+            }
+            this.pendingCanvasMutations.get(target).push(mutation);
+        };
+        const { sampling = 'all', win, blockClass, recordCanvas } = options;
+        this.mutationCb = options.mutationCb;
+        this.mirror = options.mirror;
+        if (recordCanvas && sampling === 'all')
+            this.initCanvasMutationObserver(win, blockClass);
+        if (recordCanvas && typeof sampling === 'number')
+            this.initCanvasFPSObserver(sampling, win, blockClass);
+    }
+    reset() {
+        this.pendingCanvasMutations.clear();
+        this.resetObservers && this.resetObservers();
+    }
+    freeze() {
+        this.frozen = true;
+    }
+    unfreeze() {
+        this.frozen = false;
+    }
+    lock() {
+        this.locked = true;
+    }
+    unlock() {
+        this.locked = false;
+    }
+    initCanvasFPSObserver(fps, win, blockClass) {
+        const canvasContextReset = initCanvasContextObserver(win, blockClass);
+        const snapshotInProgressMap = new Map();
+        const worker = new WorkerFactory();
+        worker.onmessage = (e) => {
+            const { id } = e.data;
+            snapshotInProgressMap.set(id, false);
+            if (!('base64' in e.data))
+                return;
+            const { base64, type, width, height } = e.data;
+            this.mutationCb({
+                id,
+                type: CanvasContext['2D'],
+                commands: [
+                    {
+                        property: 'clearRect',
+                        args: [0, 0, width, height],
+                    },
+                    {
+                        property: 'drawImage',
+                        args: [
+                            {
+                                rr_type: 'ImageBitmap',
+                                args: [
+                                    {
+                                        rr_type: 'Blob',
+                                        data: [{ rr_type: 'ArrayBuffer', base64 }],
+                                        type,
+                                    },
+                                ],
+                            },
+                            0,
+                            0,
+                        ],
+                    },
+                ],
+            });
+        };
+        const timeBetweenSnapshots = 1000 / fps;
+        let lastSnapshotTime = 0;
+        let rafId;
+        const takeCanvasSnapshots = (timestamp) => {
+            if (lastSnapshotTime &&
+                timestamp - lastSnapshotTime < timeBetweenSnapshots) {
+                rafId = requestAnimationFrame(takeCanvasSnapshots);
+                return;
+            }
+            lastSnapshotTime = timestamp;
+            win.document
+                .querySelectorAll(`canvas:not(.${blockClass} *)`)
+                .forEach((canvas) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const id = this.mirror.getId(canvas);
+                if (snapshotInProgressMap.get(id))
+                    return;
+                snapshotInProgressMap.set(id, true);
+                if (['webgl', 'webgl2'].includes(canvas.__context)) {
+                    const context = canvas.getContext(canvas.__context);
+                    if (((_a = context === null || context === void 0 ? void 0 : context.getContextAttributes()) === null || _a === void 0 ? void 0 : _a.preserveDrawingBuffer) === false) {
+                        context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
+                    }
+                }
+                const bitmap = yield createImageBitmap(canvas);
+                worker.postMessage({
+                    id,
+                    bitmap,
+                    width: canvas.width,
+                    height: canvas.height,
+                }, [bitmap]);
+            }));
+            rafId = requestAnimationFrame(takeCanvasSnapshots);
+        };
+        rafId = requestAnimationFrame(takeCanvasSnapshots);
+        this.resetObservers = () => {
+            canvasContextReset();
+            cancelAnimationFrame(rafId);
+        };
+    }
+    initCanvasMutationObserver(win, blockClass) {
+        this.startRAFTimestamping();
+        this.startPendingCanvasMutationFlusher();
+        const canvasContextReset = initCanvasContextObserver(win, blockClass);
+        const canvas2DReset = initCanvas2DMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(this.processMutation.bind(this), win, blockClass, this.mirror);
+        this.resetObservers = () => {
+            canvasContextReset();
+            canvas2DReset();
+            canvasWebGL1and2Reset();
+        };
+    }
+    startPendingCanvasMutationFlusher() {
+        requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    }
+    startRAFTimestamping() {
+        const setLatestRAFTimestamp = (timestamp) => {
+            this.rafStamps.latestId = timestamp;
+            requestAnimationFrame(setLatestRAFTimestamp);
+        };
+        requestAnimationFrame(setLatestRAFTimestamp);
+    }
+    flushPendingCanvasMutations() {
+        this.pendingCanvasMutations.forEach((values, canvas) => {
+            const id = this.mirror.getId(canvas);
+            this.flushPendingCanvasMutationFor(canvas, id);
+        });
+        requestAnimationFrame(() => this.flushPendingCanvasMutations());
+    }
+    flushPendingCanvasMutationFor(canvas, id) {
+        if (this.frozen || this.locked) {
+            return;
+        }
+        const valuesWithType = this.pendingCanvasMutations.get(canvas);
+        if (!valuesWithType || id === -1)
+            return;
+        const values = valuesWithType.map((value) => {
+            const rest = __rest(value, ["type"]);
+            return rest;
+        });
+        const { type } = valuesWithType[0];
+        this.mutationCb({ id, type, commands: values });
+        this.pendingCanvasMutations.delete(canvas);
+    }
+}
 
 export { CanvasManager };

package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas.js

@@ -1,30 +1,25 @@
-import { __spreadArray, __read } from '../../../../ext/tslib/tslib.es6.js';
 import { patch, isBlocked } from '../../../utils.js';
 
-function initCanvasContextObserver(win, blockClass) {
-    var handlers = [];
-    try {
-        var restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
-            return function (contextType) {
-                var args = [];
-                for (var _i = 1; _i < arguments.length; _i++) {
-                    args[_i - 1] = arguments[_i];
-                }
-                if (!isBlocked(this, blockClass)) {
-                    if (!('__context' in this))
-                        this.__context = contextType;
-                }
-                return original.apply(this, __spreadArray([contextType], __read(args), false));
-            };
-        });
-        handlers.push(restoreHandler);
-    }
-    catch (_a) {
-        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
-    }
-    return function () {
-        handlers.forEach(function (h) { return h(); });
-    };
+function initCanvasContextObserver(win, blockClass) {
+    const handlers = [];
+    try {
+        const restoreHandler = patch(win.HTMLCanvasElement.prototype, 'getContext', function (original) {
+            return function (contextType, ...args) {
+                if (!isBlocked(this, blockClass)) {
+                    if (!('__context' in this))
+                        (this).__context = contextType;
+                }
+                return original.apply(this, [contextType, ...args]);
+            };
+        });
+        handlers.push(restoreHandler);
+    }
+    catch (_a) {
+        console.error('failed to patch HTMLCanvasElement.prototype.getContext');
+    }
+    return () => {
+        handlers.forEach((h) => h());
+    };
 }
 
-export default initCanvasContextObserver;
+export { initCanvasContextObserver as default };