LightNews — News, ranked by scholars

Cory House

@housecor.com

Tanstack query is awesome for fetching and caching data.

But, it's broader than that. It's an *async state* library.

Example: Here's a custom React Query hook for checking if a device's camera or audio input is available.

import { useQuery } from "@tanstack/react-query";

type Status = "loading" | "error fetching" | "no devices found" | "available";

export const useMediaAvailability = (kind: MediaDeviceKind) =>
useQuery({
queryKey: ["mediaAvailability", kind],
queryFn: async (): Promise<Status> => {
try {
const mediaDevices = await navigator.mediaDevices.enumerateDevices();
const cameraDevices = mediaDevices.filter((device) => device.kind === kind);
if (cameraDevices.length && cameraDevices.some((d) => d.label)) {
return "available";
}
return "no devices found";
} catch (error) {
return "error fetching";
}
},
});

November 6, 2024 at 9:20 PM

🌱📈

@cwonus.org

developer.mozilla.org/en-US/docs/W...

MediaDevices: selectAudioOutput() method - Web APIs | MDN

The selectAudioOutput() method of the MediaDevices interface prompts the user to select an audio output device, such as a speaker or headset. If the user selects a device, the method grants user permi...

developer.mozilla.org

April 27, 2025 at 5:00 PM

anon

@anon5r.com

こんな感じで取るのか
const audioInput = [...await navigator.mediaDevices.enumerateDevices()].filter((device) => device.kind === "audioinput");

developer.mozilla.org/ja/docs/Web/...

MediaDevices: enumerateDevices() メソッド - Web API | MDN

MediaDevices の enumerateDevices() メソッドは、マイクやカメラ、ヘッドセットなど、利用可能なメディア入出力機器の一覧を要求します。返されたプロミス (Promise) は、機器を記述した MediaDeviceInfo の配列で解決されます。

developer.mozilla.org

May 8, 2024 at 2:25 PM

Sickle & Scythe

@sickle-n-scythe.bsky.social

Bring the crew. Grab the snacks. Don’t miss the moments everyone will be talking about.

⚽🏈🏀⚾🏒

Visit: sickleandscythe.com

#SickleAndScythe #WorldCup #SportsFans #GameDay #SoccerFans #FootballFans #BasketballFans #HockeyFans #BaseballFans #CatchTheAction #HomeMedia #MediaDevices

June 26, 2026 at 10:02 PM

randomMDN

@randommdn.front-end.social.ap.brid.gy

🦖 MediaDevices: getDisplayMedia() method
🟧 Limited availability

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

The getDisplayMedia() method of the MediaDevices interface prompts the user to select and grant permission to capture the contents of a display or […]

Original post on front-end.social

front-end.social

December 12, 2025 at 7:44 PM

azu

@azu.bsky.social

これでデフォルトの音声入出力とかはどれなのかってどうやって判定すればいいんだっけ? "MediaDevices: enumerateDevices() method - Web APIs | MDN" https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

February 6, 2025 at 9:48 AM