{"_id":"@dom-replay/plugin-canvas-webrtc-record","name":"@dom-replay/plugin-canvas-webrtc-record","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dom-replay/plugin-canvas-webrtc-record","version":"0.0.1","description":"Plugin that live streams contents of canvas elements via webrtc","type":"module","main":"./dist/plugin-canvas-webrtc-record.umd.cjs","module":"./dist/plugin-canvas-webrtc-record.js","unpkg":"./dist/plugin-canvas-webrtc-record.umd.cjs","typings":"dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/plugin-canvas-webrtc-record.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/plugin-canvas-webrtc-record.cjs"}}},"keywords":["dom-replay"],"license":"MIT","devDependencies":{"@dom-replay/core":"^0.0.1","@dom-replay/types":"^0.0.1","typescript":"5.8.2","vite":"^5.3.1","vite-plugin-dts":"^4.5.4"},"peerDependencies":{"@dom-replay/core":"^0.0.1"},"dependencies":{"simple-peer-light":"^9.10.0"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"scripts":{"dev":"vite build --watch","build":"pnpm run prepublish","check-types":"tsc -noEmit","prepublish":"tsc -noEmit && vite build"},"_id":"@dom-replay/plugin-canvas-webrtc-record@0.0.1","_integrity":"sha512-DkESe850SZbAHj8negAqxt4AvxOuwYNUKZAs3+2saYY9DPibj/q/4aV/czueVkTPCf+8PHVnJO9d3oGVDPvmSA==","_resolved":"/tmp/9bb90a8569fcc88e750e8069f28cfe33/dom-replay-plugin-canvas-webrtc-record-0.0.1.tgz","_from":"file:dom-replay-plugin-canvas-webrtc-record-0.0.1.tgz","_nodeVersion":"22.21.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-DkESe850SZbAHj8negAqxt4AvxOuwYNUKZAs3+2saYY9DPibj/q/4aV/czueVkTPCf+8PHVnJO9d3oGVDPvmSA==","shasum":"25fc01a805b32f22a6c6f03b5c7c5a28b9cd512d","tarball":"https://registry.npmjs.org/@dom-replay/plugin-canvas-webrtc-record/-/plugin-canvas-webrtc-record-0.0.1.tgz","fileCount":13,"unpackedSize":413784,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFDm8kFqUF/laduyeqHSzT8aL3EvsdQLTzllb0OYVYc8AiBCIAW7piCfjClSYzA0Ic/h+vEn5Pnm6HNR08LNLUuzVw=="}]},"_npmUser":{"name":"stradum","email":"vcatalano@gmail.com"},"directories":{},"maintainers":[{"name":"stradum","email":"vcatalano@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/plugin-canvas-webrtc-record_0.0.1_1771304861772_0.15003792296383422"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-17T05:07:41.650Z","0.0.1":"2026-02-17T05:07:42.017Z","modified":"2026-02-17T05:07:42.267Z"},"maintainers":[{"name":"stradum","email":"vcatalano@gmail.com"}],"description":"Plugin that live streams contents of canvas elements via webrtc","keywords":["dom-replay"],"license":"MIT","readme":"# dom-replay canvas webrtc plugin\n\nPlugin that live streams contents of canvas elements via webrtc\n\n## Example of live streaming via `pnpm 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 { record } from '@dom-replay/record';\nimport { RRWebPluginCanvasWebRTCRecord } from '@dom-replay/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\nrecord({\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 { Replayer } from '@dom-replay/replay';\nimport { RRWebPluginCanvasWebRTCReplay } from '@dom-replay/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 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/dom-replay/dom-replay (canvas WebRTC streaming)\n","readmeFilename":"README.md","_rev":"1-00854446397657a466b8b18bcda3fa12"}