diff --git a/.changeset/config.json b/.changeset/config.json
index 962e9799b0..bd54146d5f 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -4,14 +4,14 @@
   "commit": false,
   "fixed": [
     [
-      "rrweb",
-      "rrweb-snapshot",
-      "rrdom",
-      "rrdom-nodejs",
-      "rrweb-player",
-      "@rrweb/types",
-      "@rrweb/web-extension",
-      "rrvideo"
+      "howdygo-rrweb",
+      "howdygo-rrweb-snapshot",
+      "howdygo-rrdom",
+      "howdygo-rrdom-nodejs",
+      "howdygo-rrweb-player",
+      "howdygo-rrweb-types",
+      "howdygo-rrweb-web-extension",
+      "howdygo-rrvideo"
     ]
   ],
   "linked": [],
diff --git a/.changeset/eleven-bobcats-peel.md b/.changeset/eleven-bobcats-peel.md
index 75f7263e1f..e3dbcf911e 100644
--- a/.changeset/eleven-bobcats-peel.md
+++ b/.changeset/eleven-bobcats-peel.md
@@ -1,6 +1,6 @@
 ---
-'rrweb-snapshot': patch
-'rrweb': patch
+"rrweb-snapshot": patch
+"rrweb": patch
 ---
 
 better support for coexistence with older libraries (e.g. MooTools & Prototype.js) which modify the in-built `Array.from` function
diff --git a/.changeset/fair-ducks-clean.md b/.changeset/fair-ducks-clean.md
new file mode 100644
index 0000000000..19269db760
--- /dev/null
+++ b/.changeset/fair-ducks-clean.md
@@ -0,0 +1,6 @@
+---
+"rrweb-snapshot": patch
+"rrweb": patch
+---
+
+Fix and test for bug #1457 which was affecting replay of complex tailwind css
diff --git a/.changeset/friendly-zebras-relax.md b/.changeset/friendly-zebras-relax.md
new file mode 100644
index 0000000000..99b2084c1f
--- /dev/null
+++ b/.changeset/friendly-zebras-relax.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Support recording canvas in iframe and shadow dom
diff --git a/.changeset/nervous-poets-grin.md b/.changeset/nervous-poets-grin.md
index 084e1c5524..d6e1f2dcb7 100644
--- a/.changeset/nervous-poets-grin.md
+++ b/.changeset/nervous-poets-grin.md
@@ -1,6 +1,6 @@
 ---
 'rrdom': patch
-'rrdom-nodejs': patch
+'howdygo-rrdom-nodejs': patch
 'rrweb': patch
 'rrweb-player': patch
 'rrweb-snapshot': patch
diff --git a/.changeset/pre.json b/.changeset/pre.json
index f752b6ec00..1bf2302d3e 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -3,11 +3,11 @@
   "tag": "alpha",
   "initialVersions": {
     "rrdom": "0.1.7",
-    "rrdom-nodejs": "0.1.7",
+    "howdygo-rrdom-nodejs": "0.1.7",
     "rrweb": "2.0.0-alpha.4",
     "rrweb-player": "1.0.0-alpha.4",
     "rrweb-snapshot": "2.0.0-alpha.4",
-    "@rrweb/types": "2.0.0-alpha.4",
+    "howdygo-rrweb-types": "2.0.0-alpha.4",
     "@rrweb/web-extension": "2.0.0-alpha.4",
     "rrvideo": "2.0.0-alpha.6"
   },
diff --git a/.changeset/serious-ants-juggle.md b/.changeset/serious-ants-juggle.md
index e475e12267..7392d5dd48 100644
--- a/.changeset/serious-ants-juggle.md
+++ b/.changeset/serious-ants-juggle.md
@@ -1,6 +1,6 @@
 ---
 'rrdom': major
-'rrdom-nodejs': major
+'howdygo-rrdom-nodejs': major
 'rrweb': patch
 ---
 
diff --git a/package.json b/package.json
index 702137ea58..f240ec84e0 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "url": "git+ssh://git@github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
-    "rrweb"
+    "howdygo-rrweb"
   ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",
diff --git a/packages/rrdom-nodejs/CHANGELOG.md b/packages/rrdom-nodejs/CHANGELOG.md
index 3e550009cb..9ff70b4b12 100644
--- a/packages/rrdom-nodejs/CHANGELOG.md
+++ b/packages/rrdom-nodejs/CHANGELOG.md
@@ -1,12 +1,12 @@
-# rrdom-nodejs
+# howdygo-rrdom-nodejs
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
 - Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
-  - rrdom@2.0.0-alpha.13
-  - rrweb-snapshot@2.0.0-alpha.13
+  - rrdom@2.0.0-alpha.19
+  - rrweb-snapshot@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
index 09a69a7ffd..8d97297306 100644
--- a/packages/rrdom-nodejs/package.json
+++ b/packages/rrdom-nodejs/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrdom-nodejs",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrdom-nodejs",
+  "version": "2.0.0-alpha.19",
   "scripts": {
     "dev": "rollup -c -w",
     "bundle": "rollup --config",
@@ -11,12 +11,12 @@
     "lint": "yarn eslint src/**/*.ts"
   },
   "keywords": [
-    "rrweb",
-    "rrdom-nodejs"
+    "howdygo-rrweb",
+    "howdygo-rrdom-nodejs"
   ],
   "license": "MIT",
-  "main": "lib/rrdom-nodejs.cjs",
-  "module": "es/rrdom-nodejs.js",
+  "main": "lib/howdygo-rrdom-nodejs.cjs",
+  "module": "es/howdygo-rrdom-nodejs.js",
   "typings": "es",
   "files": [
     "dist",
@@ -48,8 +48,8 @@
     "cssom": "^0.5.0",
     "cssstyle": "^2.3.0",
     "nwsapi": "^2.2.0",
-    "rrdom": "^2.0.0-alpha.13",
-    "rrweb-snapshot": "^2.0.0-alpha.13"
+    "howdygo-rrdom": "^2.0.0-alpha.19",
+    "howdygo-rrweb-snapshot": "^2.0.0-alpha.19"
   },
   "browserslist": [
     "supports es6-class"
diff --git a/packages/rrdom-nodejs/src/document-nodejs.ts b/packages/rrdom-nodejs/src/document-nodejs.ts
index 1d13970d34..37d3869ddf 100644
--- a/packages/rrdom-nodejs/src/document-nodejs.ts
+++ b/packages/rrdom-nodejs/src/document-nodejs.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from 'howdygo-rrweb-snapshot';
 import type { NWSAPI } from 'nwsapi';
 import type { CSSStyleDeclaration as CSSStyleDeclarationType } from 'cssstyle';
 import {
@@ -14,7 +14,7 @@ import {
   ClassList,
   IRRDocument,
   CSSStyleDeclaration,
-} from 'rrdom';
+} from 'howdygo-rrdom';
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
 const nwsapi = require('nwsapi');
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires
diff --git a/packages/rrdom-nodejs/test/document-nodejs.test.ts b/packages/rrdom-nodejs/test/document-nodejs.test.ts
index ba3c6144d8..bcf9736f8c 100644
--- a/packages/rrdom-nodejs/test/document-nodejs.test.ts
+++ b/packages/rrdom-nodejs/test/document-nodejs.test.ts
@@ -3,7 +3,7 @@
  */
 import * as fs from 'fs';
 import * as path from 'path';
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from 'howdygo-rrweb-snapshot';
 import {
   RRCanvasElement,
   RRCDATASection,
@@ -16,7 +16,7 @@ import {
   RRStyleElement,
   RRText,
 } from '../src/document-nodejs';
-import { buildFromDom } from 'rrdom';
+import { buildFromDom } from 'howdygo-rrdom';
 
 describe('RRDocument for nodejs environment', () => {
   describe('RRDocument API', () => {
diff --git a/packages/rrdom/CHANGELOG.md b/packages/rrdom/CHANGELOG.md
index aa73fc9c4a..ed198eced2 100644
--- a/packages/rrdom/CHANGELOG.md
+++ b/packages/rrdom/CHANGELOG.md
@@ -1,13 +1,13 @@
 # rrdom
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
 - [#1432](https://github.com/rrweb-io/rrweb/pull/1432) [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961) Thanks [@Juice10](https://github.com/Juice10)! - Support `loop` in `RRMediaElement`
 
 - Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
-  - rrweb-snapshot@2.0.0-alpha.13
+  - rrweb-snapshot@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
index 430620782c..528617ddb4 100644
--- a/packages/rrdom/package.json
+++ b/packages/rrdom/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "rrdom",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrdom",
+  "version": "2.0.0-alpha.19",
   "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/rrdom#readme",
   "license": "MIT",
-  "main": "lib/rrdom.cjs",
-  "module": "es/rrdom.js",
+  "main": "lib/howdygo-rrdom.cjs",
+  "module": "es/howdygo-rrdom.js",
   "typings": "es",
-  "unpkg": "dist/rrdom.js",
+  "unpkg": "dist/howdygo-rrdom.js",
   "files": [
     "dist",
     "lib",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^20.0.0",
-    "@rrweb/types": "^2.0.0-alpha.13",
+    "howdygo-rrweb-types": "^2.0.0-alpha.19",
     "@types/jest": "^27.4.1",
     "@types/puppeteer": "^5.4.4",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
@@ -47,6 +47,6 @@
     "ts-jest": "^27.1.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.13"
+    "howdygo-rrweb-snapshot": "^2.0.0-alpha.19"
   }
 }
diff --git a/packages/rrdom/rollup.config.js b/packages/rrdom/rollup.config.js
index 5bd346673f..6f3e951221 100644
--- a/packages/rrdom/rollup.config.js
+++ b/packages/rrdom/rollup.config.js
@@ -55,6 +55,7 @@ for (let config of baseConfigs) {
           name: config.name,
           format: 'iife',
           file: pkg.unpkg.replace(pkg.name, config.path),
+          extend: true,
         },
       ],
     },
@@ -67,6 +68,7 @@ for (let config of baseConfigs) {
           format: 'iife',
           file: toMinPath(pkg.unpkg).replace(pkg.name, config.path),
           sourcemap: true,
+          extend: true,
         },
       ],
     },
@@ -78,6 +80,7 @@ for (let config of baseConfigs) {
         {
           format: 'cjs',
           file: pkg.main.replace(pkg.name, config.path),
+          extend: true,
         },
       ],
     },
diff --git a/packages/rrdom/src/diff.ts b/packages/rrdom/src/diff.ts
index 8ccf81f8c6..4557afc703 100644
--- a/packages/rrdom/src/diff.ts
+++ b/packages/rrdom/src/diff.ts
@@ -2,7 +2,7 @@ import {
   NodeType as RRNodeType,
   Mirror as NodeMirror,
   elementNode,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type {
   canvasMutationData,
   canvasEventWithTime,
@@ -10,7 +10,7 @@ import type {
   scrollData,
   styleDeclarationData,
   styleSheetRuleData,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import type {
   IRRCDATASection,
   IRRComment,
@@ -83,16 +83,16 @@ export type ReplayerHandler = {
     target: HTMLCanvasElement,
   ) => void;
   applyInput: (data: inputData) => void;
-  applyScroll: (data: scrollData, isSync: boolean) => void;
+  applyScroll: (data: scrollData, isSync: boolean, forceScroll: boolean | undefined) => void;
   applyStyleSheetMutation: (
     data: styleDeclarationData | styleSheetRuleData,
     styleSheet: CSSStyleSheet,
   ) => void;
-  // Similar to the `afterAppend` callback in the `rrweb-snapshot` package. It's a postorder traversal of the newly appended nodes.
+  // Similar to the `afterAppend` callback in the `howdygo-rrweb-snapshot` package. It's a postorder traversal of the newly appended nodes.
   afterAppend?(node: Node, id: number): void;
 };
 
-// A set contains newly appended nodes. It's used to make sure the afterAppend callback can iterate newly appended nodes in the same traversal order as that in the `rrweb-snapshot` package.
+// A set contains newly appended nodes. It's used to make sure the afterAppend callback can iterate newly appended nodes in the same traversal order as that in the `howdygo-rrweb-snapshot` package.
 let createdNodeSet: WeakSet<Node> | null = null;
 
 /**
@@ -220,14 +220,14 @@ function diffAfterUpdatingChildren(
   switch (newTree.RRNodeType) {
     case RRNodeType.Document: {
       const scrollData = (newTree as RRDocument).scrollData;
-      scrollData && replayer.applyScroll(scrollData, true);
+      scrollData && replayer.applyScroll(scrollData, true, true);
       break;
     }
     case RRNodeType.Element: {
       const oldElement = oldTree as HTMLElement;
       const newRRElement = newTree as RRElement;
       newRRElement.scrollData &&
-        replayer.applyScroll(newRRElement.scrollData, true);
+        replayer.applyScroll(newRRElement.scrollData, true, true);
       /**
        * Input data need to get applied after all children of this node are updated.
        * Otherwise when we set a value for a select element whose options are empty, the value won't actually update.
diff --git a/packages/rrdom/src/document.ts b/packages/rrdom/src/document.ts
index befdadb86d..1a42336791 100644
--- a/packages/rrdom/src/document.ts
+++ b/packages/rrdom/src/document.ts
@@ -1,4 +1,4 @@
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from 'howdygo-rrweb-snapshot';
 import { parseCSSText, camelize, toCSSText } from './style';
 export interface IRRNode {
   parentElement: IRRNode | null;
@@ -308,7 +308,7 @@ export function BaseRRDocumentImpl<
     }
 
     /**
-     * Adhoc implementation for setting xhtml namespace in rebuilt.ts (rrweb-snapshot).
+     * Adhoc implementation for setting xhtml namespace in rebuilt.ts (howdygo-rrweb-snapshot).
      * There are two lines used this function:
      * 1. doc.write('\<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""\>')
      * 2. doc.write('\<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ""\>')
diff --git a/packages/rrdom/src/index.ts b/packages/rrdom/src/index.ts
index eeddb03e1c..fa85507954 100644
--- a/packages/rrdom/src/index.ts
+++ b/packages/rrdom/src/index.ts
@@ -1,12 +1,12 @@
 import {
   NodeType as RRNodeType,
   createMirror as createNodeMirror,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type {
   Mirror as NodeMirror,
   IMirror,
   serializedNodeWithId,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type {
   canvasMutationData,
   canvasEventWithTime,
@@ -14,7 +14,7 @@ import type {
   scrollData,
   styleSheetRuleData,
   styleDeclarationData,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import {
   BaseRRNode as RRNode,
   BaseRRCDATASectionImpl,
@@ -198,7 +198,7 @@ type RRElementType<K extends keyof HTMLElementTagNameMap> =
   K extends keyof RRElementTagNameMap ? RRElementTagNameMap[K] : RRElement;
 
 function getValidTagName(element: HTMLElement): string {
-  // https://github.com/rrweb-io/rrweb-snapshot/issues/56
+  // https://github.com/rrweb-io/howdygo-rrweb-snapshot/issues/56
   if (element instanceof HTMLFormElement) {
     return 'FORM';
   }
@@ -338,7 +338,7 @@ export function createMirror(): Mirror {
   return new Mirror();
 }
 
-// based on Mirror from rrweb-snapshots
+// based on Mirror from howdygo-rrweb-snapshots
 export class Mirror implements IMirror<RRNode> {
   private idNodeMap: Map<number, RRNode> = new Map();
   private nodeMetaMap: WeakMap<RRNode, serializedNodeWithId> = new WeakMap();
diff --git a/packages/rrdom/test/diff.test.ts b/packages/rrdom/test/diff.test.ts
index fc76f48bd9..8ff8694f4b 100644
--- a/packages/rrdom/test/diff.test.ts
+++ b/packages/rrdom/test/diff.test.ts
@@ -8,7 +8,7 @@ import {
   serializedNodeWithId,
   createMirror,
   Mirror as NodeMirror,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import {
   buildFromDom,
   getDefaultSN,
@@ -25,14 +25,14 @@ import {
   sameNodeType,
 } from '../src/diff';
 import type { IRRElement, IRRNode } from '../src/document';
-import { Replayer } from 'rrweb';
+import { Replayer } from 'howdygo-rrweb';
 import type {
   eventWithTime,
   canvasMutationData,
   styleDeclarationData,
   styleSheetRuleData,
-} from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+} from 'howdygo-rrweb-types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
 import { compileTSCode } from './utils';
 
 const elementSn = {
diff --git a/packages/rrdom/test/document.test.ts b/packages/rrdom/test/document.test.ts
index ad3b02134e..bd7d95d796 100644
--- a/packages/rrdom/test/document.test.ts
+++ b/packages/rrdom/test/document.test.ts
@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { NodeType as RRNodeType } from 'rrweb-snapshot';
+import { NodeType as RRNodeType } from 'howdygo-rrweb-snapshot';
 import {
   BaseRRDocumentImpl,
   BaseRRDocumentTypeImpl,
@@ -371,7 +371,7 @@ describe('Basic RRDocument implementation', () => {
       expect(node.childNodes.length).toEqual(0);
     });
 
-    it('can cover the usage of write() in rrweb-snapshot', () => {
+    it('can cover the usage of write() in howdygo-rrweb-snapshot', () => {
       const node = new RRDocument();
       node.write(
         '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">',
diff --git a/packages/rrdom/test/virtual-dom.test.ts b/packages/rrdom/test/virtual-dom.test.ts
index b99aca5ae4..07b6301a86 100644
--- a/packages/rrdom/test/virtual-dom.test.ts
+++ b/packages/rrdom/test/virtual-dom.test.ts
@@ -15,7 +15,7 @@ import {
   NodeType,
   NodeType as RRNodeType,
   textNode,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import {
   buildFromDom,
   buildFromNode,
diff --git a/packages/rrvideo/CHANGELOG.md b/packages/rrvideo/CHANGELOG.md
index 46339afe44..14141b2240 100644
--- a/packages/rrvideo/CHANGELOG.md
+++ b/packages/rrvideo/CHANGELOG.md
@@ -1,11 +1,11 @@
 # rrvideo
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
 - Updated dependencies []:
-  - rrweb-player@2.0.0-alpha.13
+  - rrweb-player@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json
index 4cbd92463d..a3af235126 100644
--- a/packages/rrvideo/package.json
+++ b/packages/rrvideo/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "rrvideo",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrvideo",
+  "version": "2.0.0-alpha.19",
   "description": "transform rrweb session into video",
   "main": "build/index.js",
   "bin": {
-    "rrvideo": "build/cli.js"
+    "howdygo-rrvideo": "build/cli.js"
   },
   "files": [
     "build"
@@ -26,13 +26,13 @@
     "@types/node": "^18.15.11",
     "jest": "^27.5.1",
     "ts-jest": "^27.1.3",
-    "@rrweb/types": "^2.0.0-alpha.13"
+    "howdygo-rrweb-types": "^2.0.0-alpha.19"
   },
   "dependencies": {
     "@open-tech-world/cli-progress-bar": "^2.0.2",
     "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
     "playwright": "^1.32.1",
-    "rrweb-player": "^2.0.0-alpha.13"
+    "howdygo-rrweb-player": "^2.0.0-alpha.19"
   }
 }
diff --git a/packages/rrvideo/src/cli.ts b/packages/rrvideo/src/cli.ts
index 600c531a23..a9d5eaa6ac 100644
--- a/packages/rrvideo/src/cli.ts
+++ b/packages/rrvideo/src/cli.ts
@@ -3,7 +3,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import minimist from 'minimist';
 import { ProgressBar } from '@open-tech-world/cli-progress-bar';
-import type { RRwebPlayerOptions } from 'rrweb-player';
+import type { RRwebPlayerOptions } from 'howdygo-rrweb-player';
 import { transformToVideo } from './index';
 
 const argv = minimist(process.argv.slice(2));
diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts
index 0909746929..ff78b456ca 100644
--- a/packages/rrvideo/src/index.ts
+++ b/packages/rrvideo/src/index.ts
@@ -1,11 +1,11 @@
 import * as fs from 'fs-extra';
 import * as path from 'path';
 import { chromium } from 'playwright';
-import { EventType, eventWithTime } from '@rrweb/types';
-import type { RRwebPlayerOptions } from 'rrweb-player';
+import { EventType, eventWithTime } from 'howdygo-rrweb-types';
+import type { RRwebPlayerOptions } from 'howdygo-rrweb-player';
 
 const rrwebScriptPath = path.resolve(
-  require.resolve('rrweb-player'),
+  require.resolve('howdygo-rrweb-player'),
   '../../dist/index.js',
 );
 const rrwebStylePath = path.resolve(rrwebScriptPath, '../style.css');
@@ -27,7 +27,7 @@ type RRvideoConfig = {
 
 const defaultConfig: Required<RRvideoConfig> = {
   input: '',
-  output: 'rrvideo-output.webm',
+  output: 'howdygo-rrvideo-output.webm',
   headless: true,
   // A good trade-off value between quality and file size.
   resolutionRatio: 0.8,
@@ -94,7 +94,7 @@ function getMaxViewport(events: eventWithTime[]) {
 }
 
 export async function transformToVideo(options: RRvideoConfig) {
-  const defaultVideoDir = '__rrvideo__temp__';
+  const defaultVideoDir = '__howdygo-rrvideo__temp__';
   const config = { ...defaultConfig };
   if (!options.input) throw new Error('input is required');
   // If the output is not specified or undefined, use the default value.
diff --git a/packages/rrvideo/test/cli.test.ts b/packages/rrvideo/test/cli.test.ts
index 29efe4815c..6c9c903293 100644
--- a/packages/rrvideo/test/cli.test.ts
+++ b/packages/rrvideo/test/cli.test.ts
@@ -28,7 +28,7 @@ describe('should be able to run cli', () => {
     execSync('node ./build/cli.js --input ./test/generated/example.json', {
       stdio: 'pipe',
     });
-    const outputFile = path.resolve(__dirname, '../rrvideo-output.webm');
+    const outputFile = path.resolve(__dirname, '../howdygo-rrvideo-output.webm');
     expect(fs.existsSync(outputFile)).toBe(true);
     fs.removeSync(outputFile);
   });
diff --git a/packages/rrvideo/test/events/example.ts b/packages/rrvideo/test/events/example.ts
index 00701fd6ca..22f9c7bea2 100644
--- a/packages/rrvideo/test/events/example.ts
+++ b/packages/rrvideo/test/events/example.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb-player/CHANGELOG.md b/packages/rrweb-player/CHANGELOG.md
index 31485fea43..f9c8271b2e 100644
--- a/packages/rrweb-player/CHANGELOG.md
+++ b/packages/rrweb-player/CHANGELOG.md
@@ -1,11 +1,11 @@
 # rrweb-player
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
 - Updated dependencies [[`3d1877c`](https://github.com/rrweb-io/rrweb/commit/3d1877cff83d9a018630674fb6e730050ceef812), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216)]:
-  - rrweb@2.0.0-alpha.13
+  - rrweb@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
index da8cba206a..53381f6e6a 100644
--- a/packages/rrweb-player/package.json
+++ b/packages/rrweb-player/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "rrweb-player",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrweb-player",
+  "version": "2.0.0-alpha.19",
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rrweb/types": "^2.0.0-alpha.13",
+    "howdygo-rrweb-types": "^2.0.0-alpha.19",
     "@types/offscreencanvas": "^2019.6.4",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.13"
+    "howdygo-rrweb": "^2.0.0-alpha.19"
   },
   "scripts": {
     "build": "rollup -c",
@@ -51,7 +51,7 @@
     "url": "git+https://github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
-    "rrweb"
+    "howdygo-rrweb"
   ],
   "author": "yanzhen@smartx.com",
   "license": "MIT",
diff --git a/packages/rrweb-player/src/Controller.svelte b/packages/rrweb-player/src/Controller.svelte
index 7e49df841e..e6098637b0 100644
--- a/packages/rrweb-player/src/Controller.svelte
+++ b/packages/rrweb-player/src/Controller.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { EventType } from 'rrweb';
-  import type { Replayer } from 'rrweb';
-  import type { playerMetaData } from '@rrweb/types';
+  import { EventType } from 'howdygo-rrweb';
+  import type { Replayer } from 'howdygo-rrweb';
+  import type { playerMetaData } from 'howdygo-rrweb-types';
   import type {
     PlayerMachineState,
     SpeedMachineState,
diff --git a/packages/rrweb-player/src/Player.svelte b/packages/rrweb-player/src/Player.svelte
index 4e7d5825dc..c7dca1bedb 100644
--- a/packages/rrweb-player/src/Player.svelte
+++ b/packages/rrweb-player/src/Player.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { Replayer, unpack } from 'rrweb';
-  import type { eventWithTime } from '@rrweb/types';
+  import { Replayer, unpack } from 'howdygo-rrweb';
+  import type { eventWithTime } from 'howdygo-rrweb-types';
   import {
     inlineCss,
     openFullscreen,
diff --git a/packages/rrweb-player/src/main.ts b/packages/rrweb-player/src/main.ts
index df0568912d..82eb5e90aa 100644
--- a/packages/rrweb-player/src/main.ts
+++ b/packages/rrweb-player/src/main.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import _Player from './Player.svelte';
 
 type PlayerProps = {
diff --git a/packages/rrweb-player/src/utils.ts b/packages/rrweb-player/src/utils.ts
index 08146bd253..f28a4c4b6d 100644
--- a/packages/rrweb-player/src/utils.ts
+++ b/packages/rrweb-player/src/utils.ts
@@ -15,8 +15,8 @@ declare global {
   }
 }
 
-import { EventType, IncrementalSource } from 'rrweb';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 export function inlineCss(cssObj: Record<string, string>): string {
   let style = '';
@@ -146,7 +146,7 @@ export function typeOf(
 }
 
 /**
- * Forked from 'rrweb' replay/index.ts. The original function is not exported.
+ * Forked from 'howdygo-rrweb' replay/index.ts. The original function is not exported.
  * Determine whether the event is a user interaction event
  * @param event - event to be determined
  * @returns true if the event is a user interaction event
diff --git a/packages/rrweb-player/typings/index.d.ts b/packages/rrweb-player/typings/index.d.ts
index e76b493e6f..4034e5a392 100755
--- a/packages/rrweb-player/typings/index.d.ts
+++ b/packages/rrweb-player/typings/index.d.ts
@@ -1,7 +1,7 @@
 import { playerConfig } from 'rrweb/typings/types';
-import { eventWithTime } from '@rrweb/types';
-import { Replayer } from 'rrweb';
-import { Mirror } from 'rrweb-snapshot';
+import { eventWithTime } from 'howdygo-rrweb-types';
+import { Replayer } from 'howdygo-rrweb';
+import { Mirror } from 'howdygo-rrweb-snapshot';
 import { SvelteComponent } from 'svelte';
 
 export type RRwebPlayerOptions = {
diff --git a/packages/rrweb-snapshot/CHANGELOG.md b/packages/rrweb-snapshot/CHANGELOG.md
index a04e46b87f..aa59988fdd 100644
--- a/packages/rrweb-snapshot/CHANGELOG.md
+++ b/packages/rrweb-snapshot/CHANGELOG.md
@@ -1,6 +1,6 @@
 # rrweb-snapshot
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Minor Changes
 
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
index 14eb0fe0d9..301ada81c0 100644
--- a/packages/rrweb-snapshot/package.json
+++ b/packages/rrweb-snapshot/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrweb-snapshot",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrweb-snapshot",
+  "version": "2.0.0-alpha.19",
   "description": "rrweb's component to take a snapshot of DOM, aka DOM serializer",
   "scripts": {
     "prepare": "npm run prepack",
@@ -22,13 +22,13 @@
     "url": "git+https://github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
-    "rrweb",
+    "howdygo-rrweb",
     "snapshot",
     "DOM"
   ],
-  "main": "lib/rrweb-snapshot.cjs",
-  "module": "es/rrweb-snapshot.js",
-  "unpkg": "dist/rrweb-snapshot.js",
+  "main": "lib/howdygo-rrweb-snapshot.cjs",
+  "module": "es/howdygo-rrweb-snapshot.js",
+  "unpkg": "dist/howdygo-rrweb-snapshot.js",
   "typings": "typings/index.d.ts",
   "files": [
     "dist",
@@ -41,7 +41,7 @@
   "bugs": {
     "url": "https://github.com/rrweb-io/rrweb/issues"
   },
-  "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/rrweb-snapshot#readme",
+  "homepage": "https://github.com/rrweb-io/rrweb/tree/master/packages/howdygo-rrweb-snapshot#readme",
   "devDependencies": {
     "@types/chai": "^4.1.4",
     "@types/jest": "^27.0.2",
diff --git a/packages/rrweb-snapshot/src/css.ts b/packages/rrweb-snapshot/src/css.ts
index 1a3157d40f..220e1a1fce 100644
--- a/packages/rrweb-snapshot/src/css.ts
+++ b/packages/rrweb-snapshot/src/css.ts
@@ -433,7 +433,7 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
     }
 
     // Use match logic from https://github.com/NxtChg/pieces/blob/3eb39c8287a97632e9347a24f333d52d916bc816/js/css_parser/css_parse.js#L46C1-L47C1
-    const m = match(/^(("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|[^{])+)/);
+    const m = match(/^(((?<!\\)"(?:\\"|[^"])*"|(?<!\\)'(?:\\'|[^'])*'|[^{])+)/);
     if (!m) {
       return;
     }
@@ -864,7 +864,17 @@ export function parse(css: string, options: ParserOptions = {}): Stylesheet {
    */
 
   function _compileAtrule(name: string) {
-    const re = new RegExp('^@' + name + '\\s*([^;]+);');
+    const re = new RegExp(
+      '^@' +
+        name +
+        '\\s*((?:' +
+        [
+          '(?<!\\\\)"(?:\\\\"|[^"])*"',
+          "(?<!\\\\)'(?:\\\\'|[^'])*'",
+          '[^;]',
+        ].join('|') +
+        ')+);',
+    );
     return () => {
       const pos = position();
       const m = match(re);
diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts
index dcc6a3ec0b..d0510b70d4 100644
--- a/packages/rrweb-snapshot/test/integration.test.ts
+++ b/packages/rrweb-snapshot/test/integration.test.ts
@@ -79,7 +79,7 @@ describe('integration tests', function (this: ISuite) {
     const {
       output: [{ code: _code }],
     } = await bundle.generate({
-      name: 'rrweb',
+      name: 'howdygo-rrweb',
       format: 'iife',
     });
     code = _code;
@@ -346,7 +346,7 @@ describe('iframe integration tests', function (this: ISuite) {
     const {
       output: [{ code: _code }],
     } = await bundle.generate({
-      name: 'rrweb',
+      name: 'howdygo-rrweb',
       format: 'iife',
     });
     code = _code;
@@ -394,7 +394,7 @@ describe('shadow DOM integration tests', function (this: ISuite) {
     const {
       output: [{ code: _code }],
     } = await bundle.generate({
-      name: 'rrweb',
+      name: 'howdygo-rrweb',
       format: 'iife',
     });
     code = _code;
diff --git a/packages/rrweb-snapshot/test/rebuild.test.ts b/packages/rrweb-snapshot/test/rebuild.test.ts
index 097ff0989a..5d544ccfa7 100644
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -203,4 +203,23 @@ ul li.specified c:hover img, ul li.specified c.\\:hover img {
       expect(getDuration(cachedEnd) * factor).toBeLessThan(getDuration(end));
     });
   });
+
+  it('should not incorrectly interpret escaped quotes', () => {
+    // the ':hover' in the below is a decoy which is not part of the selector,
+    // previously that part was being incorrectly consumed by the selector regex
+    const should_not_modify =
+      ".tailwind :is(.before\\:content-\\[\\'\\'\\])::before { --tw-content: \":hover\"; content: var(--tw-content); }.tailwind :is(.\\[\\&\\>li\\]\\:before\\:content-\\[\\'-\\'\\] > li)::before { color: pink; }";
+    expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
+      should_not_modify,
+    );
+  });
+
+  it('should not incorrectly interpret at rules', () => {
+    // the ':hover' in the below is a decoy which is not part of the selector,
+    const should_not_modify =
+      '@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;1,400&display=:hover");';
+    expect(adaptCssForReplay(should_not_modify, cache)).toEqual(
+      should_not_modify,
+    );
+  });
 });
diff --git a/packages/rrweb-snapshot/test/utils.test.ts b/packages/rrweb-snapshot/test/utils.test.ts
index afbdda2f42..bb037ecb0c 100644
--- a/packages/rrweb-snapshot/test/utils.test.ts
+++ b/packages/rrweb-snapshot/test/utils.test.ts
@@ -3,7 +3,7 @@
  */
 import { NodeType, serializedNode } from '../src/types';
 import { extractFileExtension, isNodeMetaEqual } from '../src/utils';
-import { serializedNodeWithId } from 'rrweb-snapshot';
+import { serializedNodeWithId } from 'howdygo-rrweb-snapshot';
 
 describe('utils', () => {
   describe('isNodeMetaEqual()', () => {
diff --git a/packages/rrweb/CHANGELOG.md b/packages/rrweb/CHANGELOG.md
index f3cabd4890..9a086df282 100644
--- a/packages/rrweb/CHANGELOG.md
+++ b/packages/rrweb/CHANGELOG.md
@@ -1,6 +1,6 @@
 # rrweb
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Minor Changes
 
@@ -15,9 +15,9 @@
 - [#1445](https://github.com/rrweb-io/rrweb/pull/1445) [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216) Thanks [@daibhin](https://github.com/daibhin)! - fix: protect against missing parentNode
 
 - Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`c278d06`](https://github.com/rrweb-io/rrweb/commit/c278d068a0e2f1175cce7cc63920ac1fbf4783cf)]:
-  - rrdom@2.0.0-alpha.13
-  - rrweb-snapshot@2.0.0-alpha.13
-  - @rrweb/types@2.0.0-alpha.13
+  - rrdom@2.0.0-alpha.19
+  - rrweb-snapshot@2.0.0-alpha.19
+  - @rrweb/types@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
index 9fcf6bb5a6..f023204849 100644
--- a/packages/rrweb/package.json
+++ b/packages/rrweb/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "rrweb",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrweb",
+  "version": "2.0.0-alpha.19",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",
@@ -30,7 +30,7 @@
     "url": "git+ssh://git@github.com/rrweb-io/rrweb.git"
   },
   "keywords": [
-    "rrweb"
+    "howdygo-rrweb"
   ],
   "main": "lib/rrweb-all.cjs",
   "module": "es/rrweb/packages/rrweb/src/entries/all.js",
@@ -82,13 +82,13 @@
     "tslib": "^2.3.1"
   },
   "dependencies": {
-    "@rrweb/types": "^2.0.0-alpha.13",
+    "howdygo-rrweb-types": "^2.0.0-alpha.19",
     "@types/css-font-loading-module": "0.0.7",
     "@xstate/fsm": "^1.4.0",
     "base64-arraybuffer": "^1.0.1",
     "fflate": "^0.4.4",
     "mitt": "^3.0.0",
-    "rrdom": "^2.0.0-alpha.13",
-    "rrweb-snapshot": "^2.0.0-alpha.13"
+    "howdygo-rrdom": "^2.0.0-alpha.19",
+    "howdygo-rrweb-snapshot": "^2.0.0-alpha.19"
   }
 }
diff --git a/packages/rrweb/src/index.ts b/packages/rrweb/src/index.ts
index 446d773f04..ec5fa033bc 100644
--- a/packages/rrweb/src/index.ts
+++ b/packages/rrweb/src/index.ts
@@ -10,7 +10,7 @@ export {
   MouseInteractions,
   ReplayerEvents,
   type eventWithTime,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 
 export type { recordOptions } from './types';
 
diff --git a/packages/rrweb/src/packer/base.ts b/packages/rrweb/src/packer/base.ts
index ac6ee9a337..efd35f609c 100644
--- a/packages/rrweb/src/packer/base.ts
+++ b/packages/rrweb/src/packer/base.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 export type PackFn = (event: eventWithTime) => string;
 export type UnpackFn = (raw: string) => eventWithTime;
diff --git a/packages/rrweb/src/packer/unpack.ts b/packages/rrweb/src/packer/unpack.ts
index 0c4bf252d1..a8bda7975d 100644
--- a/packages/rrweb/src/packer/unpack.ts
+++ b/packages/rrweb/src/packer/unpack.ts
@@ -1,6 +1,6 @@
 import { strFromU8, strToU8, unzlibSync } from 'fflate';
 import { UnpackFn, eventWithTimeAndPacker, MARK } from './base';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 export const unpack: UnpackFn = (raw: string) => {
   if (typeof raw !== 'string') {
diff --git a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
index 03aad10c9c..e10488b1a0 100644
--- a/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
+++ b/packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
@@ -1,6 +1,6 @@
-import type { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'howdygo-rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
-import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
+import type { RecordPlugin, ICrossOriginIframeMirror } from 'howdygo-rrweb-types';
 import type { WebRTCDataChannel } from '../types';
 
 export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
diff --git a/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts b/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
index 45a1297043..f662a2c772 100644
--- a/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
+++ b/packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
@@ -1,5 +1,5 @@
-import type { RRNode } from 'rrdom';
-import type { Mirror } from 'rrweb-snapshot';
+import type { RRNode } from 'howdygo-rrdom';
+import type { Mirror } from 'howdygo-rrweb-snapshot';
 import SimplePeer from 'simple-peer-light';
 import type { Replayer } from '../../../replay';
 import type { ReplayPlugin } from '../../../types';
diff --git a/packages/rrweb/src/plugins/console/record/index.ts b/packages/rrweb/src/plugins/console/record/index.ts
index a3bd4d3843..70a3638ec0 100644
--- a/packages/rrweb/src/plugins/console/record/index.ts
+++ b/packages/rrweb/src/plugins/console/record/index.ts
@@ -1,4 +1,4 @@
-import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
+import type { listenerHandler, RecordPlugin, IWindow } from 'howdygo-rrweb-types';
 import { patch } from '../../../utils';
 import { ErrorStackParser, StackFrame } from './error-stack-parser';
 import { stringify } from './stringify';
diff --git a/packages/rrweb/src/plugins/console/replay/index.ts b/packages/rrweb/src/plugins/console/replay/index.ts
index a0915fa6af..b1c68c6fe3 100644
--- a/packages/rrweb/src/plugins/console/replay/index.ts
+++ b/packages/rrweb/src/plugins/console/replay/index.ts
@@ -1,6 +1,6 @@
 import { LogLevel, LogData, PLUGIN_NAME } from '../record';
-import type { eventWithTime } from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
 import type { ReplayPlugin } from '../../../types';
 
 /**
diff --git a/packages/rrweb/src/plugins/sequential-id/record/index.ts b/packages/rrweb/src/plugins/sequential-id/record/index.ts
index 140b9c7003..64b469a2b2 100644
--- a/packages/rrweb/src/plugins/sequential-id/record/index.ts
+++ b/packages/rrweb/src/plugins/sequential-id/record/index.ts
@@ -1,4 +1,4 @@
-import type { RecordPlugin } from '@rrweb/types';
+import type { RecordPlugin } from 'howdygo-rrweb-types';
 
 export type SequentialIdOptions = {
   key: string;
diff --git a/packages/rrweb/src/plugins/sequential-id/replay/index.ts b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
index 0f3d94b820..c2f658793e 100644
--- a/packages/rrweb/src/plugins/sequential-id/replay/index.ts
+++ b/packages/rrweb/src/plugins/sequential-id/replay/index.ts
@@ -1,6 +1,6 @@
 import type { SequentialIdOptions } from '../record';
 import type { ReplayPlugin } from '../../../types';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 type Options = SequentialIdOptions & {
   warnOnMissingId: boolean;
diff --git a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
index 4e7a69326e..e378baa7cc 100644
--- a/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
+++ b/packages/rrweb/src/record/cross-origin-iframe-mirror.ts
@@ -1,4 +1,4 @@
-import type { ICrossOriginIframeMirror } from '@rrweb/types';
+import type { ICrossOriginIframeMirror } from 'howdygo-rrweb-types';
 export default class CrossOriginIframeMirror
   implements ICrossOriginIframeMirror
 {
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
index 2d9205c0cb..fa2b401ddb 100644
--- a/packages/rrweb/src/record/iframe-manager.ts
+++ b/packages/rrweb/src/record/iframe-manager.ts
@@ -1,13 +1,13 @@
-import type { Mirror, serializedNodeWithId } from 'rrweb-snapshot';
-import { genId, NodeType } from 'rrweb-snapshot';
+import type { Mirror, serializedNodeWithId } from 'howdygo-rrweb-snapshot';
+import { genId, NodeType } from 'howdygo-rrweb-snapshot';
 import type { CrossOriginIframeMessageEvent } from '../types';
 import CrossOriginIframeMirror from './cross-origin-iframe-mirror';
-import { EventType, IncrementalSource } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
 import type {
   eventWithTime,
   eventWithoutTime,
   mutationCallBack,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import type { StylesheetManager } from './stylesheet-manager';
 
 export class IframeManager {
@@ -89,7 +89,7 @@ export class IframeManager {
   private handleMessage(message: MessageEvent | CrossOriginIframeMessageEvent) {
     const crossOriginMessageEvent = message as CrossOriginIframeMessageEvent;
     if (
-      crossOriginMessageEvent.data.type !== 'rrweb' ||
+      crossOriginMessageEvent.data.type !== 'howdygo-rrweb' ||
       // To filter out the rrweb messages which are forwarded by some sites.
       crossOriginMessageEvent.origin !== crossOriginMessageEvent.data.origin
     )
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index 484a8a7ecb..394f2241aa 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -3,7 +3,7 @@ import {
   MaskInputOptions,
   SlimDOMOptions,
   createMirror,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import { initObservers, mutationBuffers } from './observer';
 import {
   on,
@@ -27,7 +27,9 @@ import {
   scrollCallback,
   canvasMutationParam,
   adoptedStyleSheetParam,
-} from '@rrweb/types';
+  IWindow,
+  mousePosition,
+} from 'howdygo-rrweb-types';
 import type { CrossOriginIframeMessageEventContent } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
@@ -214,7 +216,7 @@ function record<T = eventWithTime>(
       emit?.(eventProcessor(e), isCheckout);
     } else if (passEmitsToParent) {
       const message: CrossOriginIframeMessageEventContent<T> = {
-        type: 'rrweb',
+        type: 'howdygo-rrweb',
         event: eventProcessor(e),
         origin: window.location.origin,
         isCheckout,
@@ -394,6 +396,9 @@ function record<T = eventWithTime>(
       },
       onIframeLoad: (iframe, childSn) => {
         iframeManager.attachIframe(iframe, childSn);
+        if (iframe.contentWindow) {
+          canvasManager.addWindow(iframe.contentWindow as IWindow);
+        }
         shadowDomManager.observeAttachShadow(iframe);
       },
       onStylesheetLoad: (linkEl, childSn) => {
@@ -433,7 +438,7 @@ function record<T = eventWithTime>(
       return callbackWrapper(initObservers)(
         {
           mutationCb: wrappedMutationEmit,
-          mousemoveCb: (positions, source) =>
+          mousemoveCb: (positions: mousePosition[], source) =>
             wrappedEmit({
               type: EventType.IncrementalSnapshot,
               data: {
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index f4267af340..5729ca1e1c 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -10,7 +10,7 @@ import {
   isNativeShadowDom,
   getInputType,
   toLowerCase,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type { observerParam, MutationBufferParam } from '../types';
 import type {
   mutationRecord,
@@ -19,7 +19,8 @@ import type {
   removedNodeMutation,
   addedNodeMutation,
   Optional,
-} from '@rrweb/types';
+  IWindow,
+} from 'howdygo-rrweb-types';
 import {
   isBlocked,
   isAncestorRemoved,
@@ -331,6 +332,9 @@ export default class MutationBuffer {
         },
         onIframeLoad: (iframe, childSn) => {
           this.iframeManager.attachIframe(iframe, childSn);
+          if (iframe.contentWindow) {
+            this.canvasManager.addWindow(iframe.contentWindow as IWindow);
+          }
           this.shadowDomManager.observeAttachShadow(iframe);
         },
         onStylesheetLoad: (link, childSn) => {
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index dcd30e4718..d803d37f7e 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -4,7 +4,7 @@ import {
   Mirror,
   getInputType,
   toLowerCase,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type { FontFaceSet } from 'css-font-loading-module';
 import {
   throttle,
@@ -47,7 +47,7 @@ import {
   SelectionRange,
   selectionCallback,
   customElementCallback,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import MutationBuffer from './mutation';
 import { callbackWrapper } from './error-handler';
 
@@ -296,11 +296,24 @@ function initMouseInteractionObserver({
       }
       const id = mirror.getId(target);
       const { clientX, clientY } = e;
+      let boundingRect: DOMRect | null = null;
+      // Check if node is an element
+      if (target.nodeType === 1) {
+        boundingRect = (target as Element).getBoundingClientRect();
+      } else {
+        // Otherwise use logic like the client with nodeRange
+        const nodeRange = doc.createRange();
+        nodeRange.selectNodeContents(target);
+        boundingRect = nodeRange.getBoundingClientRect();
+      }
+
       callbackWrapper(mouseInteractionCb)({
         type: MouseInteractions[thisEventKey],
         id,
         x: clientX,
         y: clientY,
+        xOffset: boundingRect ? clientX - boundingRect.left : undefined,
+        yOffset: boundingRect ? clientY - boundingRect.top : undefined,
         ...(pointerType !== null && { pointerType }),
       });
     };
diff --git a/packages/rrweb/src/record/observers/canvas/2d.ts b/packages/rrweb/src/record/observers/canvas/2d.ts
index b496b6b93a..b3d1880122 100644
--- a/packages/rrweb/src/record/observers/canvas/2d.ts
+++ b/packages/rrweb/src/record/observers/canvas/2d.ts
@@ -1,11 +1,11 @@
-import type { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'howdygo-rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,
   canvasManagerMutationCallback,
   IWindow,
   listenerHandler,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { serializeArgs } from './serialize-args';
 
diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index f825877f69..fa1706e7a6 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -1,4 +1,5 @@
-import type { ICanvas, Mirror, DataURLOptions } from 'rrweb-snapshot';
+import { encode } from 'base64-arraybuffer';
+import type { Mirror, DataURLOptions } from 'howdygo-rrweb-snapshot';
 import type {
   blockClass,
   canvasManagerMutationCallback,
@@ -8,14 +9,11 @@ import type {
   IWindow,
   listenerHandler,
   CanvasArg,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import { isBlocked } from '../../../utils';
-import { CanvasContext } from '@rrweb/types';
+import { CanvasContext } from 'howdygo-rrweb-types';
 import initCanvas2DMutationObserver from './2d';
-import initCanvasContextObserver from './canvas';
 import initCanvasWebGLMutationObserver from './webgl';
-import ImageBitmapDataURLWorker from 'web-worker:../../workers/image-bitmap-data-url-worker.ts';
-import type { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker';
 
 export type RafStamps = { latestId: number; invokeId: number | null };
 
@@ -24,19 +22,48 @@ type pendingCanvasMutationsMap = Map<
   canvasMutationWithType[]
 >;
 
+export interface CanvasManagerConstructorOptions {
+  recordCanvas: boolean;
+  mutationCb: canvasMutationCallback;
+  win: IWindow;
+  blockClass: blockClass;
+  blockSelector: string | null;
+  mirror: Mirror;
+  sampling?: 'all' | number;
+  dataURLOptions: DataURLOptions;
+}
+
 export class CanvasManager {
   private pendingCanvasMutations: pendingCanvasMutationsMap = new Map();
   private rafStamps: RafStamps = { latestId: 0, invokeId: null };
+  private options: CanvasManagerConstructorOptions;
   private mirror: Mirror;
 
+  private shadowDoms = new Set<WeakRef<ShadowRoot>>();
+  private windowsSet = new WeakSet<IWindow>();
+  private windows: WeakRef<IWindow>[] = [];
+
   private mutationCb: canvasMutationCallback;
-  private resetObservers?: listenerHandler;
+  private restoreHandlers: listenerHandler[] = [];
   private frozen = false;
   private locked = false;
 
+  private snapshotInProgressMap: Map<number, boolean> = new Map();
+
   public reset() {
     this.pendingCanvasMutations.clear();
-    this.resetObservers && this.resetObservers();
+    this.restoreHandlers.forEach((handler) => {
+      try {
+        handler();
+      } catch (e) {
+        //
+      }
+    });
+    this.restoreHandlers = [];
+    this.windowsSet = new WeakSet();
+    this.windows = [];
+    this.shadowDoms = new Set();
+    this.snapshotInProgressMap = new Map();
   }
 
   public freeze() {
@@ -55,16 +82,7 @@ export class CanvasManager {
     this.locked = false;
   }
 
-  constructor(options: {
-    recordCanvas: boolean;
-    mutationCb: canvasMutationCallback;
-    win: IWindow;
-    blockClass: blockClass;
-    blockSelector: string | null;
-    mirror: Mirror;
-    sampling?: 'all' | number;
-    dataURLOptions: DataURLOptions;
-  }) {
+  constructor(options: CanvasManagerConstructorOptions) {
     const {
       sampling = 'all',
       win,
@@ -75,13 +93,42 @@ export class CanvasManager {
     } = options;
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
+    this.options = options;
 
-    if (recordCanvas && sampling === 'all')
-      this.initCanvasMutationObserver(win, blockClass, blockSelector);
-    if (recordCanvas && typeof sampling === 'number')
-      this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
+    if (recordCanvas && sampling === 'all') {
+      this.startRAFTimestamping();
+      this.startPendingCanvasMutationFlusher();
+    }
+    if (recordCanvas && typeof sampling === 'number') {
+      this.initCanvasFPSObserver(sampling, blockClass, blockSelector, {
         dataURLOptions,
       });
+    }
+    this.addWindow(win);
+  }
+
+  public addWindow(win: IWindow) {
+    const {
+      sampling = 'all',
+      blockClass,
+      blockSelector,
+      recordCanvas,
+    } = this.options;
+    if (this.windowsSet.has(win)) return;
+
+    if (recordCanvas && sampling === 'all') {
+      this.initCanvasMutationObserver(win, blockClass, blockSelector);
+    }
+    this.windowsSet.add(win);
+    this.windows.push(new WeakRef(win));
+  }
+
+  public addShadowRoot(shadowRoot: ShadowRoot) {
+    this.shadowDoms.add(new WeakRef(shadowRoot));
+  }
+
+  public resetShadowRoots() {
+    this.shadowDoms = new Set();
   }
 
   private processMutation: canvasManagerMutationCallback = (
@@ -103,73 +150,67 @@ export class CanvasManager {
 
   private initCanvasFPSObserver(
     fps: number,
-    win: IWindow,
     blockClass: blockClass,
     blockSelector: string | null,
     options: {
       dataURLOptions: DataURLOptions;
     },
   ) {
-    const canvasContextReset = initCanvasContextObserver(
-      win,
-      blockClass,
-      blockSelector,
-      true,
-    );
-    const snapshotInProgressMap: Map<number, boolean> = new Map();
-    const worker =
-      new ImageBitmapDataURLWorker() as ImageBitmapDataURLRequestWorker;
-    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', // wipe canvas
-            args: [0, 0, width, height],
-          },
-          {
-            property: 'drawImage', // draws (semi-transparent) image
-            args: [
-              {
-                rr_type: 'ImageBitmap',
-                args: [
-                  {
-                    rr_type: 'Blob',
-                    data: [{ rr_type: 'ArrayBuffer', base64 }],
-                    type,
-                  },
-                ],
-              } as CanvasArg,
-              0,
-              0,
-            ],
-          },
-        ],
-      });
-    };
-
     const timeBetweenSnapshots = 1000 / fps;
     let lastSnapshotTime = 0;
+    const lastBlobMap: Map<number, string> = new Map();
+    const transparentBlobMap: Map<string, string> = new Map();
     let rafId: number;
 
     const getCanvas = (): HTMLCanvasElement[] => {
       const matchedCanvas: HTMLCanvasElement[] = [];
-      win.document.querySelectorAll('canvas').forEach((canvas) => {
-        if (!isBlocked(canvas, blockClass, blockSelector, true)) {
-          matchedCanvas.push(canvas);
+      const searchCanvas = (root: Document | ShadowRoot) => {
+        root.querySelectorAll('canvas').forEach((canvas) => {
+          if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+            matchedCanvas.push(canvas);
+          }
+        });
+      };
+      for (const item of this.windows) {
+        const window = item.deref();
+        if (window) {
+          searchCanvas(window.document);
         }
-      });
+      }
+      for (const item of this.shadowDoms) {
+        const shadowRoot = item.deref();
+        if (shadowRoot) {
+          searchCanvas(shadowRoot);
+        }
+      }
       return matchedCanvas;
     };
 
+    async function getTransparentBlobFor(
+      width: number,
+      height: number,
+      dataURLOptions: DataURLOptions,
+    ): Promise<string> {
+      const id = `${width}-${height}`;
+      if ('OffscreenCanvas' in globalThis) {
+        if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
+        const offscreen = new OffscreenCanvas(width, height);
+        offscreen.getContext('2d'); // creates rendering context for `converToBlob`
+        const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
+        const arrayBuffer = await blob.arrayBuffer();
+        const base64 = encode(arrayBuffer); // cpu intensive
+        transparentBlobMap.set(id, base64);
+        return base64;
+      } else {
+        return '';
+      }
+    }
+
     const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => {
+      if (!this.windows.length) {
+        // exit loop if windows list is empty
+        return;
+      }
       if (
         lastSnapshotTime &&
         timestamp - lastSnapshotTime < timeBetweenSnapshots
@@ -182,58 +223,67 @@ export class CanvasManager {
       getCanvas()
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         .forEach(async (canvas: HTMLCanvasElement) => {
+          if (!this.mirror.hasNode(canvas)) {
+            return;
+          }
           const id = this.mirror.getId(canvas);
-          if (snapshotInProgressMap.get(id)) return;
+          if (this.snapshotInProgressMap.get(id)) return;
 
           // The browser throws if the canvas is 0 in size
           // Uncaught (in promise) DOMException: Failed to execute 'createImageBitmap' on 'Window': The source image width is 0.
           // Assuming the same happens with height
           if (canvas.width === 0 || canvas.height === 0) return;
 
-          snapshotInProgressMap.set(id, true);
-          if (['webgl', 'webgl2'].includes((canvas as ICanvas).__context)) {
-            // if the canvas hasn't been modified recently,
-            // its contents won't be in memory and `createImageBitmap`
-            // will return a transparent imageBitmap
-
-            const context = canvas.getContext((canvas as ICanvas).__context) as
-              | WebGLRenderingContext
-              | WebGL2RenderingContext
-              | null;
-            if (
-              context?.getContextAttributes()?.preserveDrawingBuffer === false
-            ) {
-              // Hack to load canvas back into memory so `createImageBitmap` can grab it's contents.
-              // Context: https://twitter.com/Juice10/status/1499775271758704643
-              // Preferably we set `preserveDrawingBuffer` to true, but that's not always possible,
-              // especially when canvas is loaded before rrweb.
-              // This hack can wipe the background color of the canvas in the (unlikely) event that
-              // the canvas background was changed but clear was not called directly afterwards.
-              // Example of this hack having negative side effect: https://visgl.github.io/react-map-gl/examples/layers
-              context.clear(context.COLOR_BUFFER_BIT);
-            }
+          this.snapshotInProgressMap.set(id, true);
+
+          const blob: Blob = await new Promise((resolve) => canvas.toBlob(file => resolve(file!), options.dataURLOptions.type, options.dataURLOptions.quality));
+          const type = blob.type;
+          const arrayBuffer = await blob.arrayBuffer();
+          const base64 = encode(arrayBuffer); // cpu intensive // TODO in post processing
+
+          this.snapshotInProgressMap.set(id, false);
+          if (!lastBlobMap.has(id) && (await getTransparentBlobFor(canvas.width, canvas.height, options.dataURLOptions)) === base64) {
+            lastBlobMap.set(id, base64);
           }
-          const bitmap = await createImageBitmap(canvas);
-          worker.postMessage(
-            {
+          if (lastBlobMap.get(id) !== base64) {
+            this.mutationCb({
               id,
-              bitmap,
-              width: canvas.width,
-              height: canvas.height,
-              dataURLOptions: options.dataURLOptions,
-            },
-            [bitmap],
-          );
+              type: CanvasContext['2D'],
+              commands: [
+                {
+                  property: 'clearRect', // wipe canvas
+                  args: [0, 0, canvas.width, canvas.height],
+                },
+                {
+                  property: 'drawImage', // draws (semi-transparent) image
+                  args: [
+                    {
+                      rr_type: 'ImageBitmap',
+                      args: [
+                        {
+                          rr_type: 'Blob',
+                          data: [{ rr_type: 'ArrayBuffer', base64 }],
+                          type,
+                        },
+                      ],
+                    } as CanvasArg,
+                    0,
+                    0,
+                  ],
+                },
+              ],
+            });
+            lastBlobMap.set(id, base64);
+          }
         });
       rafId = requestAnimationFrame(takeCanvasSnapshots);
     };
 
     rafId = requestAnimationFrame(takeCanvasSnapshots);
 
-    this.resetObservers = () => {
-      canvasContextReset();
+    this.restoreHandlers.push(() => {
       cancelAnimationFrame(rafId);
-    };
+    });
   }
 
   private initCanvasMutationObserver(
@@ -241,15 +291,6 @@ export class CanvasManager {
     blockClass: blockClass,
     blockSelector: string | null,
   ): void {
-    this.startRAFTimestamping();
-    this.startPendingCanvasMutationFlusher();
-
-    const canvasContextReset = initCanvasContextObserver(
-      win,
-      blockClass,
-      blockSelector,
-      false,
-    );
     const canvas2DReset = initCanvas2DMutationObserver(
       this.processMutation.bind(this),
       win,
@@ -265,11 +306,10 @@ export class CanvasManager {
       this.mirror,
     );
 
-    this.resetObservers = () => {
-      canvasContextReset();
+    this.restoreHandlers.push(() => {
       canvas2DReset();
       canvasWebGL1and2Reset();
-    };
+    });
   }
 
   private startPendingCanvasMutationFlusher() {
diff --git a/packages/rrweb/src/record/observers/canvas/canvas.ts b/packages/rrweb/src/record/observers/canvas/canvas.ts
index 4f6b30fc36..8ba7068e76 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas.ts
@@ -1,5 +1,5 @@
-import type { ICanvas } from 'rrweb-snapshot';
-import type { blockClass, IWindow, listenerHandler } from '@rrweb/types';
+import type { ICanvas } from 'howdygo-rrweb-snapshot';
+import type { blockClass, IWindow, listenerHandler } from 'howdygo-rrweb-types';
 import { isBlocked, patch } from '../../../utils';
 
 function getNormalizedContextName(contextType: string) {
diff --git a/packages/rrweb/src/record/observers/canvas/serialize-args.ts b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
index 30e20fcb0c..eae0fe8ad2 100644
--- a/packages/rrweb/src/record/observers/canvas/serialize-args.ts
+++ b/packages/rrweb/src/record/observers/canvas/serialize-args.ts
@@ -1,5 +1,5 @@
 import { encode } from 'base64-arraybuffer';
-import type { IWindow, CanvasArg } from '@rrweb/types';
+import type { IWindow, CanvasArg } from 'howdygo-rrweb-types';
 
 // TODO: unify with `replay/webgl.ts`
 type CanvasVarMap = Map<string, unknown[]>;
diff --git a/packages/rrweb/src/record/observers/canvas/webgl.ts b/packages/rrweb/src/record/observers/canvas/webgl.ts
index 680890f666..1e2b92938b 100644
--- a/packages/rrweb/src/record/observers/canvas/webgl.ts
+++ b/packages/rrweb/src/record/observers/canvas/webgl.ts
@@ -1,4 +1,4 @@
-import type { Mirror } from 'rrweb-snapshot';
+import type { Mirror } from 'howdygo-rrweb-snapshot';
 import {
   blockClass,
   CanvasContext,
@@ -6,7 +6,7 @@ import {
   canvasMutationWithType,
   IWindow,
   listenerHandler,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
 import { saveWebGLVar, serializeArgs } from './serialize-args';
 
diff --git a/packages/rrweb/src/record/shadow-dom-manager.ts b/packages/rrweb/src/record/shadow-dom-manager.ts
index 169c77216a..f83e2f2394 100644
--- a/packages/rrweb/src/record/shadow-dom-manager.ts
+++ b/packages/rrweb/src/record/shadow-dom-manager.ts
@@ -3,15 +3,15 @@ import type {
   mutationCallBack,
   scrollCallback,
   SamplingStrategy,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import {
   initMutationObserver,
   initScrollObserver,
   initAdoptedStyleSheetObserver,
 } from './observer';
 import { patch, inDom } from '../utils';
-import type { Mirror } from 'rrweb-snapshot';
-import { isNativeShadowDom } from 'rrweb-snapshot';
+import type { Mirror } from 'howdygo-rrweb-snapshot';
+import { isNativeShadowDom } from 'howdygo-rrweb-snapshot';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -52,6 +52,7 @@ export class ShadowDomManager {
     if (!isNativeShadowDom(shadowRoot)) return;
     if (this.shadowDoms.has(shadowRoot)) return;
     this.shadowDoms.add(shadowRoot);
+    this.bypassOptions.canvasManager.addShadowRoot(shadowRoot);
     const observer = initMutationObserver(
       {
         ...this.bypassOptions,
@@ -151,5 +152,6 @@ export class ShadowDomManager {
     });
     this.restoreHandlers = [];
     this.shadowDoms = new WeakSet();
+    this.bypassOptions.canvasManager.resetShadowRoots();
   }
 }
diff --git a/packages/rrweb/src/record/stylesheet-manager.ts b/packages/rrweb/src/record/stylesheet-manager.ts
index 6e0a8077b4..b74aec12b2 100644
--- a/packages/rrweb/src/record/stylesheet-manager.ts
+++ b/packages/rrweb/src/record/stylesheet-manager.ts
@@ -1,11 +1,11 @@
-import type { elementNode, serializedNodeWithId } from 'rrweb-snapshot';
-import { stringifyRule } from 'rrweb-snapshot';
+import type { elementNode, serializedNodeWithId } from 'howdygo-rrweb-snapshot';
+import { stringifyRule } from 'howdygo-rrweb-snapshot';
 import type {
   adoptedStyleSheetCallback,
   adoptedStyleSheetParam,
   attributeMutation,
   mutationCallBack,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import { StyleSheetMirror } from '../utils';
 
 export class StylesheetManager {
diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
deleted file mode 100644
index 374edfe1b0..0000000000
--- a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { encode } from 'base64-arraybuffer';
-import type { DataURLOptions } from 'rrweb-snapshot';
-import type {
-  ImageBitmapDataURLWorkerParams,
-  ImageBitmapDataURLWorkerResponse,
-} from '@rrweb/types';
-
-const lastBlobMap: Map<number, string> = new Map();
-const transparentBlobMap: Map<string, string> = new Map();
-
-export interface ImageBitmapDataURLRequestWorker {
-  postMessage: (
-    message: ImageBitmapDataURLWorkerParams,
-    transfer?: [ImageBitmap],
-  ) => void;
-  onmessage: (message: MessageEvent<ImageBitmapDataURLWorkerResponse>) => void;
-}
-
-interface ImageBitmapDataURLResponseWorker {
-  onmessage:
-    | null
-    | ((message: MessageEvent<ImageBitmapDataURLWorkerParams>) => void);
-  postMessage(e: ImageBitmapDataURLWorkerResponse): void;
-}
-
-async function getTransparentBlobFor(
-  width: number,
-  height: number,
-  dataURLOptions: DataURLOptions,
-): Promise<string> {
-  const id = `${width}-${height}`;
-  if ('OffscreenCanvas' in globalThis) {
-    if (transparentBlobMap.has(id)) return transparentBlobMap.get(id)!;
-    const offscreen = new OffscreenCanvas(width, height);
-    offscreen.getContext('2d'); // creates rendering context for `converToBlob`
-    const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
-    const arrayBuffer = await blob.arrayBuffer();
-    const base64 = encode(arrayBuffer); // cpu intensive
-    transparentBlobMap.set(id, base64);
-    return base64;
-  } else {
-    return '';
-  }
-}
-
-// `as any` because: https://github.com/Microsoft/TypeScript/issues/20595
-const worker: ImageBitmapDataURLResponseWorker = self;
-
-// eslint-disable-next-line @typescript-eslint/no-misused-promises
-worker.onmessage = async function (e) {
-  if ('OffscreenCanvas' in globalThis) {
-    const { id, bitmap, width, height, dataURLOptions } = e.data;
-
-    const transparentBase64 = getTransparentBlobFor(
-      width,
-      height,
-      dataURLOptions,
-    );
-
-    const offscreen = new OffscreenCanvas(width, height);
-    const ctx = offscreen.getContext('2d')!;
-
-    ctx.drawImage(bitmap, 0, 0);
-    bitmap.close();
-    const blob = await offscreen.convertToBlob(dataURLOptions); // takes a while
-    const type = blob.type;
-    const arrayBuffer = await blob.arrayBuffer();
-    const base64 = encode(arrayBuffer); // cpu intensive
-
-    // on first try we should check if canvas is transparent,
-    // no need to save it's contents in that case
-    if (!lastBlobMap.has(id) && (await transparentBase64) === base64) {
-      lastBlobMap.set(id, base64);
-      return worker.postMessage({ id });
-    }
-
-    if (lastBlobMap.get(id) === base64) return worker.postMessage({ id }); // unchanged
-    worker.postMessage({
-      id,
-      type,
-      base64,
-      width,
-      height,
-    });
-    lastBlobMap.set(id, base64);
-  } else {
-    return worker.postMessage({ id: e.data.id });
-  }
-};
diff --git a/packages/rrweb/src/record/workers/tsconfig.json b/packages/rrweb/src/record/workers/tsconfig.json
deleted file mode 100644
index cf0e05cb8e..0000000000
--- a/packages/rrweb/src/record/workers/tsconfig.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "lib": ["webworker"]
-  },
-  "exclude": ["workers.d.ts"]
-}
diff --git a/packages/rrweb/src/record/workers/workers.d.ts b/packages/rrweb/src/record/workers/workers.d.ts
deleted file mode 100644
index ead3d9e1f4..0000000000
--- a/packages/rrweb/src/record/workers/workers.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module 'web-worker:*' {
-  const WorkerFactory: new () => Worker;
-  export default WorkerFactory;
-}
diff --git a/packages/rrweb/src/replay/canvas/2d.ts b/packages/rrweb/src/replay/canvas/2d.ts
index 93d852399d..c170d17867 100644
--- a/packages/rrweb/src/replay/canvas/2d.ts
+++ b/packages/rrweb/src/replay/canvas/2d.ts
@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import type { canvasMutationCommand } from '@rrweb/types';
+import type { canvasMutationCommand } from 'howdygo-rrweb-types';
 import { deserializeArg } from './deserialize-args';
 
 export default async function canvasMutation({
diff --git a/packages/rrweb/src/replay/canvas/deserialize-args.ts b/packages/rrweb/src/replay/canvas/deserialize-args.ts
index a690d7986f..37bce9ee3a 100644
--- a/packages/rrweb/src/replay/canvas/deserialize-args.ts
+++ b/packages/rrweb/src/replay/canvas/deserialize-args.ts
@@ -1,6 +1,6 @@
 import { decode } from 'base64-arraybuffer';
 import type { Replayer } from '../';
-import type { CanvasArg, SerializedCanvasArg } from '@rrweb/types';
+import type { CanvasArg, SerializedCanvasArg } from 'howdygo-rrweb-types';
 
 // TODO: add ability to wipe this list
 type GLVarMap = Map<string, any[]>;
diff --git a/packages/rrweb/src/replay/canvas/index.ts b/packages/rrweb/src/replay/canvas/index.ts
index e4c346d6bc..758744aaab 100644
--- a/packages/rrweb/src/replay/canvas/index.ts
+++ b/packages/rrweb/src/replay/canvas/index.ts
@@ -4,7 +4,7 @@ import {
   canvasMutationCommand,
   canvasMutationData,
   canvasMutationParam,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import webglMutation from './webgl';
 import canvas2DMutation from './2d';
 
diff --git a/packages/rrweb/src/replay/canvas/webgl.ts b/packages/rrweb/src/replay/canvas/webgl.ts
index 85ff81f8d6..4bcb5dead7 100644
--- a/packages/rrweb/src/replay/canvas/webgl.ts
+++ b/packages/rrweb/src/replay/canvas/webgl.ts
@@ -1,5 +1,5 @@
 import type { Replayer } from '../';
-import { CanvasContext, canvasMutationCommand } from '@rrweb/types';
+import { CanvasContext, canvasMutationCommand } from 'howdygo-rrweb-types';
 import { deserializeArg, variableListFor } from './deserialize-args';
 
 function getContext(
diff --git a/packages/rrweb/src/replay/index.ts b/packages/rrweb/src/replay/index.ts
index 89aa66d933..68c5b2dd69 100644
--- a/packages/rrweb/src/replay/index.ts
+++ b/packages/rrweb/src/replay/index.ts
@@ -9,7 +9,7 @@ import {
   attributes,
   serializedElementNodeWithId,
   toLowerCase,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import {
   RRDocument,
   createOrGetNode,
@@ -17,7 +17,7 @@ import {
   buildFromDom,
   diff,
   getDefaultSN,
-} from 'rrdom';
+} from 'howdygo-rrdom';
 import type {
   RRNode,
   RRElement,
@@ -27,7 +27,7 @@ import type {
   RRCanvasElement,
   ReplayerHandler,
   Mirror as RRDOMMirror,
-} from 'rrdom';
+} from 'howdygo-rrdom';
 import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
 import { Timer } from './timer';
@@ -62,7 +62,7 @@ import {
   styleSheetRuleData,
   styleDeclarationData,
   adoptedStyleSheetData,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import {
   polyfill,
   queueToResolveTrees,
@@ -192,6 +192,7 @@ export class Replayer {
       pauseAnimation: true,
       mouseTail: defaultMouseTailConfig,
       useVirtualDom: true, // Virtual-dom optimization is enabled by default.
+      disableScroll: false, // Disable scroll mutations
       logger: console,
     };
     this.config = Object.assign({}, defaultConfig, config);
@@ -1043,7 +1044,7 @@ export class Replayer {
         );
         const commands =
           'commands' in event.data ? event.data.commands : [event.data];
-        commands.forEach((c) => {
+        commands.forEach((c: any) => {
           this.preloadImages(c, event);
         });
       }
@@ -1252,7 +1253,8 @@ export class Replayer {
           break;
         }
         // Use isSync rather than this.usingVirtualDom because not every fast-forward process uses virtual dom optimization.
-        this.applyScroll(d, isSync);
+        // Do not force scroll mutations in the case `disableScroll` flag is enabled
+        this.applyScroll(d, isSync, false);
         break;
       }
       case IncrementalSource.ViewportResize:
@@ -1826,7 +1828,8 @@ export class Replayer {
    * @param d - the scroll data
    * @param isSync - whether the replayer is in sync mode(fast-forward)
    */
-  private applyScroll(d: scrollData, isSync: boolean) {
+  public applyScroll(d: scrollData, isSync: boolean, forceScroll: boolean | undefined = false) {
+    if (this.config.disableScroll && !forceScroll) return;
     const target = this.mirror.getNode(d.id);
     if (!target) {
       return this.debugNodeNotFound(d, d.id);
diff --git a/packages/rrweb/src/replay/machine.ts b/packages/rrweb/src/replay/machine.ts
index 07d948fdca..0fb67a0089 100644
--- a/packages/rrweb/src/replay/machine.ts
+++ b/packages/rrweb/src/replay/machine.ts
@@ -6,7 +6,7 @@ import {
   EventType,
   Emitter,
   IncrementalSource,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import { Timer, addDelay } from './timer';
 
 export type PlayerContext = {
diff --git a/packages/rrweb/src/replay/media/index.ts b/packages/rrweb/src/replay/media/index.ts
index 3c137665df..5cf791e14b 100644
--- a/packages/rrweb/src/replay/media/index.ts
+++ b/packages/rrweb/src/replay/media/index.ts
@@ -1,8 +1,8 @@
-import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
-import type { RRMediaElement } from 'rrdom/es';
+import { Emitter, MediaInteractions, ReplayerEvents } from 'howdygo-rrweb-types';
+import type { RRMediaElement } from 'howdygo-rrdom/es';
 import type { createPlayerService, createSpeedService } from '../machine';
-import type { Mirror, mediaAttributes } from 'rrweb-snapshot';
-import type { mediaInteractionData } from '@rrweb/types';
+import type { Mirror, mediaAttributes } from 'howdygo-rrweb-snapshot';
+import type { mediaInteractionData } from 'howdygo-rrweb-types';
 
 type MediaState = {
   isPlaying: boolean;
diff --git a/packages/rrweb/src/replay/timer.ts b/packages/rrweb/src/replay/timer.ts
index 0d18c3f870..bd50dd383f 100644
--- a/packages/rrweb/src/replay/timer.ts
+++ b/packages/rrweb/src/replay/timer.ts
@@ -3,7 +3,7 @@ import {
   eventWithTime,
   EventType,
   IncrementalSource,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 
 export class Timer {
   public timeOffset = 0;
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 03c9a59fdc..bc849c33d8 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -5,12 +5,12 @@ import type {
   MaskInputFn,
   MaskTextFn,
   DataURLOptions,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 import type { PackFn, UnpackFn } from './packer/base';
 import type { IframeManager } from './record/iframe-manager';
 import type { ShadowDomManager } from './record/shadow-dom-manager';
 import type { Replayer } from './replay';
-import type { RRNode } from 'rrdom';
+import type { RRNode } from 'howdygo-rrdom';
 import type { CanvasManager } from './record/observers/canvas/canvas-manager';
 import type { StylesheetManager } from './record/stylesheet-manager';
 import type {
@@ -37,7 +37,7 @@ import type {
   styleDeclarationCallback,
   styleSheetRuleCallback,
   viewportResizeCallback,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import type ProcessedNodeManager from './record/processed-node-manager';
 
 export type recordOptions<T> = {
@@ -193,6 +193,7 @@ export type playerConfig = {
     log: (...args: Parameters<typeof console.log>) => void;
     warn: (...args: Parameters<typeof console.warn>) => void;
   };
+  disableScroll: boolean;
   plugins?: ReplayPlugin[];
 };
 
@@ -212,7 +213,7 @@ declare global {
 }
 
 export type CrossOriginIframeMessageEventContent<T = eventWithTime> = {
-  type: 'rrweb';
+  type: 'howdygo-rrweb';
   event: T;
   // The origin of the iframe which originally emits this message. It is used to check the integrity of message and to filter out the rrweb messages which are forwarded by some sites.
   origin: string;
diff --git a/packages/rrweb/src/utils.ts b/packages/rrweb/src/utils.ts
index f426689d2f..4bc727304b 100644
--- a/packages/rrweb/src/utils.ts
+++ b/packages/rrweb/src/utils.ts
@@ -8,10 +8,10 @@ import type {
   IWindow,
   DeprecatedMirror,
   textMutation,
-} from '@rrweb/types';
-import type { IMirror, Mirror } from 'rrweb-snapshot';
-import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'rrweb-snapshot';
-import type { RRNode, RRIFrameElement } from 'rrdom';
+} from 'howdygo-rrweb-types';
+import type { IMirror, Mirror } from 'howdygo-rrweb-snapshot';
+import { isShadowRoot, IGNORED_NODE, classMatchesRegex } from 'howdygo-rrweb-snapshot';
+import type { RRNode, RRIFrameElement } from 'howdygo-rrdom';
 
 export function on(
   type: string,
@@ -278,7 +278,7 @@ export function isSerialized(n: Node, mirror: Mirror): boolean {
 
 export function isIgnored(n: Node, mirror: Mirror): boolean {
   // The main part of the slimDOM check happens in
-  // rrweb-snapshot::serializeNodeWithId
+  // howdygo-rrweb-snapshot::serializeNodeWithId
   return mirror.getId(n) === IGNORED_NODE;
 }
 
diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
index f349bd2669..ce34ed31c6 100644
--- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -4965,6 +4965,740 @@ exports[`record integration tests can use maskInputOptions to configure which ty
 ]"
 `;
 
+exports[`record integration tests canvas should record canvas within iframe 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"iframe-canvas\\",
+                      \\"width\\": \\"100%\\",
+                      \\"height\\": \\"100%\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 10
+                      }
+                    ],
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\\\n\\",
+                    \\"id\\": 11
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 7,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 1,
+                \\"name\\": \\"html\\",
+                \\"publicId\\": \\"\\",
+                \\"systemId\\": \\"\\",
+                \\"rootId\\": 12,
+                \\"id\\": 13
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {
+                  \\"lang\\": \\"en\\"
+                },
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 16
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"charset\\": \\"UTF-8\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 12,
+                        \\"id\\": 17
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 18
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"meta\\",
+                        \\"attributes\\": {
+                          \\"name\\": \\"viewport\\",
+                          \\"content\\": \\"width=device-width, initial-scale=1.0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"rootId\\": 12,
+                        \\"id\\": 19
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 20
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"title\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"canvas\\",
+                            \\"rootId\\": 12,
+                            \\"id\\": 22
+                          }
+                        ],
+                        \\"rootId\\": 12,
+                        \\"id\\": 21
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 23
+                      }
+                    ],
+                    \\"rootId\\": 12,
+                    \\"id\\": 15
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n  \\",
+                    \\"rootId\\": 12,
+                    \\"id\\": 24
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 26
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"canvas\\",
+                        \\"attributes\\": {
+                          \\"id\\": \\"myCanvas\\",
+                          \\"width\\": \\"200\\",
+                          \\"height\\": \\"100\\",
+                          \\"style\\": \\"border: 1px solid #000000;\\",
+                          \\"rr_dataURL\\": \\"base64-0\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"\\\\n    \\",
+                            \\"rootId\\": 12,
+                            \\"id\\": 28
+                          }
+                        ],
+                        \\"rootId\\": 12,
+                        \\"id\\": 27
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n    \\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 29
+                      },
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"script\\",
+                        \\"attributes\\": {},
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                            \\"rootId\\": 12,
+                            \\"id\\": 31
+                          }
+                        ],
+                        \\"rootId\\": 12,
+                        \\"id\\": 30
+                      },
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n  \\\\n\\\\n\\",
+                        \\"rootId\\": 12,
+                        \\"id\\": 32
+                      }
+                    ],
+                    \\"rootId\\": 12,
+                    \\"id\\": 25
+                  }
+                ],
+                \\"rootId\\": 12,
+                \\"id\\": 14
+              }
+            ],
+            \\"id\\": 12
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 27,
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"moveTo\\",
+          \\"args\\": [
+            0,
+            0
+          ]
+        },
+        {
+          \\"property\\": \\"lineTo\\",
+          \\"args\\": [
+            200,
+            100
+          ]
+        },
+        {
+          \\"property\\": \\"stroke\\",
+          \\"args\\": []
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record integration tests canvas should record canvas within shadow dom 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"shadow-root\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"canvas\\",
+                        \\"attributes\\": {
+                          \\"width\\": \\"200\\",
+                          \\"height\\": \\"200\\",
+                          \\"rr_dataURL\\": \\"base64-0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"id\\": 8,
+                        \\"isShadow\\": true
+                      }
+                    ],
+                    \\"id\\": 7,
+                    \\"isShadowHost\\": true
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n\\",
+                    \\"id\\": 15
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 8,
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clearRect\\",
+          \\"args\\": [
+            0,
+            0,
+            200,
+            200
+          ]
+        },
+        {
+          \\"property\\": \\"fillStyle\\",
+          \\"args\\": [
+            \\"green\\"
+          ],
+          \\"setter\\": true
+        },
+        {
+          \\"property\\": \\"fillRect\\",
+          \\"args\\": [
+            40,
+            40,
+            50,
+            50
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 8,
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clearRect\\",
+          \\"args\\": [
+            0,
+            0,
+            200,
+            200
+          ]
+        },
+        {
+          \\"property\\": \\"fillStyle\\",
+          \\"args\\": [
+            \\"green\\"
+          ],
+          \\"setter\\": true
+        },
+        {
+          \\"property\\": \\"fillRect\\",
+          \\"args\\": [
+            100,
+            100,
+            50,
+            50
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
+exports[`record integration tests canvas should record canvas within shadow dom with sampling 1`] = `
+"[
+  {
+    \\"type\\": 0,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 1,
+    \\"data\\": {}
+  },
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"div\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"shadow-root\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"canvas\\",
+                        \\"attributes\\": {
+                          \\"width\\": \\"200\\",
+                          \\"height\\": \\"200\\",
+                          \\"rr_dataURL\\": \\"base64-0\\"
+                        },
+                        \\"childNodes\\": [],
+                        \\"id\\": 8,
+                        \\"isShadow\\": true
+                      }
+                    ],
+                    \\"id\\": 7,
+                    \\"isShadowHost\\": true
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n    \\",
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 11
+                      }
+                    ],
+                    \\"id\\": 10
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n    \\\\n    \\\\n\\",
+                    \\"id\\": 12
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n\\\\n\\",
+                    \\"id\\": 15
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 8,
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clearRect\\",
+          \\"args\\": [
+            0,
+            0,
+            200,
+            200
+          ]
+        },
+        {
+          \\"property\\": \\"drawImage\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"ImageBitmap\\",
+              \\"args\\": [
+                {
+                  \\"rr_type\\": \\"Blob\\",
+                  \\"data\\": [
+                    {
+                      \\"rr_type\\": \\"ArrayBuffer\\",
+                      \\"base64\\": \\"base64-1\\"
+                    }
+                  ],
+                  \\"type\\": \\"image/png\\"
+                }
+              ]
+            },
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 8,
+      \\"type\\": 0,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clearRect\\",
+          \\"args\\": [
+            0,
+            0,
+            200,
+            200
+          ]
+        },
+        {
+          \\"property\\": \\"drawImage\\",
+          \\"args\\": [
+            {
+              \\"rr_type\\": \\"ImageBitmap\\",
+              \\"args\\": [
+                {
+                  \\"rr_type\\": \\"Blob\\",
+                  \\"data\\": [
+                    {
+                      \\"rr_type\\": \\"ArrayBuffer\\",
+                      \\"base64\\": \\"base64-2\\"
+                    }
+                  ],
+                  \\"type\\": \\"image/png\\"
+                }
+              ]
+            },
+            0,
+            0
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`record integration tests handles null attribute values 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/benchmark/dom-mutation.test.ts b/packages/rrweb/test/benchmark/dom-mutation.test.ts
index a4124c3f98..1ef112bb68 100644
--- a/packages/rrweb/test/benchmark/dom-mutation.test.ts
+++ b/packages/rrweb/test/benchmark/dom-mutation.test.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import type { Page } from 'puppeteer';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import type { recordOptions } from '../../src/types';
 import { startServer, launchPuppeteer, ISuite, getServerURL } from '../utils';
 
diff --git a/packages/rrweb/test/benchmark/replay-fast-forward.test.ts b/packages/rrweb/test/benchmark/replay-fast-forward.test.ts
index 6fbed1a055..44c4912c17 100644
--- a/packages/rrweb/test/benchmark/replay-fast-forward.test.ts
+++ b/packages/rrweb/test/benchmark/replay-fast-forward.test.ts
@@ -1,7 +1,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import * as https from 'https';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import type { recordOptions } from '../../src/types';
 import { launchPuppeteer, ISuite } from '../utils';
 
@@ -71,7 +71,7 @@ const suites: Array<{
   {
     title: 'real events recorded on bugs.chromium.org',
     eventURL:
-      'https://raw.githubusercontent.com/rrweb-io/benchmark-events/main/rrdom-benchmark-1.json',
+      'https://raw.githubusercontent.com/rrweb-io/benchmark-events/main/howdygo-rrdom-benchmark-1.json',
     times: 3,
   },
 ];
diff --git a/packages/rrweb/test/e2e/webgl.test.ts b/packages/rrweb/test/e2e/webgl.test.ts
index 769a6e0784..0b29b52726 100644
--- a/packages/rrweb/test/e2e/webgl.test.ts
+++ b/packages/rrweb/test/e2e/webgl.test.ts
@@ -13,7 +13,7 @@ import {
   fakeGoto,
 } from '../utils';
 import type { recordOptions } from '../../src/types';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 expect.extend({ toMatchImageSnapshot });
 
diff --git a/packages/rrweb/test/events/adopted-style-sheet-modification.ts b/packages/rrweb/test/events/adopted-style-sheet-modification.ts
index fd26ea9c37..f39975b0e9 100644
--- a/packages/rrweb/test/events/adopted-style-sheet-modification.ts
+++ b/packages/rrweb/test/events/adopted-style-sheet-modification.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/adopted-style-sheet.ts b/packages/rrweb/test/events/adopted-style-sheet.ts
index 70ddc4305a..517a4b7561 100644
--- a/packages/rrweb/test/events/adopted-style-sheet.ts
+++ b/packages/rrweb/test/events/adopted-style-sheet.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/bad-textarea.ts b/packages/rrweb/test/events/bad-textarea.ts
index ad2a6ebb63..40557f157d 100644
--- a/packages/rrweb/test/events/bad-textarea.ts
+++ b/packages/rrweb/test/events/bad-textarea.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/canvas-in-iframe.ts b/packages/rrweb/test/events/canvas-in-iframe.ts
index 28abee2c2e..e5a394cea0 100644
--- a/packages/rrweb/test/events/canvas-in-iframe.ts
+++ b/packages/rrweb/test/events/canvas-in-iframe.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/custom-element-define-class.ts b/packages/rrweb/test/events/custom-element-define-class.ts
index 3f9bd9fa6b..1def45d97c 100644
--- a/packages/rrweb/test/events/custom-element-define-class.ts
+++ b/packages/rrweb/test/events/custom-element-define-class.ts
@@ -1,5 +1,5 @@
-import { EventType } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/document-replacement.ts b/packages/rrweb/test/events/document-replacement.ts
index 8b79e7dc9b..2a90dff1f7 100644
--- a/packages/rrweb/test/events/document-replacement.ts
+++ b/packages/rrweb/test/events/document-replacement.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/hover.ts b/packages/rrweb/test/events/hover.ts
index 73b2a4ea55..54691e2fad 100644
--- a/packages/rrweb/test/events/hover.ts
+++ b/packages/rrweb/test/events/hover.ts
@@ -1,4 +1,4 @@
-import { IncrementalSource, MouseInteractions } from '@rrweb/types';
+import { IncrementalSource, MouseInteractions } from 'howdygo-rrweb-types';
 import type { eventWithTime } from '../../../types/src';
 
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/iframe-shadowdom-hover.ts b/packages/rrweb/test/events/iframe-shadowdom-hover.ts
index 0e3671dcbf..3c03a9d01c 100644
--- a/packages/rrweb/test/events/iframe-shadowdom-hover.ts
+++ b/packages/rrweb/test/events/iframe-shadowdom-hover.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/iframe.ts b/packages/rrweb/test/events/iframe.ts
index 7288b7ada7..ff257be357 100644
--- a/packages/rrweb/test/events/iframe.ts
+++ b/packages/rrweb/test/events/iframe.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/input.ts b/packages/rrweb/test/events/input.ts
index a1dedc41a7..4e37be902f 100644
--- a/packages/rrweb/test/events/input.ts
+++ b/packages/rrweb/test/events/input.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/ordering.ts b/packages/rrweb/test/events/ordering.ts
index 53dbfc2b15..0785f26d0d 100644
--- a/packages/rrweb/test/events/ordering.ts
+++ b/packages/rrweb/test/events/ordering.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/scroll-with-parent-styles.ts b/packages/rrweb/test/events/scroll-with-parent-styles.ts
index da9f1c01ef..8bc39a993f 100644
--- a/packages/rrweb/test/events/scroll-with-parent-styles.ts
+++ b/packages/rrweb/test/events/scroll-with-parent-styles.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/scroll.ts b/packages/rrweb/test/events/scroll.ts
index baf6d1e0a8..bcbf197889 100644
--- a/packages/rrweb/test/events/scroll.ts
+++ b/packages/rrweb/test/events/scroll.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/selection.ts b/packages/rrweb/test/events/selection.ts
index 2d16655592..3c2eb3e84f 100644
--- a/packages/rrweb/test/events/selection.ts
+++ b/packages/rrweb/test/events/selection.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/shadow-dom.ts b/packages/rrweb/test/events/shadow-dom.ts
index 106e848f53..caa8288012 100644
--- a/packages/rrweb/test/events/shadow-dom.ts
+++ b/packages/rrweb/test/events/shadow-dom.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 
diff --git a/packages/rrweb/test/events/style-sheet-rule-events.ts b/packages/rrweb/test/events/style-sheet-rule-events.ts
index 577c0caf41..77d4a99946 100644
--- a/packages/rrweb/test/events/style-sheet-rule-events.ts
+++ b/packages/rrweb/test/events/style-sheet-rule-events.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/style-sheet-text-mutation.ts b/packages/rrweb/test/events/style-sheet-text-mutation.ts
index d6dcc6de1e..3706a60bb3 100644
--- a/packages/rrweb/test/events/style-sheet-text-mutation.ts
+++ b/packages/rrweb/test/events/style-sheet-text-mutation.ts
@@ -1,5 +1,5 @@
-import { EventType, IncrementalSource } from '@rrweb/types';
-import type { eventWithTime } from '@rrweb/types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const now = Date.now();
 const events: eventWithTime[] = [
diff --git a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
index b1e8b12f5f..aad17b4cf2 100644
--- a/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
+++ b/packages/rrweb/test/events/video-playback-on-full-snapshot.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const events: eventWithTime[] = [
   { type: 0, data: {}, timestamp: 1900000001 },
diff --git a/packages/rrweb/test/events/video-playback.ts b/packages/rrweb/test/events/video-playback.ts
index b29841b66e..16cc62d5f1 100644
--- a/packages/rrweb/test/events/video-playback.ts
+++ b/packages/rrweb/test/events/video-playback.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 const events: eventWithTime[] = [
   { type: 0, data: {}, timestamp: 1900000001 },
diff --git a/packages/rrweb/test/html/canvas-iframe.html b/packages/rrweb/test/html/canvas-iframe.html
new file mode 100644
index 0000000000..1ae3b84224
--- /dev/null
+++ b/packages/rrweb/test/html/canvas-iframe.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <iframe id="iframe-canvas" src="./html/canvas.html" width="100%" height="100%"></iframe>
+</body>
+</html>
diff --git a/packages/rrweb/test/html/canvas-shadow-dom.html b/packages/rrweb/test/html/canvas-shadow-dom.html
new file mode 100644
index 0000000000..3c29f4cf3f
--- /dev/null
+++ b/packages/rrweb/test/html/canvas-shadow-dom.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <div id="shadow-root"></div>
+</body>
+<script>
+  const shadowRootContainer = document.getElementById('shadow-root')
+  const shadowRoot = shadowRootContainer.attachShadow({ mode: 'open' })
+
+  // Creating canvas inside the Shadow DOM
+  const shadowCanvas = document.createElement('canvas')
+  shadowRoot.appendChild(shadowCanvas);
+
+  const shadowCtx = shadowCanvas.getContext('2d')
+  shadowCanvas.width = 200;
+  shadowCanvas.height = 200;
+
+  function moveSquare(num) {
+    shadowCtx.clearRect(0, 0, shadowCanvas.width, shadowCanvas.height);
+    shadowCtx.fillStyle = 'green';
+    shadowCtx.fillRect(num * shadowCanvas.width, num * shadowCanvas.height, 50, 50);
+  }
+  moveSquare(0.2)
+
+  setTimeout(() => {
+    moveSquare(0.5)
+    window.canvasMutationApplied = true;
+  }, 10);
+</script>
+</html>
diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
index 5ce9b76469..79a35f0c6e 100644
--- a/packages/rrweb/test/integration.test.ts
+++ b/packages/rrweb/test/integration.test.ts
@@ -11,10 +11,17 @@ import {
   replaceLast,
   generateRecordSnippet,
   ISuite,
+  stripBase64,
 } from './utils';
 import type { recordOptions } from '../src/types';
-import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types';
-import { visitSnapshot, NodeType } from 'rrweb-snapshot';
+import {
+  eventWithTime,
+  EventType,
+  RecordPlugin,
+  IncrementalSource,
+  CanvasContext,
+} from 'howdygo-rrweb-types';
+import { visitSnapshot, NodeType } from 'howdygo-rrweb-snapshot';
 
 describe('record integration tests', function (this: ISuite) {
   jest.setTimeout(10_000);
@@ -833,6 +840,138 @@ describe('record integration tests', function (this: ISuite) {
     assertSnapshot(snapshots);
   });
 
+  describe('canvas', function (this: ISuite) {
+    jest.setTimeout(10_000);
+    it('should record canvas within iframe', async () => {
+      const page: puppeteer.Page = await browser.newPage();
+      await page.goto(`${serverURL}/html`);
+      await page.setContent(
+        getHtml.call(this, 'canvas-iframe.html', {
+          recordCanvas: true,
+        }),
+      );
+
+      const frameId = await waitForIFrameLoad(page, '#iframe-canvas');
+      await frameId.waitForFunction('window.canvasMutationApplied');
+      await waitForRAF(page);
+
+      const snapshots = (await page.evaluate(
+        'window.snapshots',
+      )) as eventWithTime[];
+      expect(snapshots[snapshots.length - 1].data).toEqual(
+        expect.objectContaining({
+          source: IncrementalSource.CanvasMutation,
+          type: CanvasContext['2D'],
+          commands: expect.arrayContaining([
+            {
+              args: [200, 100],
+              property: 'lineTo',
+            },
+          ]),
+        }),
+      );
+      assertSnapshot(stripBase64(snapshots));
+    });
+
+    it('should record canvas within iframe with sampling', async () => {
+      const maxFPS = 60;
+      const page: puppeteer.Page = await browser.newPage();
+      await page.goto(`${serverURL}/html`);
+      await page.setContent(
+        getHtml.call(this, 'canvas-iframe.html', {
+          recordCanvas: true,
+          sampling: {
+            canvas: maxFPS,
+          },
+        }),
+      );
+
+      const frameId = await waitForIFrameLoad(page, '#iframe-canvas');
+      await frameId.waitForFunction('window.canvasMutationApplied');
+      await waitForRAF(page);
+      await page.waitForTimeout(1000 / maxFPS);
+
+      const snapshots = (await page.evaluate(
+        'window.snapshots',
+      )) as eventWithTime[];
+      expect(snapshots[snapshots.length - 1].data).toEqual(
+        expect.objectContaining({
+          source: IncrementalSource.CanvasMutation,
+          type: CanvasContext['2D'],
+          commands: expect.arrayContaining([
+            expect.objectContaining({
+              property: 'drawImage',
+            }),
+          ]),
+        }),
+      );
+    });
+
+    it('should record canvas within shadow dom', async () => {
+      const page: puppeteer.Page = await browser.newPage();
+      await page.goto(`${serverURL}/html`);
+      await page.setContent(
+        getHtml.call(this, 'canvas-shadow-dom.html', {
+          recordCanvas: true,
+        }),
+      );
+
+      await page.waitForFunction('window.canvasMutationApplied');
+      await waitForRAF(page);
+
+      const snapshots = (await page.evaluate(
+        'window.snapshots',
+      )) as eventWithTime[];
+      expect(snapshots[snapshots.length - 1].data).toEqual(
+        expect.objectContaining({
+          source: IncrementalSource.CanvasMutation,
+          type: CanvasContext['2D'],
+          commands: expect.arrayContaining([
+            {
+              args: [100, 100, 50, 50],
+              property: 'fillRect',
+            },
+          ]),
+        }),
+      );
+      assertSnapshot(stripBase64(snapshots));
+    });
+
+    it('should record canvas within shadow dom with sampling', async () => {
+      const page: puppeteer.Page = await browser.newPage();
+      await page.goto(`${serverURL}/html`);
+      await page.setContent(
+        getHtml.call(this, 'canvas-shadow-dom.html', {
+          recordCanvas: true,
+          sampling: {
+            canvas: 60,
+          },
+        }),
+      );
+
+      await page.waitForFunction('window.canvasMutationApplied');
+      await waitForRAF(page);
+
+      await page.waitForTimeout(50);
+
+      const snapshots = (await page.evaluate(
+        'window.snapshots',
+      )) as eventWithTime[];
+      expect(snapshots[snapshots.length - 1].data).toEqual(
+        expect.objectContaining({
+          source: IncrementalSource.CanvasMutation,
+          type: CanvasContext['2D'],
+          commands: expect.arrayContaining([
+            expect.objectContaining({
+              property: 'drawImage',
+            }),
+          ]),
+        }),
+      );
+      assertSnapshot(stripBase64(snapshots));
+    });
+  });
+
   it('should record images with blob url', async () => {
     const page: puppeteer.Page = await browser.newPage();
     page.on('console', (msg) => console.log(msg.text()));
diff --git a/packages/rrweb/test/machine.test.ts b/packages/rrweb/test/machine.test.ts
index bf96a317b5..fd912bb2a6 100644
--- a/packages/rrweb/test/machine.test.ts
+++ b/packages/rrweb/test/machine.test.ts
@@ -1,6 +1,6 @@
 import { discardPriorSnapshots } from '../src/replay/machine';
 import { sampleEvents } from './utils';
-import { EventType } from '@rrweb/types';
+import { EventType } from 'howdygo-rrweb-types';
 
 const events = sampleEvents.filter(
   (e) => ![EventType.DomContentLoaded, EventType.Load].includes(e.type),
diff --git a/packages/rrweb/test/packer.test.ts b/packages/rrweb/test/packer.test.ts
index e6487d7a20..87b4a35549 100644
--- a/packages/rrweb/test/packer.test.ts
+++ b/packages/rrweb/test/packer.test.ts
@@ -1,5 +1,5 @@
 import { pack, unpack } from '../src/packer';
-import { eventWithTime, EventType } from '@rrweb/types';
+import { eventWithTime, EventType } from 'howdygo-rrweb-types';
 import { MARK } from '../src/packer/base';
 
 const event: eventWithTime = {
diff --git a/packages/rrweb/test/record.test.ts b/packages/rrweb/test/record.test.ts
index 51e7ad2342..173d958c5b 100644
--- a/packages/rrweb/test/record.test.ts
+++ b/packages/rrweb/test/record.test.ts
@@ -10,7 +10,7 @@ import {
   IncrementalSource,
   styleSheetRuleData,
   selectionData,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import {
   assertSnapshot,
   getServerURL,
diff --git a/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
index c7aeb17e1c..e465828cfa 100644
--- a/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
+++ b/packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
@@ -1,5 +1,171 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`record webgl record canvas within iframe will record changes to a canvas element 1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    }
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"id\\": 6
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"id\\": \\"iframe1\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 7
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"id\\": 8
+                  }
+                ],
+                \\"id\\": 5
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 7,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 9,
+                    \\"id\\": 11
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [],
+                    \\"rootId\\": 9,
+                    \\"id\\": 12
+                  }
+                ],
+                \\"rootId\\": 9,
+                \\"id\\": 10
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 9
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"removes\\": [],
+      \\"adds\\": [
+        {
+          \\"parentId\\": 12,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 2,
+            \\"tagName\\": \\"canvas\\",
+            \\"attributes\\": {
+              \\"id\\": \\"canvas\\"
+            },
+            \\"childNodes\\": [],
+            \\"rootId\\": 9,
+            \\"id\\": 13
+          }
+        }
+      ]
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 9,
+      \\"id\\": 13,
+      \\"type\\": 1,
+      \\"commands\\": [
+        {
+          \\"property\\": \\"clear\\",
+          \\"args\\": [
+            16384
+          ]
+        }
+      ]
+    }
+  }
+]"
+`;
+
 exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
 "[
   {
diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts
index 1b0d00f2d0..d54a7afe67 100644
--- a/packages/rrweb/test/record/cross-origin-iframes.test.ts
+++ b/packages/rrweb/test/record/cross-origin-iframes.test.ts
@@ -6,8 +6,8 @@ import type {
   listenerHandler,
   eventWithTime,
   mutationData,
-} from '@rrweb/types';
-import { EventType, IncrementalSource } from '@rrweb/types';
+} from 'howdygo-rrweb-types';
+import { EventType, IncrementalSource } from 'howdygo-rrweb-types';
 import {
   assertSnapshot,
   getServerURL,
diff --git a/packages/rrweb/test/record/error-handler.test.ts b/packages/rrweb/test/record/error-handler.test.ts
index 25b94e9f4c..4eb2fe6536 100644
--- a/packages/rrweb/test/record/error-handler.test.ts
+++ b/packages/rrweb/test/record/error-handler.test.ts
@@ -2,7 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import type * as puppeteer from 'puppeteer';
 import type { recordOptions } from '../../src/types';
-import { listenerHandler, eventWithTime, EventType } from '@rrweb/types';
+import { listenerHandler, eventWithTime, EventType } from 'howdygo-rrweb-types';
 import { launchPuppeteer } from '../utils';
 import {
   callbackWrapper,
diff --git a/packages/rrweb/test/record/webgl.test.ts b/packages/rrweb/test/record/webgl.test.ts
index 762d3607bd..6a71d88c33 100644
--- a/packages/rrweb/test/record/webgl.test.ts
+++ b/packages/rrweb/test/record/webgl.test.ts
@@ -8,14 +8,15 @@ import {
   EventType,
   IncrementalSource,
   CanvasContext,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import {
   assertSnapshot,
   launchPuppeteer,
   stripBase64,
   waitForRAF,
+  waitForIFrameLoad,
 } from '../utils';
-import type { ICanvas } from 'rrweb-snapshot';
+import type { ICanvas } from 'howdygo-rrweb-snapshot';
 
 interface ISuite {
   code: string;
@@ -315,4 +316,54 @@ describe('record webgl', function (this: ISuite) {
       assertSnapshot(stripBase64(ctx.events));
     });
   });
+
+  describe('record canvas within iframe', function (this: ISuite) {
+    jest.setTimeout(10_000);
+
+    const ctx: ISuite = setup.call(
+      this,
+      `
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <iframe id="iframe1" src="./html/empty.html"></iframe>
+        </body>
+      </html>
+    `,
+    );
+
+    it('will record changes to a canvas element', async () => {
+      const frame = await waitForIFrameLoad(ctx.page, '#iframe1');
+      await frame.evaluate(() => {
+        const canvas = document.createElement('canvas');
+        canvas.id = 'canvas';
+        document.body.appendChild(canvas);
+      });
+
+      await ctx.page.waitForTimeout(50);
+
+      await frame.evaluate(() => {
+        const canvas = document.getElementById('canvas') as HTMLCanvasElement;
+        const gl = canvas.getContext('webgl')!;
+
+        gl.clear(gl.COLOR_BUFFER_BIT);
+      });
+      await ctx.page.waitForTimeout(50);
+
+      const lastEvent = ctx.events[ctx.events.length - 1];
+      expect(lastEvent).toMatchObject({
+        data: {
+          source: IncrementalSource.CanvasMutation,
+          type: CanvasContext.WebGL,
+          commands: [
+            {
+              args: [16384],
+              property: 'clear',
+            },
+          ],
+        },
+      });
+      assertSnapshot(stripBase64(ctx.events));
+    });
+  });
 });
diff --git a/packages/rrweb/test/replay/preload-all-images.test.ts b/packages/rrweb/test/replay/preload-all-images.test.ts
index 36133d3a6d..ec2a9a092d 100644
--- a/packages/rrweb/test/replay/preload-all-images.test.ts
+++ b/packages/rrweb/test/replay/preload-all-images.test.ts
@@ -11,7 +11,7 @@ import {
   IncrementalSource,
   EventType,
   eventWithTime,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 
 let replayer: Replayer;
 
diff --git a/packages/rrweb/test/replay/webgl-mutation.test.ts b/packages/rrweb/test/replay/webgl-mutation.test.ts
index 378b0636e6..27f381d4ae 100644
--- a/packages/rrweb/test/replay/webgl-mutation.test.ts
+++ b/packages/rrweb/test/replay/webgl-mutation.test.ts
@@ -6,7 +6,7 @@ import { polyfillWebGLGlobals } from '../utils';
 polyfillWebGLGlobals();
 
 import webglMutation from '../../src/replay/canvas/webgl';
-import { CanvasContext } from '@rrweb/types';
+import { CanvasContext } from 'howdygo-rrweb-types';
 import { variableListFor } from '../../src/replay/canvas/deserialize-args';
 
 let canvas: HTMLCanvasElement;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index b54d360a6b..eb39aac02e 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -25,7 +25,7 @@ import adoptedStyleSheetModification from './events/adopted-style-sheet-modifica
 import documentReplacementEvents from './events/document-replacement';
 import hoverInIframeShadowDom from './events/iframe-shadowdom-hover';
 import customElementDefineClass from './events/custom-element-define-class';
-import { ReplayerEvents } from '@rrweb/types';
+import { ReplayerEvents } from 'howdygo-rrweb-types';
 
 interface ISuite {
   code: string;
diff --git a/packages/rrweb/test/utils.ts b/packages/rrweb/test/utils.ts
index 30a36abfcb..a2de338f46 100644
--- a/packages/rrweb/test/utils.ts
+++ b/packages/rrweb/test/utils.ts
@@ -1,4 +1,4 @@
-import { NodeType } from 'rrweb-snapshot';
+import { NodeType } from 'howdygo-rrweb-snapshot';
 import {
   EventType,
   IncrementalSource,
@@ -8,7 +8,7 @@ import {
   Optional,
   mouseInteractionData,
   pluginEvent,
-} from '@rrweb/types';
+} from 'howdygo-rrweb-types';
 import type { recordOptions } from '../src/types';
 import * as puppeteer from 'puppeteer';
 import { format } from 'prettier';
@@ -338,7 +338,10 @@ export function stripBase64(events: eventWithTime[]) {
     const newObj: Partial<T> = {};
     for (const prop in obj) {
       const value = obj[prop];
-      if (prop === 'base64' && typeof value === 'string') {
+      if (
+        (prop === 'base64' || prop === 'rr_dataURL') &&
+        typeof value === 'string'
+      ) {
         let index = base64Strings.indexOf(value);
         if (index === -1) {
           index = base64Strings.push(value) - 1;
@@ -353,11 +356,11 @@ export function stripBase64(events: eventWithTime[]) {
 
   return events.map((evt) => {
     if (
-      evt.type === EventType.IncrementalSnapshot &&
-      evt.data.source === IncrementalSource.CanvasMutation
+      evt.type === EventType.FullSnapshot ||
+      evt.type === EventType.IncrementalSnapshot
     ) {
       const newData = walk(evt.data);
-      return { ...evt, data: newData };
+      return { ...evt, data: newData } as eventWithTime;
     }
     return evt;
   });
@@ -701,7 +704,8 @@ export function generateRecordSnippet(options: recordOptions<eventWithTime>) {
     recordCanvas: ${options.recordCanvas},
     recordAfter: '${options.recordAfter || 'load'}',
     inlineImages: ${options.inlineImages},
-    plugins: ${options.plugins}
+    plugins: ${options.plugins},
+    sampling: ${JSON.stringify(options.sampling)},
   });
   `;
 }
diff --git a/packages/rrweb/tsconfig.json b/packages/rrweb/tsconfig.json
index fb1b407ad6..93d911a015 100644
--- a/packages/rrweb/tsconfig.json
+++ b/packages/rrweb/tsconfig.json
@@ -11,7 +11,8 @@
     "outDir": "build",
     "lib": [
       "es6",
-      "dom"
+      "dom",
+      "es2021.weakref"
     ],
     "downlevelIteration": true,
     "importsNotUsedAsValues": "error",
diff --git a/packages/types/CHANGELOG.md b/packages/types/CHANGELOG.md
index e0966d11bc..a898200d43 100644
--- a/packages/types/CHANGELOG.md
+++ b/packages/types/CHANGELOG.md
@@ -1,6 +1,6 @@
 # @rrweb/types
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
@@ -9,7 +9,7 @@
 - [#1369](https://github.com/rrweb-io/rrweb/pull/1369) [`c278d06`](https://github.com/rrweb-io/rrweb/commit/c278d068a0e2f1175cce7cc63920ac1fbf4783cf) Thanks [@stefansundin](https://github.com/stefansundin)! - Fix type error when using `"moduleResolution": "NodeNext"`.
 
 - Updated dependencies [[`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`f7c6973`](https://github.com/rrweb-io/rrweb/commit/f7c6973ae9c21b9ea014bdef7101f976f04d9356)]:
-  - rrweb-snapshot@2.0.0-alpha.13
+  - rrweb-snapshot@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/types/package.json b/packages/types/package.json
index 2d61372168..a96cce67f8 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,12 +1,12 @@
 {
-  "name": "@rrweb/types",
-  "version": "2.0.0-alpha.13",
+  "name": "howdygo-rrweb-types",
+  "version": "2.0.0-alpha.19",
   "publishConfig": {
     "access": "public"
   },
   "keywords": [
-    "rrweb",
-    "@rrweb/types"
+    "howdygo-rrweb",
+    "howdygo-rrweb-types"
   ],
   "scripts": {
     "dev": "vite",
@@ -15,7 +15,7 @@
     "prepublish": "npm run build",
     "lint": "yarn eslint src/**/*.ts"
   },
-  "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/@rrweb/types#readme",
+  "homepage": "https://github.com/rrweb-io/rrweb/tree/main/packages/howdygo-rrweb-types#readme",
   "bugs": {
     "url": "https://github.com/rrweb-io/rrweb/issues"
   },
@@ -25,14 +25,14 @@
   },
   "license": "MIT",
   "type": "module",
-  "main": "./dist/types.umd.cjs",
-  "module": "./dist/types.js",
+  "main": "./dist/howdygo-rrweb-types.umd.cjs",
+  "module": "./dist/howdygo-rrweb-types.js",
   "typings": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/types.js",
-      "require": "./dist/types.umd.cjs"
+      "types": "./dist/howdygo-rrweb-types.d.ts",
+      "import": "./dist/howdygo-rrweb-types.js",
+      "require": "./dist/howdygo-rrweb-types.umd.cjs"
     }
   },
   "files": [
@@ -44,7 +44,7 @@
     "vite-plugin-dts": "^1.7.3"
   },
   "dependencies": {
-    "rrweb-snapshot": "^2.0.0-alpha.13"
+    "howdygo-rrweb-snapshot": "^2.0.0-alpha.19"
   },
   "browserslist": [
     "supports es6-class"
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 0476ce2d68..281208cc06 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -3,7 +3,7 @@ import type {
   Mirror,
   INode,
   DataURLOptions,
-} from 'rrweb-snapshot';
+} from 'howdygo-rrweb-snapshot';
 
 export enum EventType {
   DomContentLoaded,
@@ -425,6 +425,8 @@ type mouseInteractionParam = {
   id: number;
   x?: number;
   y?: number;
+  xOffset?: number;
+  yOffset?: number;
   pointerType?: PointerTypes;
 };
 
diff --git a/packages/web-extension/CHANGELOG.md b/packages/web-extension/CHANGELOG.md
index 0e09b1fa4b..675b53159f 100644
--- a/packages/web-extension/CHANGELOG.md
+++ b/packages/web-extension/CHANGELOG.md
@@ -1,12 +1,12 @@
 # @rrweb/web-extension
 
-## 2.0.0-alpha.13
+## 2.0.0-alpha.19
 
 ### Patch Changes
 
 - Updated dependencies [[`3d1877c`](https://github.com/rrweb-io/rrweb/commit/3d1877cff83d9a018630674fb6e730050ceef812), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`123a81e`](https://github.com/rrweb-io/rrweb/commit/123a81e12d072cd95d701231176d7eb2d03b3961), [`02f50d2`](https://github.com/rrweb-io/rrweb/commit/02f50d260cfe72209c94de1679336737f238e216)]:
-  - rrweb@2.0.0-alpha.13
-  - rrweb-player@2.0.0-alpha.13
+  - rrweb@2.0.0-alpha.19
+  - rrweb-player@2.0.0-alpha.19
 
 ## 2.0.0-alpha.12
 
diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json
index d06f8a8bb0..cc06a1beaf 100644
--- a/packages/web-extension/package.json
+++ b/packages/web-extension/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@rrweb/web-extension",
+  "name": "howdygo-rrweb-web-extension",
   "private": true,
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.19",
   "description": "The web extension of rrweb which helps to run rrweb on any website out of box",
   "author": "rrweb-io",
   "license": "MIT",
@@ -16,7 +16,7 @@
     "prepublish": "npm run pack:chrome && npm run pack:firefox"
   },
   "devDependencies": {
-    "@rrweb/types": "^2.0.0-alpha.13",
+    "howdygo-rrweb-types": "^2.0.0-alpha.19",
     "@types/react-dom": "^18.0.6",
     "@types/webextension-polyfill": "^0.9.1",
     "@vitejs/plugin-react": "^2.1.0",
@@ -40,7 +40,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.4.1",
-    "rrweb": "^2.0.0-alpha.13",
-    "rrweb-player": "^2.0.0-alpha.13"
+    "howdygo-rrweb": "^2.0.0-alpha.19",
+    "howdygo-rrweb-player": "^2.0.0-alpha.19"
   }
 }
diff --git a/packages/web-extension/src/background/index.ts b/packages/web-extension/src/background/index.ts
index 901669907b..4453ac0581 100644
--- a/packages/web-extension/src/background/index.ts
+++ b/packages/web-extension/src/background/index.ts
@@ -1,5 +1,5 @@
 import Browser from 'webextension-polyfill';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import Channel from '~/utils/channel';
 import {
   LocalData,
diff --git a/packages/web-extension/src/content/index.ts b/packages/web-extension/src/content/index.ts
index fce329e711..5c1dccdc9b 100644
--- a/packages/web-extension/src/content/index.ts
+++ b/packages/web-extension/src/content/index.ts
@@ -1,6 +1,6 @@
 import Browser, { Storage } from 'webextension-polyfill';
 import { nanoid } from 'nanoid';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import {
   LocalData,
   LocalDataKey,
diff --git a/packages/web-extension/src/content/inject.ts b/packages/web-extension/src/content/inject.ts
index 1d18474a01..f66b4811bf 100644
--- a/packages/web-extension/src/content/inject.ts
+++ b/packages/web-extension/src/content/inject.ts
@@ -1,6 +1,6 @@
-import { record } from 'rrweb';
+import { record } from 'howdygo-rrweb';
 import type { recordOptions } from 'rrweb/typings/types';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 import { MessageName, RecordStartedMessage } from '~/types';
 import { isInCrossOriginIFrame } from '~/utils';
 
diff --git a/packages/web-extension/src/pages/Player.tsx b/packages/web-extension/src/pages/Player.tsx
index df0bf0aadf..b688f8265d 100644
--- a/packages/web-extension/src/pages/Player.tsx
+++ b/packages/web-extension/src/pages/Player.tsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import Replayer from 'rrweb-player';
+import Replayer from 'howdygo-rrweb-player';
 import {
   Box,
   Breadcrumb,
diff --git a/packages/web-extension/src/types.ts b/packages/web-extension/src/types.ts
index f0dae57e43..f22aeeb794 100644
--- a/packages/web-extension/src/types.ts
+++ b/packages/web-extension/src/types.ts
@@ -1,4 +1,4 @@
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 export enum SyncDataKey {
   settings = 'settings',
diff --git a/packages/web-extension/src/utils/recording.ts b/packages/web-extension/src/utils/recording.ts
index 69fc8362ea..d621b316f5 100644
--- a/packages/web-extension/src/utils/recording.ts
+++ b/packages/web-extension/src/utils/recording.ts
@@ -1,5 +1,5 @@
 import Browser from 'webextension-polyfill';
-import type { eventWithTime } from '@rrweb/types';
+import type { eventWithTime } from 'howdygo-rrweb-types';
 
 import {
   LocalData,
diff --git a/packages/web-extension/src/utils/storage.ts b/packages/web-extension/src/utils/storage.ts
index 9c52c38a05..c6fc8adb56 100644
--- a/packages/web-extension/src/utils/storage.ts
+++ b/packages/web-extension/src/utils/storage.ts
@@ -1,5 +1,5 @@
 import { openDB } from 'idb';
-import { eventWithTime } from '@rrweb/types';
+import { eventWithTime } from 'howdygo-rrweb-types';
 import { Session } from '~/types';
 
 /**