Chore: Migrate build to vite (#1033)

* Chore: Add move most types from rrweb to @rrweb/types package * Split off type imports * Split off type import to its own line * Get vite to generate type definitions * Apply formatting changes * noEmit not allowed in tsconfig, moved it to build step * Migrate rrdom-nodejs build to vite * Apply formatting changes * Migrate rrweb-snapshot to vite * Unify configs * Chore: Migrate rrdom to vite Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore` to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined. To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not. * Chore: Migrate rrweb to vite WIP * build:browser was removed (for now) * BREAKING: moved rrweb-plugin-console to its own npm module This removes console from rrweb-all.js * Support cjs files in startServer * Move canvas-webrtc plugin to its own package * Chore: move sequential-id plugin to its own package * Chore: Configure rrweb's vite bundling * `Id` had lowercase `d` before, making it lowercase again * Test: Move console tests to their own package * remove unused utils from rrdom * pull in latest version of master something when wrong earlier when resolving merge conflicts, this should be correct * Fix type casting issue in diff.ts * Fix typo * Fix duplicate entries in package.json and tsconfig.json * Apply formatting changes * Update dependencies in package.json files * Update dependencies to use Vite 5.2.8 in package.json files * Get tests passing for rrdom `apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies * Fix image loading issue in integration tests * Move pack/unpack to its own @rrweb/packer module * Get tests to work in rrdom-nodejs * Port tests in rrweb-snapshot to vitest and fix them * Fix tests for rrweb-plugin-console-record * Add @rrweb/all package * Fix publint and attw errors for rrdom and @rrweb/types * Use shared vitest.config.ts in rrweb-snapshot package * Fix publint and attw issues for rrweb-snapshot * Export `ReplayPlugin` type directly from rrweb * Fix publint and attw issues for packages * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * Fix publint & attw issue. I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md And had to choose one of these three methods described here: https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility And I ended up going for the method described here: 1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects) The redirect method seemed the least invasive and most effective. * move some rrdom tests that require rrweb to rrweb package * Use pre-jest 29 syntax for snapshotting * get rrweb passing publint and attw * const enum does not work with isolated modules flag * Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts * Fix paths * Move tests for console record plugin and fix bundle path * Fix tests for rrweb * pack integration tests were moved to @rrweb/all * Update rrweb bundle path in test files * Fix flaky scroll emit from test * Migrate rrweb's tests over to vitest and make them pass * Make sure benchmarks & updating tests work * Remove jest from rrweb * Fix paths * always use rrweb's own cssom * Update tsconfig.json for rrweb-plugin-sequential-id-record Fixes this error: Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb' * Add tsbuildinfo config to extended tsconfig files * Move rrdom over to vitest * Apply formatting changes * Update rrweb imports to use the new package structure * extend rrweb-snapshot's tsconfig from monorepo base config * extend @rrweb/types's tsconfig from monorepo base config * extend rrdom's tsconfig from monorepo base config * extend rrdom-nodejs's tsconfig from monorepo base config * extend web-extension's tsconfig from monorepo base config * unify tsconfigs * Continue when tests fail * Add stricter type checking * Add check-types global command * remove jest * Remove unused code * Add check-types command to build script * Fix linting issues * Add setup Chrome action for CI/CD workflow * Update puppeteer version in package.json for rrweb * Update Chrome setup in CI/CD workflow * Update Chrome setup in CI/CD workflow * Add Chrome setup and test cache location * Update CI/CD workflow to test chrome cache location * Add chrome installation step to CI/CD workflow * Update Puppeteer configuration for headless testing * Update dependencies and workflow configuration * Use same version of chrome on CI as is run locally * Use version of chrome that seems to work with rrdom tests * Try using puppeteerrc to define chrome version * Add .cache directory to .gitignore * Move global flag to vitest config * Update puppeteer version to 20.9.0 * Update console log messages in rrweb-plugin-console-record for new puppeteer version * Remove redundant Chrome setup from CI/CD workflow * Add minification and umd for all built files * Update import paths for rrweb dist files * Add @rrweb/replay and @rrweb/record * Add script to lint packages * Apply formatting changes * exclude styles export from typescript package type checking * WIP Move rrweb-player over to vite * Apply formatting changes * chore: Update rrweb plugin import paths * Remove rollup from rrweb-player * Fix typing issues * Fix typing issues * chore: Update rrweb-player to use vite for build process * Apply formatting changes * chore: Export Player class in rrweb-player/src/main.ts Makes attw happy * Apply formatting changes * Gets wiped by yarn workspaces-to-typescript-project-references * Add .eslintignore and .eslintrc.cjs files for rrweb-player package * Apply formatting changes * Update dependencies in rrweb-player/package.json * Apply formatting changes * chore: Update eslint configuration for rrweb-player package * Apply formatting changes * chore: Remove unused files from rrweb-player package * Apply formatting changes * chore: Update rrweb-player import path to use rrweb-player.cjs * chore: Update addEventListener signature in rrweb-player * Apply formatting changes * Add .eslintignore and update .gitignore files for to root * Apply formatting changes * Update documentation * Update @rrweb/types package description * Apply formatting changes * Update build and run commands in CONTRIBUTING.md * Apply formatting changes * Update package versions to 2.0.0-alpha.13 * Apply formatting changes * Apply formatting changes * Fix import statement in media/index.ts * Apply formatting changes * chore: Update .gitignore to exclude build and dist directories * Apply formatting changes * Apply formatting changes * Migrate setTimeout to vitest * Apply formatting changes * Apply formatting changes * Fix isNativeShadowDom function signature in utils.ts * try out jsr * Apply formatting changes * Update package versions to 2.0.0-alpha.14 * Apply formatting changes * Fix name of rrwebSnapshot object * Apply formatting changes * Remove unused lock files * Apply formatting changes * Update rrweb bundle path to use umd.cjs format * Apply formatting changes * Trigger tests to run again * Rename snapshots for vitest * Apply formatting changes * Ping CI * Apply formatting changes * Ping CI * Apply formatting changes * Ignore files generated by svelte-kit for prettier * Correct Player object
2026-04-01 12:00:00 +08:00
parent 4055c69e26
commit 5a85ddf013
266 changed files with 11616 additions and 9614 deletions
--- a/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/index.ts
+++ b/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/index.ts
@@ -0,0 +1,306 @@
+import type { Mirror } from 'rrweb-snapshot';
+import SimplePeer from 'simple-peer-light';
+import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
+import type { WebRTCDataChannel } from './types';
+
+export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
+
+export type CrossOriginIframeMessageEventContent = {
+  type: 'rrweb-canvas-webrtc';
+  data:
+    | {
+        type: 'signal';
+        signal: RTCSessionDescriptionInit;
+      }
+    | {
+        type: 'who-has-canvas';
+        rootId: number;
+        id: number;
+      }
+    | {
+        type: 'i-have-canvas';
+        rootId: number;
+      };
+};
+
+export class RRWebPluginCanvasWebRTCRecord {
+  private peer: SimplePeer.Instance | null = null;
+  private mirror: Mirror | undefined;
+  private crossOriginIframeMirror: ICrossOriginIframeMirror | undefined;
+  private streamMap: Map<number, MediaStream> = new Map();
+  private incomingStreams = new Set<MediaStream>();
+  private outgoingStreams = new Set<MediaStream>();
+  private streamNodeMap = new Map<string, number>();
+  private canvasWindowMap = new Map<number, WindowProxy>();
+  private windowPeerMap = new WeakMap<WindowProxy, SimplePeer.Instance>();
+  private peerWindowMap = new WeakMap<SimplePeer.Instance, WindowProxy>();
+  private signalSendCallback: (msg: RTCSessionDescriptionInit) => void;
+
+  constructor({
+    signalSendCallback,
+    peer,
+  }: {
+    signalSendCallback: RRWebPluginCanvasWebRTCRecord['signalSendCallback'];
+    peer?: SimplePeer.Instance;
+  }) {
+    this.signalSendCallback = signalSendCallback;
+    window.addEventListener('message', (event: MessageEvent) =>
+      this.windowPostMessageHandler(event),
+    );
+    if (peer) this.peer = peer;
+  }
+  public initPlugin(): RecordPlugin {
+    return {
+      name: PLUGIN_NAME,
+      getMirror: ({ nodeMirror, crossOriginIframeMirror }) => {
+        this.mirror = nodeMirror;
+        this.crossOriginIframeMirror = crossOriginIframeMirror;
+      },
+      options: {},
+    };
+  }
+
+  public signalReceive(signal: RTCSessionDescriptionInit) {
+    if (!this.peer) this.setupPeer();
+    this.peer?.signal(signal);
+  }
+
+  public signalReceiveFromCrossOriginIframe(
+    signal: RTCSessionDescriptionInit,
+    source: WindowProxy,
+  ) {
+    const peer = this.setupPeer(source);
+    peer.signal(signal);
+  }
+
+  private startStream(id: number, stream: MediaStream) {
+    if (!this.peer) this.setupPeer();
+
+    const data: WebRTCDataChannel = {
+      nodeId: id,
+      streamId: stream.id,
+    };
+    this.peer?.send(JSON.stringify(data));
+    if (!this.outgoingStreams.has(stream)) this.peer?.addStream(stream);
+    this.outgoingStreams.add(stream);
+  }
+
+  public setupPeer(source?: WindowProxy): SimplePeer.Instance {
+    let peer: SimplePeer.Instance;
+
+    if (!source) {
+      if (this.peer) return this.peer;
+
+      peer = this.peer = new SimplePeer({
+        initiator: true,
+        // trickle: false, // only create one WebRTC offer per session
+      });
+    } else {
+      const peerFromMap = this.windowPeerMap.get(source);
+
+      if (peerFromMap) return peerFromMap;
+
+      peer = new SimplePeer({
+        initiator: false,
+        // trickle: false, // only create one WebRTC offer per session
+      });
+      this.windowPeerMap.set(source, peer);
+      this.peerWindowMap.set(peer, source);
+    }
+
+    const resetPeer = (source?: WindowProxy) => {
+      if (!source) return (this.peer = null);
+
+      this.windowPeerMap.delete(source);
+      this.peerWindowMap.delete(peer);
+    };
+
+    peer.on('error', (err: Error) => {
+      resetPeer(source);
+      console.log('error', err);
+    });
+
+    peer.on('close', () => {
+      resetPeer(source);
+      console.log('closing');
+    });
+
+    peer.on('signal', (data: RTCSessionDescriptionInit) => {
+      if (this.inRootFrame()) {
+        if (peer === this.peer) {
+          // connected to replayer
+          this.signalSendCallback(data);
+        } else {
+          // connected to cross-origin iframe
+          this.peerWindowMap.get(peer)?.postMessage(
+            {
+              type: 'rrweb-canvas-webrtc',
+              data: {
+                type: 'signal',
+                signal: data,
+              },
+            } as CrossOriginIframeMessageEventContent,
+            '*',
+          );
+        }
+      } else {
+        // connected to root frame
+        window.top?.postMessage(
+          {
+            type: 'rrweb-canvas-webrtc',
+            data: {
+              type: 'signal',
+              signal: data,
+            },
+          } as CrossOriginIframeMessageEventContent,
+          '*',
+        );
+      }
+    });
+
+    peer.on('connect', () => {
+      // connected to cross-origin iframe, no need to do anything
+      if (this.inRootFrame() && peer !== this.peer) return;
+
+      // cross origin frame connected to root frame
+      // or root frame connected to replayer
+      // send all streams to peer
+      for (const [id, stream] of this.streamMap) {
+        this.startStream(id, stream);
+      }
+    });
+
+    if (!this.inRootFrame()) return peer;
+
+    peer.on('data', (data: SimplePeer.SimplePeerData) => {
+      try {
+        const json = JSON.parse(data as string) as WebRTCDataChannel;
+        this.streamNodeMap.set(json.streamId, json.nodeId);
+      } catch (error) {
+        console.error('Could not parse data', error);
+      }
+      this.flushStreams();
+    });
+
+    peer.on('stream', (stream: MediaStream) => {
+      this.incomingStreams.add(stream);
+      this.flushStreams();
+    });
+
+    return peer;
+  }
+
+  public setupStream(id: number, rootId?: number): boolean | MediaStream {
+    if (id === -1 || !this.mirror) return false;
+    let stream: MediaStream | undefined = this.streamMap.get(rootId || id);
+    if (stream) return stream;
+
+    const el = this.mirror.getNode(id) as HTMLCanvasElement | null;
+
+    if (!el || !('captureStream' in el))
+      // we don't have it, lets check our iframes
+      return this.setupStreamInCrossOriginIframe(id, rootId || id);
+
+    if (!this.inRootFrame()) {
+      window.top?.postMessage(
+        {
+          type: 'rrweb-canvas-webrtc',
+          data: {
+            type: 'i-have-canvas',
+            rootId: rootId || id,
+          },
+        } as CrossOriginIframeMessageEventContent,
+        '*',
+      );
+    }
+
+    stream = el.captureStream();
+    this.streamMap.set(rootId || id, stream);
+    this.setupPeer();
+
+    return stream;
+  }
+
+  private flushStreams() {
+    this.incomingStreams.forEach((stream) => {
+      const nodeId = this.streamNodeMap.get(stream.id);
+      if (!nodeId) return;
+      // got remote video stream, now let's send it to the replayer
+      this.startStream(nodeId, stream);
+    });
+  }
+
+  private inRootFrame(): boolean {
+    return Boolean(window.top && window.top === window);
+  }
+
+  public setupStreamInCrossOriginIframe(id: number, rootId: number): boolean {
+    let found = false;
+
+    document.querySelectorAll('iframe').forEach((iframe) => {
+      if (found) return;
+      if (!this.crossOriginIframeMirror) return;
+
+      const remoteId = this.crossOriginIframeMirror.getRemoteId(iframe, id);
+      if (remoteId === -1) return;
+
+      found = true;
+      iframe.contentWindow?.postMessage(
+        {
+          type: 'rrweb-canvas-webrtc',
+          data: {
+            type: 'who-has-canvas',
+            id: remoteId,
+            rootId,
+          },
+        } as CrossOriginIframeMessageEventContent,
+        '*',
+      );
+    });
+    return found;
+  }
+
+  private isCrossOriginIframeMessageEventContent(
+    event: MessageEvent<unknown>,
+  ): event is MessageEvent<CrossOriginIframeMessageEventContent> {
+    return Boolean(
+      event.data &&
+        typeof event.data === 'object' &&
+        'type' in event.data &&
+        'data' in event.data &&
+        (event.data as CrossOriginIframeMessageEventContent).type ===
+          'rrweb-canvas-webrtc' &&
+        (event.data as CrossOriginIframeMessageEventContent).data,
+    );
+  }
+
+  /**
+   * All messages being sent to the (root or sub) frame are received through `windowPostMessageHandler`.
+   * @param event - The message event
+   */
+  private windowPostMessageHandler(
+    event: MessageEvent<CrossOriginIframeMessageEventContent> | MessageEvent,
+  ) {
+    if (!this.isCrossOriginIframeMessageEventContent(event)) return;
+
+    const { type } = event.data.data;
+    if (type === 'who-has-canvas') {
+      const { id, rootId } = event.data.data;
+      this.setupStream(id, rootId);
+    } else if (type === 'signal') {
+      const { signal } = event.data.data;
+      const { source } = event;
+      if (!source || !('self' in source)) return;
+      if (this.inRootFrame()) {
+        this.signalReceiveFromCrossOriginIframe(signal, source);
+      } else {
+        this.signalReceive(signal);
+      }
+    } else if (type === 'i-have-canvas') {
+      const { rootId } = event.data.data;
+      const { source } = event;
+      if (!source || !('self' in source)) return;
+      this.canvasWindowMap.set(rootId, source);
+    }
+  }
+}
--- a/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/simple-peer-light.d.ts
+++ b/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/simple-peer-light.d.ts
@@ -0,0 +1,309 @@
+/* eslint-disable */
+/// <reference types="node" />
+declare module 'simple-peer-light' {
+  import * as stream from 'stream';
+
+  const SimplePeer: SimplePeer.SimplePeer;
+
+  namespace SimplePeer {
+    interface Options {
+      /** set to `true` if this is the initiating peer */
+      initiator?: boolean | undefined;
+      /** custom webrtc data channel configuration (used by [`createDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel)) */
+      channelConfig?: RTCDataChannelInit | undefined;
+      /** custom webrtc data channel name */
+      channelName?: string | undefined;
+      /** custom webrtc configuration (used by [`RTCPeerConnection`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) constructor) */
+      config?: RTCConfiguration | undefined;
+      /** custom offer options (used by [`createOffer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer) method) */
+      offerOptions?: RTCOfferOptions | undefined;
+      /** custom answer options (used by [`createAnswer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer) method) */
+      answerOptions?: RTCAnswerOptions | undefined;
+      /** function to transform the generated SDP signaling data (for advanced users) */
+      sdpTransform?: ((this: Instance, sdp: string) => string) | undefined;
+      /** if video/voice is desired, pass stream returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
+      stream?: MediaStream | undefined;
+      /** an array of MediaStreams returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
+      streams?: MediaStream[] | undefined;
+      /** set to `false` to disable [trickle ICE](http://webrtchacks.com/trickle-ice/) and get a single 'signal' event (slower) */
+      trickle?: boolean | undefined;
+      /** similar to `trickle`, needs to be set to `false` to disable trickling, defaults to `false` */
+      allowHalfTrickle?: boolean | undefined;
+      /** if `trickle` is set to `false`, determines how long to wait before providing an offer or answer; default value is 5000 milliseconds  */
+      iceCompleteTimeout?: number | undefined;
+      /** custom webrtc implementation, mainly useful in node to specify in the [wrtc](https://npmjs.com/package/wrtc) package. */
+      wrtc?:
+        | {
+            RTCPeerConnection: typeof RTCPeerConnection;
+            RTCSessionDescription: typeof RTCSessionDescription;
+            RTCIceCandidate: typeof RTCIceCandidate;
+          }
+        | undefined;
+      /** set to true to create the stream in Object Mode. In this mode, incoming string data is not automatically converted to Buffer objects. */
+      objectMode?: boolean | undefined;
+    }
+    interface SimplePeer {
+      prototype: Instance;
+      /**
+       * Create a new WebRTC peer connection.
+       *
+       * A "data channel" for text/binary communication is always established, because it's cheap and often useful. For video/voice communication, pass the stream option.
+       *
+       * If opts is specified, then the default options (see <https://github.com/feross/simple-peer#peer--new-peeropts>) will be overridden.
+       */
+      new (opts?: Options): Instance;
+
+      /** Detect native WebRTC support in the javascript environment. */
+      readonly WEBRTC_SUPPORT: boolean;
+
+      // ********************************
+      // methods which are not documented
+      // ********************************
+
+      /**
+       * Expose peer and data channel config for overriding all Peer
+       * instances. Otherwise, just set opts.config or opts.channelConfig
+       * when constructing a Peer.
+       */
+      config: RTCConfiguration;
+      /**
+       * Expose peer and data channel config for overriding all Peer
+       * instances. Otherwise, just set opts.config or opts.channelConfig
+       * when constructing a Peer.
+       */
+      channelConfig: RTCDataChannelInit;
+    }
+
+    type TypedArray =
+      | Int8Array
+      | Uint8Array
+      | Uint8ClampedArray
+      | Int16Array
+      | Uint16Array
+      | Int32Array
+      | Uint32Array
+      | Float32Array
+      | Float64Array;
+
+    type SimplePeerData = string | Buffer | TypedArray | ArrayBuffer | Blob;
+
+    type SignalData =
+      | {
+          type: 'transceiverRequest';
+          transceiverRequest: {
+            kind: string;
+            init?: RTCRtpTransceiverInit | undefined;
+          };
+        }
+      | {
+          type: 'renegotiate';
+          renegotiate: true;
+        }
+      | {
+          type: 'candidate';
+          candidate: RTCIceCandidate;
+        }
+      | RTCSessionDescriptionInit;
+
+    interface Instance extends stream.Duplex {
+      /**
+       * Call this method whenever the remote peer emits a `peer.on('signal')` event.
+       *
+       * The `data` will encapsulate a webrtc offer, answer, or ice candidate. These messages help
+       * the peers to eventually establish a direct connection to each other. The contents of these
+       * strings are an implementation detail that can be ignored by the user of this module;
+       * simply pass the data from 'signal' events to the remote peer and call `peer.signal(data)`
+       * to get connected.
+       */
+      signal(data: string | SignalData): void;
+
+      /**
+       * Send text/binary data to the remote peer. `data` can be any of several types: `String`,
+       * `Buffer` (see [buffer](https://github.com/feross/buffer)), `ArrayBufferView` (`Uint8Array`,
+       * etc.), `ArrayBuffer`, or `Blob` (in browsers that support it).
+       *
+       * Note: If this method is called before the `peer.on('connect')` event has fired,
+       * then an exception will be thrown. Use `peer.write(data)`
+       * (which is inherited from the node.js [duplex stream](https://nodejs.org/api/stream.html) interface)
+       * if you want this data to be buffered instead.
+       */
+      send(data: SimplePeerData): void;
+
+      /** Add a `MediaStream` to the connection. */
+      addStream(stream: MediaStream): void;
+
+      /** Remove a `MediaStream` from the connection. */
+      removeStream(stream: MediaStream): void;
+
+      /** Add a `MediaStreamTrack` to the connection. Must also pass the `MediaStream` you want to attach it to. */
+      addTrack(track: MediaStreamTrack, stream: MediaStream): void;
+
+      /** Remove a `MediaStreamTrack` from the connection. Must also pass the `MediaStream` that it was attached to. */
+      removeTrack(track: MediaStreamTrack, stream: MediaStream): void;
+
+      /** Replace a `MediaStreamTrack` with another track. Must also pass the `MediaStream` that the old track was attached to. */
+      replaceTrack(
+        oldTrack: MediaStreamTrack,
+        newTrack: MediaStreamTrack,
+        stream: MediaStream,
+      ): void;
+
+      /** Add a `RTCRtpTransceiver` to the connection. Can be used to add transceivers before adding tracks. Automatically called as necessary by `addTrack`. */
+      addTransceiver(kind: string, init?: RTCRtpTransceiverInit): void;
+
+      // TODO: https://github.com/feross/simple-peer/blob/d972548299a50f836ca91c36e39304ef0f9474b7/index.js#L427
+      // destroy(onclose?: () => void): void;
+      /**
+       * Destroy and cleanup this peer connection.
+       *
+       * If the optional `err` parameter is passed, then it will be emitted as an `'error'`
+       * event on the stream.
+       */
+      destroy(error?: Error): any;
+
+      // ********************************
+      // methods which are not documented
+      // ********************************
+
+      readonly bufferSize: number;
+      readonly connected: boolean;
+      address():
+        | { port: undefined; family: undefined; address: undefined }
+        | { port: number; family: 'IPv6' | 'IPv4'; address: string };
+
+      // used for debug logging
+      _debug(message?: any, ...optionalParams: any[]): void;
+
+      // ******
+      // events
+      // ******
+      addListener(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      addListener(event: 'signal', listener: (data: SignalData) => void): this;
+      addListener(
+        event: 'stream',
+        listener: (stream: MediaStream) => void,
+      ): this;
+      addListener(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      addListener(event: 'data', listener: (chunk: any) => void): this;
+      addListener(event: 'error', listener: (err: Error) => void): this;
+      addListener(
+        event: string | symbol,
+        listener: (...args: any[]) => void,
+      ): this;
+
+      emit(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+      ): boolean;
+      emit(event: 'signal', data: SignalData): this;
+      emit(event: 'stream', stream: MediaStream): this;
+      emit(event: 'track', track: MediaStreamTrack, stream: MediaStream): this;
+      emit(event: 'data', chunk: any): boolean;
+      emit(event: 'error', err: Error): boolean;
+      emit(event: string | symbol, ...args: any[]): boolean;
+
+      on(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      on(event: 'signal', listener: (data: SignalData) => void): this;
+      on(event: 'stream', listener: (stream: MediaStream) => void): this;
+      on(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      on(event: 'data', listener: (chunk: any) => void): this;
+      on(event: 'error', listener: (err: Error) => void): this;
+      on(event: string | symbol, listener: (...args: any[]) => void): this;
+
+      once(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      once(event: 'signal', listener: (data: SignalData) => void): this;
+      once(event: 'stream', listener: (stream: MediaStream) => void): this;
+      once(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      once(event: 'data', listener: (chunk: any) => void): this;
+      once(event: 'error', listener: (err: Error) => void): this;
+      once(event: string | symbol, listener: (...args: any[]) => void): this;
+
+      prependListener(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      prependListener(
+        event: 'signal',
+        listener: (data: SignalData) => void,
+      ): this;
+      prependListener(
+        event: 'stream',
+        listener: (stream: MediaStream) => void,
+      ): this;
+      prependListener(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      prependListener(event: 'data', listener: (chunk: any) => void): this;
+      prependListener(event: 'error', listener: (err: Error) => void): this;
+      prependListener(
+        event: string | symbol,
+        listener: (...args: any[]) => void,
+      ): this;
+
+      prependOnceListener(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      prependOnceListener(
+        event: 'signal',
+        listener: (data: SignalData) => void,
+      ): this;
+      prependOnceListener(
+        event: 'stream',
+        listener: (stream: MediaStream) => void,
+      ): this;
+      prependOnceListener(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      prependOnceListener(event: 'data', listener: (chunk: any) => void): this;
+      prependOnceListener(event: 'error', listener: (err: Error) => void): this;
+      prependOnceListener(
+        event: string | symbol,
+        listener: (...args: any[]) => void,
+      ): this;
+
+      removeListener(
+        event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
+        listener: () => void,
+      ): this;
+      removeListener(
+        event: 'signal',
+        listener: (data: SignalData) => void,
+      ): this;
+      removeListener(
+        event: 'stream',
+        listener: (stream: MediaStream) => void,
+      ): this;
+      removeListener(
+        event: 'track',
+        listener: (track: MediaStreamTrack, stream: MediaStream) => void,
+      ): this;
+      removeListener(event: 'data', listener: (chunk: any) => void): this;
+      removeListener(event: 'error', listener: (err: Error) => void): this;
+      removeListener(
+        event: string | symbol,
+        listener: (...args: any[]) => void,
+      ): this;
+    }
+  }
+  export default SimplePeer;
+}
--- a/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/types.ts
+++ b/packages/plugins/rrweb-plugin-canvas-webrtc-record/src/types.ts
@@ -0,0 +1,4 @@
+export interface WebRTCDataChannel {
+  nodeId: number;
+  streamId: string;
+}