e4e73596ec
* chore: maintain CSS output file name in vite@6.0.1 Without this change, build would fail because the produced stylesheet assumes the `package.json['name']` i.e., `styles/rrweb.css`. To maintain the existing behavior, these changes are required. See https://vite.dev/guide/migration.html#customize-css-output-file-name-in-library-mode * build(rrvideo): upgrade playwright from 1.32.1 to 1.56.1 Update playwright dependency to latest version and refactor test execution options to use a shared configuration with increased timeout for stability. * debug(rrvideo): add comprehensive logging to video transformation process Add detailed console.log statements throughout the transformToVideo function to track execution flow and debug potential issues. Logging covers browser launch, context creation, page navigation, replay progress, and video file operations. * ci(rrvideo): install playwright browsers and improve test output visibility - Add Playwright Chromium installation step to CI workflow - Change test execution stdio from 'pipe' to 'inherit' for better debugging * fix(rrvideo): prevent autoplay and manually start playback after event listeners Set autoPlay to false in replayer configuration and manually call play() after all event listeners are attached. This ensures event handlers are properly registered before playback begins, preventing potential race conditions. Also refactor test execution options to separate stdio configuration from timeout settings for better control over test output visibility. * fix(rrvideo): add timeout and error handling to replay process Add comprehensive error handling to prevent hanging during video transformation: - Add 2-minute timeout for replay finish event - Add console and error listeners for better debugging - Improve promise chain with proper error catching - Clear timeout on successful completion or error This prevents the process from hanging indefinitely when the replay finish event never fires. * fix(rrvideo): add error handling and restructure replayer initialization Wrap replayer initialization in try-catch block to handle potential errors gracefully. Restructure Player instantiation to use rrwebPlayer directly instead of rrwebPlayer.Player, and move width/height into props object for correct API usage. On error, log to console and trigger onReplayFinish callback to prevent hanging state. * build(umd): rename record and replay globals Update UMD build globals for recorder and replayer and refresh documentation accordingly. BREAKING CHANGE: UMD global names changed to rrwebRecord and rrwebReplay. * fix(rrvideo): adjust replay timeout to duration * docs: update rrweb-player CDN script path * Update vite.config.default.ts Co-authored-by: Eoghan Murray <eoghan@getthere.ie> --------- Co-authored-by: Rui <rui@conti.sh> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
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
// 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