DEMO

useScreenShare

Reactive mediaDevices.getDisplayMedia, allows screen sharing. It also handles the native stop stream button automatically.

Usage

import { useScreenShare } from '@react-hooks-library/core'

export function Demo() {
  const { play, ref, stop, isPlaying } = useScreenShare()

  return (
    <div>
      <video
        ref={ref}
        width="500"
        height="280"
        muted
        autoPlay
        playsInline></video>
      <div>
        <button onClick={play} disabled={isPlaying}>
          Start Screen Sharing
        </button>
        <button onClick={stop} disabled={!isPlaying}>
          Stop Screen Sharing
        </button>
      </div>
    </div>
  )
}

Type Declarations

interface UseScreenShareOptions {
  /**
   * If the stream video media constraints
   *
   * @default true
   */
  video?: boolean | MediaTrackConstraints | undefined
  /**
   * If the stream audio media constraints
   *
   * @default true
   */
  audio?: boolean | MediaTrackConstraints | undefined
}

/**
 * Reactive screen sharing
 *
 * @param options
 *
 * @see https://react-hooks-library.vercel.app/core/useScreenShare
 */
declare function useScreenShare(options?: UseScreenShareOptions): {
  isSupported: boolean
  isPlaying: boolean
  ref: react.MutableRefObject<HTMLVideoElement | null>
  stream: react.MutableRefObject<MediaStream | null>
  play: () => Promise<MediaStream | null | undefined>
  stop: () => Promise<void>
}

Source

Source | Demo | Docs