screen sharing

client/app/composables/use-devices.ts

@@ -0,0 +1,28 @@
+import { createGlobalState, useDevicesList } from '@vueuse/core'
+
+export const useDevices = createGlobalState(() => {
+  const {
+    ensurePermissions,
+    permissionGranted,
+    videoInputs,
+    audioInputs,
+    audioOutputs,
+  } = useDevicesList()
+
+  async function getShareStream(fps = 30) {
+    return navigator.mediaDevices.getDisplayMedia({
+      audio: false,
+      video: {
+        displaySurface: 'monitor',
+        frameRate: { max: fps },
+      },
+    })
+  }
+
+  return {
+    videoInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(videoInputs.value))),
+    audioInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioInputs.value))),
+    audioOutputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioOutputs.value))),
+    getShareStream,
+  }
+})