Skip to main content

Recording

Recording functionality is provided in the rp-recording package.

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

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.

warning

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