Record canvas snapshots N times per second (#859)

* Only record canvas when recordCanvas is true

* All should be compiled first

Makes recompiling+debugging a lot faster

* Add support for compiling web workes

Replaces @rollup/plugin-typescript for rollup-plugin-typescript2 as the former is incompatible with rollup-plugin-web-worker-loader

* Update yarn.lock

* Upgrade to typescript 4.5.5

* add support for replay of ImageBitmap in 2d canvas

* Snapshot canvases in a web-worker on FPS basis

* Fix performance of canvas recording and playback

* Wait for all images to be preloaded before checking results

* flatten base64 strings, as encoding isn't consistent

* Cleanup

* Add serializing to 2d canvases as well

* Disable blob serialize test

We don't have any code for it yet

* Upgrade @rollup/plugin-commonjs to 21.0.2

Fixes
https://linguinecode.com/post/import-export-appear-at-the-top-level

* Move canvas recording options to `sampling`

Based on: https://github.com/rrweb-io/rrweb/pull/859#discussion_r846582146

docs/recipes/canvas.md

@@ -11,6 +11,18 @@ rrweb.record({
 });
 ```
 
+Alternatively enable image snapshot recording of Canvas at a maximum of 15 frames per second：
+
+```js
+rrweb.record({
+  emit(event) {},
+  recordCanvas: true,
+  sampling: {
+    canvas: 15,
+  },
+});
+```
+
 Enable replaying Canvas：
 
 ```js

docs/recipes/canvas.zh_CN.md

@@ -12,6 +12,18 @@ rrweb.record({
 });
 ```
 
+或者启用每秒 15 帧的 Canvas 图像快照记录：
+
+```js
+rrweb.record({
+  emit(event) {},
+  recordCanvas: true,
+  sampling: {
+    canvas: 15,
+  },
+});
+```
+
 回放时对 Canvas 进行回放：
 
 ```js

docs/recipes/optimize-storage.md

@@ -17,6 +17,7 @@ Some common patterns may emit lots of events are:
 - long list
 - complex SVG
 - element with JS controlled animation
+- canvas animations
 
 ## Sampling
 

docs/recipes/optimize-storage.zh_CN.md

@@ -17,6 +17,7 @@
 - 长列表
 - 复杂的 SVG
 - 包含 JS 控制动画的元素
+- canvas 动画
 
 ## 抽样策略