Skip to main content


Recording functionality is provided in the rp-recording package.

import {Player} from "ractive-player";
import {RecordingControl} from "rp-recording";
const controls = (<>
<div className="rp-controls-right">
<RecordingControl plugins={[/* recording plugins */]}/>
/* ... */
<Player controls={controls} ref={playerRef} script={script} thumbs={thumbData}>
{/* */}

Warning: by default, Player will pause/play whenever the canvas is clicked. Since this is annoying while recording, rp-recording disables this when it is loaded as a control. Therefore, once you are done recording, you need to make sure that you are using Player.preventCanvasClick as needed.


The audio recording produced by the browser will not have the metadata needed for seeking. To fix the recording:

ffmpeg -i audio.webm -strict -2 audio-fixed.webm
mv audio-fixed.webm audio.webm