[FIX] useMediaDevices hook

Author: nDriaDev

packages/react-tools/README.md

@@ -116,7 +116,6 @@
 	- [x] usePermission
 	- [x] useMediaDevices
 	- [x] useDisplayMedia
-	- [ ] useScreenShare
 	- [ ] useObservable — tracks latest value of an Observable
    	- [ ] usePointerTouchSwipe (https://vueuse.org/core/usePointerSwipe/ https://vueuse.org/core/useSwipe/)
 	- [ ] useWebWorker (https://vueuse.org/core/useWebWorker/)

packages/react-tools/src/hooks/useDisplayMedia.ts

@@ -1,20 +1,21 @@
 import { useCallback, useMemo, useRef } from "react";
 import { useMediaDevices, useSyncExternalStore } from ".";
+import { TDisplayMediaStreamOptions } from "../models";
 
 /**
  * **`useDisplayMedia`**: Hook to capture the contents of a display.
- * @returns {[MediaStream|undefined, (options: DisplayMediaStreamOptions | undefined) => Promise<void>, ()=>void]} result
+ * @returns {[MediaStream|undefined, (options: TDisplayMediaStreamOptions | undefined) => Promise<void>, ()=>void]} result
  * Array containing:
  * - first element: the captured stream.
  * - second element: function that starts capture.
  * - third element: function that stops capture.
  */
-export const useDisplayMedia = (): [MediaStream | undefined, (options?: DisplayMediaStreamOptions) => Promise<void>, () => void] => {
+export const useDisplayMedia = (): [MediaStream | undefined, (options?: TDisplayMediaStreamOptions) => Promise<void>, () => void] => {
 	const action = useMediaDevices("DisplayCapture");
 	const streamRef = useRef<MediaStream>();
 	const notifyRef = useRef<() => void>();
 
-	const start = useCallback((options?: DisplayMediaStreamOptions) => action(options).then(stream => {
+	const start = useCallback((options?: TDisplayMediaStreamOptions) => action(options).then(stream => {
 		streamRef.current = stream;
 		notifyRef.current && notifyRef.current();
 	}), [action]);

packages/react-tools/src/hooks/useMediaDevices.ts

@@ -1,6 +1,6 @@
 import { useRef } from "react"
 import { useEffectOnce } from ".";
-import { UseMediaDevicesProps, UseMediaDevicesResult } from "../models";
+import { TDisplayMediaStreamOptions, UseMediaDevicesProps, UseMediaDevicesResult } from "../models";
 
 let mediaDevicesOnChangeAttached = false;
 const mediaDevicesListeners = new Set<(evt: Event) => Promise<void> | void>();
@@ -63,7 +63,7 @@ function useMediaDevices(action: UseMediaDevicesProps): UseMediaDevicesResult {
 		return navigator.mediaDevices.getSupportedConstraints()
 	});
 
-	const getDisplay = useRef((options?: DisplayMediaStreamOptions, onDevicesChange?: (evt: Event) => Promise<void> | void) => {
+	const getDisplay = useRef((options?: TDisplayMediaStreamOptions, onDevicesChange?: (evt: Event) => Promise<void> | void) => {
 		if (!navigator.mediaDevices?.getDisplayMedia) {
 			throw Error("getDisplay not supported");
 		}

packages/react-tools/src/index.ts

@@ -72,7 +72,9 @@ export type {
 	TPermissionName,
 	UsePermissionResult,
 	UseMediaDevicesProps,
-	UseMediaDevicesResult
+	UseMediaDevicesResult,
+	TDisplayMediaStreamOptions,
+	CaptureController
 } from './models'
 
 export {

packages/react-tools/src/models/index.ts

@@ -22,5 +22,5 @@ export type { UseAudioProps, UseAudioResult } from './useAudio.model';
 export type { UseVideoProps, UseVideoResult } from './useVideo.model';
 export type { UseEventSourceProps, UseEventSourceResult } from './useEventSource.model';
 export type { UseWebSocketProps, UseWebSocketResult } from './useWebSocket.model';
-export type { UseMediaDevicesProps, UseMediaDevicesResult } from './useMediaDevices.model';
+export type { UseMediaDevicesProps, UseMediaDevicesResult, TDisplayMediaStreamOptions, CaptureController } from './useMediaDevices.model';
 export type { TPermissionName, UsePermissionResult, TPermissionState} from './usePermission.model';

packages/react-tools/src/models/useMediaDevices.model.ts

@@ -1,3 +1,16 @@
 export type UseMediaDevicesProps = "devicesList" | "supportedConstraintsList" | "DisplayCapture" | "mediaInputCapture";
 
-export type UseMediaDevicesResult = ((onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaDeviceInfo[]>) | ((onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => MediaTrackSupportedConstraints) | ((options?: DisplayMediaStreamOptions, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>) | ((constraints?: MediaStreamConstraints, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>);
+export type UseMediaDevicesResult = ((onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaDeviceInfo[]>) | ((onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => MediaTrackSupportedConstraints) | ((options?: DisplayMediaStreamOptions, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>) | ((constraints?: MediaStreamConstraints, onDevicesChange?: ((evt: Event) => void | Promise<void>) | undefined) => Promise<MediaStream>);
+
+/**The CaptureController interface provides methods that can be used to further manipulate a capture session separate from its initiation via MediaDevices.getDisplayMedia().*/
+export interface CaptureController {
+	/**controls whether the captured tab or window will be focused when an associated MediaDevices.getDisplayMedia() Promise fulfills, or whether the focus will remain with the tab containing the capturing app.*/
+	setFocusBehavior: (
+		/**An enumerated value that describes whether the user agent should transfer focus to the captured display surface, or keep the capturing app focused. Possible values are focus-captured-surface (transfer focus) and no-focus-change (keep focus on the capturing app).*/
+		focusBehavior: "focus-captured-surface" | "no-focus-change"
+	) => void;
+}
+
+export type TDisplayMediaStreamOptions = DisplayMediaStreamOptions & {
+	controller?: CaptureController;
+}