useDisplayMedia

Hook that provides screen sharing functionality

browser

test coverage

Last changed: last month

TIP

This hook uses mediaDevices.getDisplayMedia browser api to provide enhanced functionality. Make sure to check for compatibility with different browsers when using this api

Installation

Library

CLI

Manual

import { useDisplayMedia } from '@siberiacancode/reactuse';

Usage

const { stream, sharing, start, stop } = useDisplayMedia(ref);
// or
const { ref, stream, sharing, start, stop } = useDisplayMedia<HTMLVideoElement>();

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target video element to display the media stream
options.audio?	boolean | MediaTrackConstraints	-	Whether to enable audio sharing
options.immediately?	boolean	false	Whether to start immediately
options.video?	boolean | MediaTrackConstraints	-	Whether to enable video sharing

Returns

UseDisplayMediaReturn

Parameters

Name	Type	Default	Note
options.audio?	boolean | MediaTrackConstraints	-	Whether to enable audio sharing
options.immediately?	boolean	false	Whether to start immediately
options.video?	boolean | MediaTrackConstraints	-	Whether to enable video sharing

Returns

UseDisplayMediaReturn & { ref: StateRef<HTMLVideoElement> }

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export interface UseDisplayMediaReturn {
  /** Whether screen sharing is currently active */
  sharing: boolean;
  /** The media stream object */
  stream: MediaStream | null;
  /** Whether the display media API is supported */
  supported: boolean;
  /** Start screen sharing */
  start: () => Promise<void>;
  /** Stop screen sharing */
  stop: () => void;
}

export interface UseDisplayMediaOptions {
  /** Whether to enable audio sharing */
  audio?: boolean | MediaTrackConstraints;
  /** Whether to start immediately */
  immediately?: boolean;
  /** Whether to enable video sharing */
  video?: boolean | MediaTrackConstraints;
}

export interface UseDisplayMedia {
  (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;

  <Target extends HTMLVideoElement>(
    options?: UseDisplayMediaOptions,
    target?: never
  ): { ref: StateRef<Target> } & UseDisplayMediaReturn;
}

Source

Source • Demo

Contributors

D

debabin