aab4c553cb
* docs: revamp installation docs for esm and umd Document recommended install paths across the main guides and package READMEs for rrweb, @rrweb/all, @rrweb/record, @rrweb/replay, and rrweb-player. Clarify three usage modes: bundler/npm, browser no-build with import maps and +esm, and legacy UMD fallback. * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Apply formatting changes * Apply suggestion from @eoghanmurray Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Apply formatting changes * docs(all): streamline README usage section Move the guide link next to the import example and remove the duplicated Usage section to keep docs concise and easier to scan. * docs(readme): update gzip size badges in zh-cn readme * docs(plugins): update readme imports to scoped esm packages Replace `rrweb` default imports and `rrweb.Replayer` usage with `@rrweb/record` `record` and `@rrweb/replay` `Replayer` in plugin usage examples. Also update canvas WebRTC plugin imports to scoped `@rrweb/*` package names to keep docs aligned with current package structure. * docs: update docs to prefer scoped esm packages replace `rrweb` default import examples with `@rrweb/record` and `@rrweb/replay` across recipes and guides in en/zh-CN. clarify package selection for new integrations, add `@rrweb/all` convenience guidance, and refresh CDN/style import snippets for ESM and legacy UMD compatibility. --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
75 lines
2.6 KiB
Markdown
75 lines
2.6 KiB
Markdown
# rrweb canvas webrtc plugin
|
|
|
|
Plugin that live streams contents of canvas elements via webrtc
|
|
|
|
## Example of live streaming via `yarn live-stream`
|
|
|
|
https://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov
|
|
|
|
## Instructions
|
|
|
|
### Record side
|
|
|
|
```js
|
|
// 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
|
|
|
|
```js
|
|
// 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
|
|
```
|
|
|
|
## More info
|
|
|
|
https://github.com/rrweb-io/rrweb/pull/976
|