{"_id":"@candle-analytics/rrweb-plugin-canvas-webrtc-replay","name":"@candle-analytics/rrweb-plugin-canvas-webrtc-replay","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@candle-analytics/rrweb-plugin-canvas-webrtc-replay","version":"2.0.0","description":"Plugin that live streams contents of canvas elements via webrtc","type":"module","main":"./dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs","module":"./dist/rrweb-plugin-canvas-webrtc-replay.js","unpkg":"./dist/rrweb-plugin-canvas-webrtc-replay.umd.cjs","typings":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/rrweb-plugin-canvas-webrtc-replay.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/rrweb-plugin-canvas-webrtc-replay.cjs"}}},"scripts":{"dev":"vite build --watch","build":"yarn turbo run prepublish","check-types":"tsc -noEmit","prepublish":"tsc -noEmit && vite build"},"repository":{"type":"git","url":"git+https://github.com/rrweb-io/rrweb.git"},"keywords":["rrweb"],"author":{"name":"justin@recordonce.com"},"license":"MIT","bugs":{"url":"https://github.com/rrweb-io/rrweb/issues"},"homepage":"https://github.com/rrweb-io/rrweb#readme","devDependencies":{"@candle-analytics/rrweb":"^2.0.0","typescript":"^5.4.5","vite":"^5.3.1","vite-plugin-dts":"^3.9.1"},"peerDependencies":{"@candle-analytics/rrweb":"^2.0.0"},"_id":"@candle-analytics/rrweb-plugin-canvas-webrtc-replay@2.0.0","gitHead":"b7d790983495abb41b2cd0d7cc5699654447cd26","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-6PgPiIt1jcHME6J0gXamtikeUpWKNtNXkyLCJ28RwYuAyHPEVwB440B81i4lx1JjtwYLbx7W+orhdj7S8cN0RQ==","shasum":"c150c3d329ae3b18dffb1b7ce86565b7eb88d383","tarball":"https://registry.npmjs.org/@candle-analytics/rrweb-plugin-canvas-webrtc-replay/-/rrweb-plugin-canvas-webrtc-replay-2.0.0.tgz","fileCount":12,"unpackedSize":386745,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBOM+ScZzgO1N8cMnBVkK7XxTS7GM/iJ4n/TAF31wp68AiEArcNWTW3yuZ03iljQY8/naGcgukoQ8yKnRjk0ZhY73/U="}]},"_npmUser":{"name":"elsbree","email":"renegadelsbree@gmail.com"},"directories":{},"maintainers":[{"name":"elsbree","email":"renegadelsbree@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/rrweb-plugin-canvas-webrtc-replay_2.0.0_1756831967882_0.5710697749700313"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-02T16:52:47.793Z","2.0.0":"2025-09-02T16:52:48.106Z","modified":"2025-09-02T16:52:48.389Z"},"maintainers":[{"name":"elsbree","email":"renegadelsbree@gmail.com"}],"description":"Plugin that live streams contents of canvas elements via webrtc","homepage":"https://github.com/rrweb-io/rrweb#readme","keywords":["rrweb"],"repository":{"type":"git","url":"git+https://github.com/rrweb-io/rrweb.git"},"author":{"name":"justin@recordonce.com"},"bugs":{"url":"https://github.com/rrweb-io/rrweb/issues"},"license":"MIT","readme":"# rrweb canvas webrtc plugin\n\nPlugin that live streams contents of canvas elements via webrtc\n\n## Example of live streaming via `yarn live-stream`\n\nhttps://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov\n\n## Instructions\n\n### Record side\n\n```js\n// Record side\n\nimport rrweb from 'rrweb';\nimport { RRWebPluginCanvasWebRTCRecord } from '@rrweb/rrweb-plugin-canvas-webrtc-record';\n\nconst webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({\n  signalSendCallback: (msg) => {\n    // provides webrtc sdp offer signal & connect message\n    // make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`\n    sendSignalToReplayer(msg); // example of function that sends the signal to the replayer\n  },\n});\n\nrrweb.record({\n  emit: (event) => {\n    // send these events to the `replayer.addEvent(event)`, how you do that is up to you\n    // you can send them to a server for example which can then send them to the replayer\n    sendEventToReplayer(event); // example of function that sends the event to the replayer\n  },\n  plugins: [\n    // add the plugin to the list of plugins, and initialize it via `.initPlugin()`\n    webRTCRecordPlugin.initPlugin(),\n  ],\n  recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin\n});\n```\n\n### Replay Side\n\n```js\n// Replay side\nimport rrweb from 'rrweb';\nimport { RRWebPluginCanvasWebRTCReplay } from '@rrweb/rrweb-plugin-canvas-webrtc-replay';\n\nconst webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({\n  canvasFoundCallback(canvas, context) {\n    console.log('canvas', canvas);\n    // send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you\n    // you can send them to a server for example which can then send them to the replayer\n    sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script\n  },\n  signalSendCallback(signal) {\n    // provides webrtc sdp offer signal & connect message\n    // make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`\n    sendSignalToRecordScript(signal); // example of function that sends the signal to the record script\n  },\n});\n\nconst replayer = new rrweb.Replayer([], {\n  UNSAFE_replayCanvas: true, // turn canvas replay on!\n  liveMode: true, // live mode is needed to stream events to the replayer\n  plugins: [webRTCReplayPlugin.initPlugin()],\n});\nreplayer.startLive(); // start the replayer in live mode\n\nreplayer.addEvent(event); // call this whenever an event is received from the record script\n```\n\n## More info\n\nhttps://github.com/rrweb-io/rrweb/pull/976\n\n## Sponsors\n\n[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.\n\n### Gold Sponsors 🥇\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225\" alt=\"sponsor\"></a>\n\n</div>\n\n### Silver Sponsors 🥈\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158\" alt=\"sponsor\"></a>\n\n</div>\n\n### Bronze Sponsors 🥉\n\n<div dir=\"auto\">\n\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n<a href=\"https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false\" target=\"_blank\"><img src=\"https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70\" alt=\"sponsor\"></a>\n\n</div>\n\n### Backers\n\n<a href=\"https://opencollective.com/rrweb#sponsor\" rel=\"nofollow\"><img src=\"https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36\"></a>\n\n## Core Team Members\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <a href=\"https://github.com/Yuyz0112\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/13651389?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Yuyz0112</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/YunFeng0817\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/27533910?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Yun Feng</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/eoghanmurray\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/156780?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>eoghanmurray</b></sub>\n        <br /><br />\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://github.com/Juice10\">\n        <img\n          src=\"https://avatars.githubusercontent.com/u/4106?s=100\"\n          width=\"100px;\"\n          alt=\"\"\n        />\n        <br /><sub><b>Juice10</b></sub>\n        <br /><sub>open for rrweb consulting</sub>\n      </a>\n    </td>\n  </tr>\n</table>\n\n## Who's using rrweb?\n\n<table>\n  <tr>\n    <td align=\"center\">\n      <a href=\"http://www.smartx.com/\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://www.rrweb.io/logos/smartx.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://www.rrweb.io/logos/posthog.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://statcounter.com/session-replay/\" target=\"_blank\">\n        <img width=\"195px\" src=\"https://statcounter.com/images/logo-statcounter-arc-blue.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://recordonce.com/\" target=\"_blank\">\n        <img width=\"195px\" alt=\"Smart screen recording for SaaS\" src=\"https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg\">\n      </a>\n    </td>\n  </tr>\n    <tr>\n    <td align=\"center\">\n      <a href=\"https://cux.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"The first ever UX automation tool\" width=\"195px\" src=\"https://cux.io/cux-logo.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://remsupp.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Remote Access & Co-Browsing\" width=\"195px\" src=\"https://remsupp.com/images/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://highlight.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"The open source, fullstack Monitoring Platform.\" width=\"195px\" src=\"https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://analyzee.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions.\" width=\"195px\" src=\"https://cdn.analyzee.io/assets/analyzee-logo.png\">\n      </a>\n    </td>\n  </tr>\n  <tr>\n    <td align=\"center\">\n      <a href=\"https://requestly.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Intercept, Modify, Record & Replay HTTP Requests.\" width=\"195px\" src=\"https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://gleap.io\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"In-app bug reporting & customer feedback platform.\" width=\"195px\" src=\"https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://uxwizz.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Self-hosted website analytics with heatmaps and session recordings.\" width=\"195px\" src=\"https://github.com/UXWizz/public-files/raw/main/assets/logo.png\">\n      </a>\n    </td>\n    <td align=\"center\">\n      <a href=\"https://www.howdygo.com\" target=\"_blank\">\n        <img style=\"padding: 8px\" alt=\"Interactive product demos for small marketing teams\" width=\"195px\" src=\"https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg\">\n      </a>\n    </td>\n  </tr>\n</table>\n","readmeFilename":"Readme.md","_rev":"1-ece3a7fa79a4257bc7bd7bbdea390005"}