/reactuse

useDisplayMedia

Connects a video element to a screen-capture stream and keeps capture state under React control.

Usage

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

const displayMedia = useDisplayMedia<HTMLVideoElement>();
// or
const displayMedia = useDisplayMedia(ref, {
  constraints: { video: true, audio: false },
});

Example

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

export const ScreenShare = () => {
  const displayMedia = useDisplayMedia<HTMLVideoElement>({
    constraints: { video: true, audio: false },
  });

  return (
    <div>
      <button onClick={() => displayMedia.start()}>Start</button>
      <button onClick={displayMedia.stop}>Stop</button>
      <video ref={displayMedia.ref} autoPlay muted />
      {displayMedia.active && <span>Sharing</span>}
    </div>
  );
};

start(constraints):

await displayMedia.start({ video: { displaySurface: "browser" } });

constraints:

const displayMedia = useDisplayMedia<HTMLVideoElement>({
  constraints: { video: true, audio: false },
});

immediately:

const displayMedia = useDisplayMedia(videoRef, { immediately: true });

onStart:

const displayMedia = useDisplayMedia<HTMLVideoElement>({
  onStart: (stream) => console.log(stream),
});

onStop:

const displayMedia = useDisplayMedia<HTMLVideoElement>({
  onStop: () => console.log("stopped"),
});

Notes

• Hook uses the mediaDevices.getDisplayMedia API.

Type Declarations

import type { HookTarget, StateRef } from "@siberiacancode/reactuse";

export interface UseDisplayMediaConstraints {
  audio?: boolean | MediaTrackConstraints;
  video?: boolean | MediaTrackConstraints;
}
export interface UseDisplayMediaReturn {
  active: boolean;
  stream: MediaStream | null;
  supported: boolean;
  start: (constraints?: UseDisplayMediaConstraints) => Promise<MediaStream | undefined>;
  stop: () => void;
}
export interface UseDisplayMediaOptions {
  constraints?: UseDisplayMediaConstraints;
  immediately?: boolean;
  onStart?: (stream: MediaStream) => void;
  onStop?: (stream?: MediaStream) => void;
}
export interface UseDisplayMedia {
  (target: HookTarget, options?: UseDisplayMediaOptions): UseDisplayMediaReturn;
  <Target extends HTMLVideoElement>(
    options?: UseDisplayMediaOptions
  ): UseDisplayMediaReturn & { ref: StateRef<Target> };
}
export declare const useDisplayMedia: UseDisplayMedia;