// Record side

import { record } from '@rrweb/record';
import { RRWebPluginCanvasWebRTCRecord } from '@rrweb/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
  },
});

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
import { Replayer } from '@rrweb/replay';
import { RRWebPluginCanvasWebRTCReplay } from '@rrweb/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 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

  </a>
</td>
<td align="center">
  <a href="https://github.com/YunFeng0817">
    
    

  </a>
</td>
<td align="center">
  <a href="https://github.com/eoghanmurray">
    
    

  </a>
</td>
<td align="center">
  <a href="https://github.com/Juice10">
    
    

  </a>
</td>
<td align="center">
  <a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://statcounter.com/session-replay/" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://recordonce.com/" target="_blank">
    
  </a>
</td>

  </a>
</td>
<td align="center">
  <a href="https://remsupp.com" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://highlight.io" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://analyzee.io" target="_blank">
    
  </a>
</td>

  </a>
</td>
<td align="center">
  <a href="https://gleap.io" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://uxwizz.com" target="_blank">
    
  </a>
</td>
<td align="center">
  <a href="https://www.howdygo.com" target="_blank">
    
  </a>
</td>