Screen Capture

VIDTREO supports screen recording including full screen, application windows, and browser tabs.

Basic Screen Recording

import { useVidtreoRecorder } from '@vidtreo/recorder-react';

function ScreenRecorder() {
  const { state, actions } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
    onUploadComplete: (result) => console.log(result.uploadUrl),
  });

  return (
    <div>
      <video
        ref={(el) => el && state.stream && (el.srcObject = state.stream)}
        autoPlay
        muted
        playsInline
      />

      {state.recordingState === 'idle' && (
        <button onClick={() => actions.startRecording('screen')}>
          Record Screen
        </button>
      )}

      {state.recordingState === 'recording' && (
        <button onClick={() => actions.stopRecording()}>
          Stop Recording
        </button>
      )}
    </div>
  );
}

Camera + Screen Switching

Allow users to switch between camera and screen during recording:

import { VidtreoRecorder } from '@vidtreo/recorder-react';

function SwitchableRecorder() {
  return (
    <VidtreoRecorder
      apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
      enableSourceSwitching={true}
      onUploadComplete={(result) => {
        console.log('Video:', result.uploadUrl);
      }}
    />
  );
}

Screen-Only Mode

Disable camera recording to show only screen capture:

function ScreenOnlyRecorder() {
  const { state, actions } = useVidtreoRecorder({
    apiKey: import.meta.env.VITE_VIDTREO_API_KEY,
    enableSourceSwitching: false,
  });

  useEffect(() => {
    // Start directly with screen
    actions.startPreview('screen');
  }, []);

  return (
    <div>
      <video
        ref={(el) => el && state.stream && (el.srcObject = state.stream)}
        autoPlay
        muted
      />
      <button
        onClick={() =>
          state.recordingState === 'idle'
            ? actions.startRecording('screen')
            : actions.stopRecording()
        }
      >
        {state.recordingState === 'idle' ? 'Record' : 'Stop'}
      </button>
    </div>
  );
}

Web Component

<vidtreo-recorder
  api-key="your-api-key"
  enable-source-switching="true"
></vidtreo-recorder>

<script>
  const recorder = document.querySelector('vidtreo-recorder');

  // Start with screen recording
  recorder.addEventListener('connected', () => {
    recorder.toggleSource(); // Switch to screen
  });
</script>

Screen Capture Options

The browser's screen picker allows users to select:

Entire Screen — Record everything on a monitor
Application Window — Record a specific app
Browser Tab — Record a single tab (with tab audio)

Notes

Screen recording requires explicit user permission
Tab audio capture only works for browser tabs, not windows/screens
Some browsers may limit screen recording on certain pages

Next Steps

Custom UI — Build your own interface
Advanced Usage — Error handling

Screen Capture

On this page