Add Asset event type and capture assets

[Juice10]

Asset events allow for asynchronous events containing (image or potentially other) assets. See https://github.com/rrweb-io/rrweb/issues/860 for more info.

These are async events that get emmited after the original dom mutation events and can be used to inject these assets after the fact in the player or via post processing.

Todo:

• [x] create asset event for assets that failed to load
• [x] implement asset in player
• ~[ ] add flag to log assets being captured~
• [x] add documentation for recording config
• [x] [docs] explain how its different to inline images
• [x] decided whether or not to move the capturing and encoding to a web worker (out of scope)
• [x] use canvas webgl code to do blob encoding
• [x] move more types from rrweb-snapshot to @rrweb/types to circumvent circular dependencies
• [x] add meta data to meta event including what asset origins are going to be cached,
  • [x] also filter hooks in Asset Manager listening to those origins
• [x] add support for all elements
  • [x] video
  • [x] audio
  • [x] embed
  • [x] source
  • [x] track
  • [x] input#type=image
  • [x] img#srcset
  • [x] svg
  • [x] table#background
• ~[ ] Remove inlineImages in favour of assetCapture~
• [x] Forward inlineImages config to assetCapture
• [x] get it working in yarn live-stream
• [x] hide src attributes while asset is being awaited
• [x] work with rrdom
• [x] add tests for svg elements, ~also update asset manager to work with setAttributeNS~ setAttributeNS was needed for xlink:href, but all modern browsers rewrite that to href which is already supported out of the box.
• [x] add implementation for srcset
• [x] rename replay/asset/index.ts to replay/asset-manager/index.ts

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: c160f50efb956ff4f665cfc9d04afb96d20a8415

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 18 packages

Name	Type
rrweb-snapshot	Major
rrweb	Major
rrdom	Major
@rrweb/types	Major
@rrweb/rrweb-plugin-canvas-webrtc-record	Major
@rrweb/rrweb-plugin-canvas-webrtc-replay	Major
@rrweb/rrweb-plugin-console-record	Major
@rrweb/rrweb-plugin-console-replay	Major
@rrweb/rrweb-plugin-sequential-id-record	Major
@rrweb/rrweb-plugin-sequential-id-replay	Major
rrdom-nodejs	Major
rrweb-player	Major
@rrweb/all	Major
@rrweb/replay	Major
@rrweb/record	Major
@rrweb/packer	Major
@rrweb/web-extension	Major
rrvideo	Major

Not sure what this means? Click here to learn what changesets are.

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

[Juice10]

I'm wondering whether it's worth taking this commit out and merging in a separate PR? Fine if not; maybe in future this sort of thing could be merged in earlier while rest of a PR is ongoing.

If we weren't on an alpha release that type of commit would also require us to do a major version change. Not sure if it makes sense now, it's bound to break some tests and those got fixed later in subsequent commits. But in general I do agree with you, this type of thing would be better in a separate PR

[Yuyz0112]

Just reviewed the last two files: the asset manager observer and the replay side manager, really cool implementation!

Leave some small comments, and we should be able to merge this in the following days.

[eoghanmurray]

Not sure if this is a goal or a non-goal, but should we be collecting all assets for the srcset attribute? Shouldn't we be able to tell which one of the images is the one that will need to be rendered?