Add rrweb-worker package

[daibhin]

Since #1309 it looks like canvas mutations are not captured in certain environments. As was described in a comment on the change

From my investigations it looks like the worker in the canvas-mutation is not capturing messages in the onmessage handler:

rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.ts

Lines 122 to 226 in 729361e

	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;
	let rafId: number;
	const getCanvas = (): HTMLCanvasElement[] => {
	const matchedCanvas: HTMLCanvasElement[] = [];
	win.document.querySelectorAll('canvas').forEach((canvas) => {
	if (!isBlocked(canvas, blockClass, blockSelector, true)) {
	matchedCanvas.push(canvas);
	}
	});
	return matchedCanvas;
	};
	const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => {
	if (
	lastSnapshotTime &&
	timestamp - lastSnapshotTime < timeBetweenSnapshots
	) {
	rafId = requestAnimationFrame(takeCanvasSnapshots);
	return;
	}
	lastSnapshotTime = timestamp;
	getCanvas()
	// eslint-disable-next-line @typescript-eslint/no-misused-promises
	.forEach(async (canvas: HTMLCanvasElement) => {
	const id = this.mirror.getId(canvas);
	if (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);
	}
	}
	const bitmap = await createImageBitmap(canvas);
	worker.postMessage(
	{
	id,
	bitmap,
	width: canvas.width,
	height: canvas.height,
	dataURLOptions: options.dataURLOptions,
	},
	[bitmap],
	);

I couldn't find any reason this stopped working but another bug (#1377) suggests that it is altering the outputted worker.

@mydea also discovered that the current worker setup might be causing issues with tree shaking and has adapted their fork to include a new rrweb-worker package. I went ahead and ported their solution over here as proposed in #1376.

This removes the reliance on rollup-plugin-web-worker-loader which introduced the behaviour I'm seeing

[changeset-bot]

⚠️ No Changeset found

Latest commit: 948c365

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR