[Plugin] Live stream canvas via webrtc

[Juice10]

Adds plugin to live stream contents of canvas elements via webrtc

Example of live streaming via yarn live-stream

webrtc-1080p.mov

Instructions

Record side

// Record side

import rrweb from 'rrweb';
import { RRWebPluginCanvasWebRTCRecord } from 'rrweb-plugin-canvas-webrtc-record';

const webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({
  signalSendCallback: (msg) => {
    // provides webrtc sdp offer signal & connect message
    // make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`
    sendSignalToReplayer(msg); // example of function that sends the signal to the replayer
  },
});

rrweb.record({
  emit: (event) => {
    // send these events to the `replayer.addEvent(event)`, how you do that is up to you
    // you can send them to a server for example which can then send them to the replayer
    sendEventToReplayer(event); // example of function that sends the event to the replayer
  },
  plugins: [
    // add the plugin to the list of plugins, and initialize it via `.initPlugin()`
    webRTCRecordPlugin.initPlugin()
  ],
  recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin
});

Replay Side

// Replay side
import rrweb from 'rrweb';
import { RRWebPluginCanvasWebRTCReplay } from 'rrweb-plugin-canvas-webrtc-replay';

const webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({
  canvasFoundCallback(canvas, context) {
    console.log('canvas', canvas);
    // send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you
    // you can send them to a server for example which can then send them to the replayer
    sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script
  },
  signalSendCallback(signal) {
    // provides webrtc sdp offer signal & connect message
    // make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`
    sendSignalToRecordScript(signal); // example of function that sends the signal to the record script
  }
});

const replayer = new rrweb.Replayer([], {
  UNSAFE_replayCanvas: true, // turn canvas replay on!
  liveMode: true, // live mode is needed to stream events to the replayer
  plugins: [
    webRTCReplayPlugin.initPlugin()
  ],
});
replayer.startLive(); // start the replayer in live mode


replayer.addEvent(event); // call this whenever an event is received from the record script

Includes the following hooks for plugins

Record/Replay plugins

.getMirror exposes the mirror to plugins

Replay plugins

.onBuild called whenever a node was added to the dom

Other things this PR touches

• Configure typescript package dependencies via "composite": true and references
• Keeps yarn workspace dependencies synchronised with monorepo-utils/workspaces-to-typescript-project-references
• Skips benchmark test that becomes flaky while run in parallel with other tests
• Uses es modules for repl.js and stream.js files

Extra

Diagram of how the plugin works (PDF)

[YunFeng0817]

This PR is very innovative both in design and implementation. Actually, I've used this branch many times for quicker debugging of some issues. I'm looking forward to using it in the main branch.

[Code-Crash]

Hi @Juice10 ,

I'm exploring video streaming recording via this plugin, do we have any examples for the same for the video?

Thanks.

[Juice10]

@Code-Crash I've created a PR to also do this for video, check it out here: #1046
It's pretty much finished just needs updating readme and renaming the plug-in

[Code-Crash]

Thanks @Juice10 , will have a look