Add WebGL support

[Juice10]

This PR adds support for webgl recording and replaying and adds tests to ensure its stability.

This PR covers the following:

• Tweak naming of vscode workspace to be a little more explicit
• Basic webgl recording & replay support
• Support for recording & replay in webgl2 context
• Testing visual snapshots with jest-image-snapshot
• Capture, serialize and deserialize WebGL variables
• Serialize ImageData
• Serialize HTMLImageElement
• Record Canvas before it gets added to the dom (webgl and webgl2).
• Preload HTMLImageElement used in webgl events
• Fix bug: documents that have a canvas object that hasn't been accessed by any context yet, automatically get their '2d' context invoked which disables any further attempt at accessing them via webgl
• Speed up and slow down webgl replay to align with the frame-rate of the replaying browser
• Sort deserializes webGL variables by context
• Buffer up webgl events and emit them as one larger event (possibly with throttling)
• Handle speeding up rrweb playback (newFrame: true) slows this down.
• Implement Canvas Manager and respect record.freezePage()
• And much more...

Not implemented yet, out of scope from this PR:

• Add WebGL snapshots with https://github.com/BabylonJS/Spector.js
• Add support for all texImage2d pixels argument (HTMLCanvasElement, HTMLVideoElement)
• Serialize HTMLCanvasElement
• Serialize HTMLVideoElement
• Serialize ImageBitmap
• Add support for getExtension (WEBGL_lose_context, OES_vertex_array_object, WEBGL_debug_shaders, WEBGL_draw_buffers and ANGLE_instanced_arrays have functions that can be invoked) https://www.khronos.org/registry/webgl/extensions/
• Add support for OffscreenCanvas and getContext('bitmaprenderer')
• Preload ImageBitmap
• Save webgl contextAttributes
• Fix timing of webgl operations when importing events via addEvent (addDelay() needs to receive a lastEvent parameter)

[eoghanmurray]

Idea: We might want to introduce a maximum framerate here for recording of webgl.
i.e. decoupling the raw webgl events from the emission of an rrweb, which might contain multiple webgl api calls.
(a maximum frame rate could be applicable to mutations also)

[eoghanmurray]

if that decoupling was in place, we'd also likely want to respect the freezePage aspect of the public API, whereby we want to pause recording of background activity, i.e. buffer up the activity so that it can all be emitted later if the recording is unfrozen:

rrweb/packages/rrweb/src/record/index.ts

Lines 477 to 479 in 5dcbfa5

	record.freezePage = () => {
	mutationBuffers.forEach((buf) => buf.freeze());
	};

[Juice10]

Idea: We might want to introduce a maximum framerate here for recording of webgl.
i.e. decoupling the raw webgl events from the emission of an rrweb, which might contain multiple webgl api calls.
(a maximum frame rate could be applicable to mutations also)

WebGL is a bit of a black box so unfortunately its hard to tell which of the 200+ webgl2 invoked commands are necessary for playback of future frames. This makes it very hard to tell which commands we can leave out without breaking the (future) playback.
If we where to introduce a maximum frame rate for webgl recording and we'd effectively have to keep every invoked command, then you'd have less events but the events would be much bigger, negating most of your potential savings.

There also isn't really a full snapshot like capability with webgl, whereby we could snapshot a point in time and animate with webgl commands from a full-snapshot.
The closest we could get to that is calling canvas.toDataURL every Nth frame but that can be pretty heavy both in terms of performance and file size.

[Juice10]

if that decoupling was in place, we'd also likely want to respect the freezePage aspect of the public API, whereby we want to pause recording of background activity, i.e. buffer up the activity so that it can all be emitted later if the recording is unfrozen:

rrweb/packages/rrweb/src/record/index.ts

Lines 477 to 479 in 5dcbfa5

	record.freezePage = () => {
	mutationBuffers.forEach((buf) => buf.freeze());
	};

I've added a CanvasManager (35da32d) which respects record.freezePage and won't send any events as long as the MutationBuffer is frozen or locked.

[LIFM0623]

您好，我有个需求是记录地图变化，地图是mapbox_gl的，是否因为这个webgl渲染的原因导致无法记录