SDK/INTEGRATION MODES
Fully custom UI
Build your own recorder: your button, your setup screen, your controls. The SDK only captures, uploads and saves. Users never see EdithPro.
On this page
This is the white-label mode. Don’t call open() and don’t use EdithProButton. Use the methods below.
1. Check the browser #
support.ts
const supported = window.isSecureContext && !!navigator.mediaDevices?.getDisplayMedia;// Hide or disable your record button when this is false.
2. List cameras and microphones #
devices.ts
const devices = await navigator.mediaDevices.enumerateDevices();const cameras = devices.filter((d) => d.kind === 'videoinput');const mics = devices.filter((d) => d.kind === 'audioinput');
Browsers hide device names until the user allows camera or mic access once. Ask with getUserMedia first if you want names in your dropdowns.
3. Let the user choose #
Show your own toggles and dropdowns. Leave cameraId or micId out to record without them.
settings.ts
const settings = { cameraId: cameraOn ? selectedCameraId : undefined, micId: micOn ? selectedMicId : undefined, quality: '1080p', // '720p' | '1080p' | '2K' | '4K'};
4. Create the recording, then start capturing #
const { record, startCapture } = useEdithPro(); async function start() { const rec = await record({ ...settings, title: 'Checkout bug', folderId: 'folder_abc' }); startCapture(rec.recording_encrypted_id, settings);}
record() creates the recording in your workspace and returns it. startCapture() starts capturing. The browser then shows its own picker so the user chooses a tab, window or screen.
5. Your own controls #
const { isRecording, isPaused, duration, pause, resume, stop, delete: discard, restart } = useEdithPro(); <button onClick={isPaused ? resume : pause}>{isPaused ? 'Resume' : 'Pause'}</button><button onClick={stop}>Stop and save</button><button onClick={discard}>Discard</button><span>{formatTime(duration)}</span>
6. Show the result #
config
onStop: (recordingId, seconds) => addVideoMessage(recordingId, seconds),onComplete: (recordingId) => markProcessed(recordingId),onError: (error) => showError(error.message),
Screen, camera and mic are recorded as separate tracks. Nothing is drawn on your page while recording, so place your own camera preview if you want one.
Was this page helpful? @edithpro/sdk 1.0.5 · Edit this page