feat: useMediaDevices, useMediaDeviceSelect

Author: insertish

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-livekit-components",
-  "version": "2.0.4-1",
+  "version": "2.9.15-1",
   "description": "Solid components for building applications with LiveKit",
   "license": "MIT",
   "author": "insertish",

src/components/participant/VideoTrack.tsx

@@ -1,3 +1,6 @@
+// @livekit/[email protected]
+// Apache-2.0
+
 import { RemoteTrackPublication } from 'livekit-client'
 import { useMediaTrackBySourceOrName } from '../../signals/useMediaTrackBySourceOrName'
 import type { ParticipantClickEvent, TrackReference } from '@livekit/components-core'

src/signals/index.ts

@@ -11,9 +11,6 @@
 // TODO: useLiveKitRoom
 // TODO: useLocalParticipant
 // TODO: useLocalParticipantPermissions
-// TODO: useMediaDevices
-// TODO: useMediaDeviceSelect
-// TODO: useMediaTrackBySourceOrName
 // TODO: usePagination
 // TODO: usePaginationTile
 // TODO: usePaginationTracks
@@ -50,5 +47,11 @@ export { useIsMuted } from './useIsMuted'
 
 export { useIsSpeaking } from './useIsSpeaking'
 
+export { useMediaDevices } from './useMediaDevices';
+
+export { useMediaDeviceSelect } from './useMediaDeviceSelect';
+
+export { useMediaTrackBySourceOrName } from './useMediaTrackBySourceOrName';
+
 export type { UseTracksHookReturnType, UseTracksOptions } from './useTracks'
 export { useTracks } from './useTracks'

src/signals/useMediaDeviceSelect.ts

@@ -0,0 +1,95 @@
+// @livekit/[email protected]
+// Apache-2.0
+
+import { createMediaDeviceObserver, setupDeviceSelector } from '@livekit/components-core'
+import { LocalAudioTrack, LocalVideoTrack, Room } from 'livekit-client'
+import { createEffect, createMemo, createSignal, on, onCleanup } from 'solid-js'
+import { useMaybeRoomContext } from 'src/context'
+import { useObservableState } from './internal'
+
+/** @public */
+export interface UseMediaDeviceSelectProps {
+  kind: MediaDeviceKind
+  room?: Room
+  track?: LocalAudioTrack | LocalVideoTrack
+  /**
+   * this will call getUserMedia if the permissions are not yet given to enumerate the devices with device labels.
+   * in some browsers multiple calls to getUserMedia result in multiple permission prompts.
+   * It's generally advised only flip this to true, once a (preview) track has been acquired successfully with the
+   * appropriate permissions.
+   *
+   * @see {@link MediaDeviceMenu}
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices | MDN enumerateDevices}
+   */
+  requestPermissions?: boolean
+  /**
+   * this callback gets called if an error is thrown when failing to select a device and also if a user
+   * denied permissions, eventhough the `requestPermissions` option is set to `true`.
+   * Most commonly this will emit a MediaDeviceError
+   */
+  onError?: (e: Error) => void
+}
+
+/**
+ * The `useMediaDeviceSelect` hook is used to implement the `MediaDeviceSelect` component and
+ * returns o.a. the list of devices of a given kind (audioinput or videoinput), the currently active device
+ * and a function to set the the active device.
+ *
+ * @example
+ * ```tsx
+ * const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({kind: 'audioinput'});
+ * ```
+ * @public
+ */
+export function useMediaDeviceSelect({
+  kind,
+  room,
+  track,
+  requestPermissions,
+  onError,
+}: UseMediaDeviceSelectProps) {
+  const roomContext = useMaybeRoomContext()
+  const roomFallback = createMemo(() => room ?? roomContext?.() ?? new Room())
+
+  // List of all devices.
+  const deviceObserver = createMemo(() =>
+    createMediaDeviceObserver(kind, onError, requestPermissions),
+  )
+
+  const devices = useObservableState(deviceObserver(), [] as MediaDeviceInfo[])
+
+  // Active device management.
+  const [currentDeviceId, setCurrentDeviceId] = createSignal(
+    roomFallback()?.getActiveDevice(kind) ?? 'default',
+  )
+
+  const deviceSelector = createMemo(() => setupDeviceSelector(kind, roomFallback()))
+
+  createEffect(
+    on(
+      () => deviceSelector(),
+      ({ activeDeviceObservable }) => {
+        const listener = activeDeviceObservable.subscribe(deviceId => {
+          if (!deviceId) {
+            return
+          }
+          console.info('setCurrentDeviceId', deviceId)
+          setCurrentDeviceId(deviceId)
+        })
+
+        onCleanup(() => {
+          listener?.unsubscribe()
+        })
+      },
+    ),
+  )
+
+  return {
+    devices,
+    className: () => deviceSelector().className,
+    activeDeviceId: currentDeviceId,
+    setActiveMediaDevice: (
+      ...args: Parameters<ReturnType<typeof deviceSelector>['setActiveMediaDevice']>
+    ) => deviceSelector().setActiveMediaDevice(...args),
+  }
+}

src/signals/useMediaDevices.ts

@@ -0,0 +1,31 @@
+// @livekit/[email protected]
+// Apache-2.0
+
+import { createMediaDeviceObserver } from "@livekit/components-core";
+import { createMemo } from "solid-js";
+import { useObservableState } from "./internal";
+
+/**
+ * The `useMediaDevices` hook returns the list of media devices of a given kind.
+ *
+ * @example
+ * ```tsx
+ * const videoDevices = useMediaDevices({ kind: 'videoinput' });
+ * const audioDevices = useMediaDevices({ kind: 'audioinput' });
+ * ```
+ * @public
+ */
+export function useMediaDevices({
+  kind,
+  onError,
+}: {
+  kind: MediaDeviceKind;
+  onError?: (e: Error) => void;
+}) {
+  const deviceObserver = createMemo(
+    () => createMediaDeviceObserver(kind, onError),
+  );
+
+  const devices = useObservableState(deviceObserver(), [] as MediaDeviceInfo[]);
+  return devices;
+}