Screen sharing

useScreenShare covers the sending side of screen sharing: starting and stopping your own share, and observing all active shares in the call. Rendering a share reuses the same DailyVideo component, with the screenVideo track type. useScreenShare returns startScreenShare, stopScreenShare, and isSharingScreen for the local participant:

import { useScreenShare } from '@daily-co/daily-react';

function ScreenShareButton() {
  const { isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();
  return (
    <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
      {isSharingScreen ? 'Stop sharing' : 'Share screen'}
    </button>
  );
}

startScreenShare triggers the browser’s native screen-picker dialog. The user can cancel it, so do not assume a share started just because you called the function. React to the actual outcome with the callbacks:

import { useCallback } from 'react';
import { useScreenShare } from '@daily-co/daily-react';

function ScreenShare() {
  const { startScreenShare } = useScreenShare({
    onLocalScreenShareStarted: useCallback(() => console.log('Sharing started'), []),
    onLocalScreenShareStopped: useCallback(() => console.log('Sharing stopped'), []),
    onError: useCallback((e) => console.error('Screen share error', e), []),
  });
  return <button onClick={startScreenShare}>Share</button>;
}

Render active screen shares

The screens array describes every active share in the call, local and remote. Each entry has a session_id, a screen_id, local, and the video and audio track states. Render each one with DailyVideo using type="screenVideo":

import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShares() {
  const { screens } = useScreenShare();
  if (screens.length === 0) return null;
  return (
    <div>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          fit="contain"
        />
      ))}
    </div>
  );
}

You can also find who is sharing with useParticipantIds and the built-in filter: 'screen'. Use screens from useScreenShare when you need the screen track state; use the participant filter when you just need the IDs.

A share can include audio (for example, sharing a browser tab with sound). Remote screen audio is played automatically by DailyAudio. To also play the local participant’s own screen audio, set playLocalScreenAudio:

<DailyAudio playLocalScreenAudio />

import { useScreenShare, DailyVideo } from '@daily-co/daily-react';

function ScreenShareArea() {
  const { screens, isSharingScreen, startScreenShare, stopScreenShare } = useScreenShare();

  return (
    <div>
      <button onClick={() => (isSharingScreen ? stopScreenShare() : startScreenShare())}>
        {isSharingScreen ? 'Stop sharing' : 'Share screen'}
      </button>
      {screens.map((screen) => (
        <DailyVideo
          key={screen.screen_id}
          sessionId={screen.session_id}
          type="screenVideo"
          style={{ width: '100%', background: '#000' }}
        />
      ))}
    </div>
  );
}

Next steps

Rendering media

Recording

Capture the call, screen shares included.

Getting Started

Core Concepts

Building Call Features

Screen sharing

Render active screen shares

Next steps

Rendering media

Recording

​Start and stop sharing

​Render active screen shares

​Screen share audio

​A complete screen-share area

​Next steps

Rendering media

Recording

Start and stop sharing

Render active screen shares

Screen share audio

A complete screen-share area

Next steps