настройки демонстрации экрана

client/app/composables/use-app.ts

@@ -1,3 +1,5 @@
+import type { ShareSettings } from '~/components/ShareScreenDialog.vue'
+import { ShareScreenDialog } from '#components'
 import { getVersion } from '@tauri-apps/api/app'
 import { openUrl as tauriOpenUrl } from '@tauri-apps/plugin-opener'
 import { computedAsync, createGlobalState } from '@vueuse/core'
@@ -8,6 +10,7 @@ export const useApp = createGlobalState(() => {
   const mediasoup = useMediasoup()
   const signaling = useSignaling()
   const { emit } = useEventBus()
+  const dialog = useDialog()
 
   const ready = ref(false)
   const isTauri = computed(() => '__TAURI_INTERNALS__' in window)
@@ -125,8 +128,25 @@ export const useApp = createGlobalState(() => {
 
   async function toggleShare() {
     if (!mediasoup.shareProducer.value) {
-      await mediasoup.enableShare()
-      emit('share:enabled')
+      const { close } = dialog.open(ShareScreenDialog, {
+        props: {
+          header: 'Share settings',
+          modal: true,
+          draggable: false,
+          closable: false,
+          dismissableMask: true,
+          style: {
+            width: '440px',
+          },
+        },
+        emits: {
+          onShare: async (settings: ShareSettings) => {
+            await mediasoup.enableShare(settings)
+            emit('share:enabled')
+            close()
+          },
+        },
+      })
     }
     else {
       await mediasoup.disableProducer(mediasoup.shareProducer.value)

client/app/composables/use-devices.ts

@@ -9,12 +9,11 @@ export const useDevices = createGlobalState(() => {
     audioOutputs,
   } = useDevicesList()
 
-  async function getShareStream(fps = 30) {
+  async function getShareStream(fps = 30, resolution = 1080) {
     return navigator.mediaDevices.getDisplayMedia({
       audio: false,
       video: {
-        width: { max: 1920 },
-        height: { max: 1080 },
+        height: { max: resolution },
         displaySurface: 'monitor',
         frameRate: { ideal: fps, max: fps },
       },

client/app/composables/use-mediasoup.ts

@@ -1,5 +1,6 @@
 import type { ChadClient, Consumer, Producer } from '#shared/types'
 import type { MediaKind, ProducerOptions } from 'mediasoup-client/types'
+import type { ShareSettings } from '~/components/ShareScreenDialog.vue'
 import { createSharedComposable } from '@vueuse/core'
 import * as mediasoupClient from 'mediasoup-client'
 import { shallowRef } from 'vue'
@@ -85,12 +86,11 @@ export const useMediasoup = createSharedComposable(() => {
         return
 
       device.value = new mediasoupClient.Device()
-      rtpCapabilities.value = await signaling.socket.value.emitWithAck('getRtpCapabilities')
+      const routerRtpCapabilities = await signaling.socket.value.emitWithAck('getRtpCapabilities')
 
-      await device.value.load({ routerRtpCapabilities: rtpCapabilities.value! })
+      await device.value.load({ routerRtpCapabilities })
 
-      console.log('SERVER RTP CAPABILITIES', rtpCapabilities.value)
-      console.log('СОГЛАСОВАННЫЕ', device.value.rtpCapabilities)
+      rtpCapabilities.value = device.value.rtpCapabilities
 
       // Send transport
       {
@@ -450,51 +450,30 @@ export const useMediasoup = createSharedComposable(() => {
     })
   }
 
-  async function enableShare() {
+  async function enableShare(settings: ShareSettings) {
     if (shareProducer.value)
       return
 
     if (!device.value)
       return
 
-    const stream = await getShareStream(preferences.shareFps.value)
+    const stream = await getShareStream(settings.fps)
 
     const track = stream.getVideoTracks()[0]
 
     if (!track)
       return
 
-    console.log('settings', track.getSettings())
     track.contentHint = 'motion'
 
     await createProducer({
       track,
       streamId: 'share',
-      codec: device.value.rtpCapabilities.codecs?.find(
-        c => c.mimeType.toLowerCase() === 'video/h264',
-      ),
-      // c => c.mimeType.toLowerCase() === 'video/h264' && c.parameters['profile-level-id'] === '42e01f',
-      // codec: device.value.rtpCapabilities.codecs?.find(
-      //   c => c.mimeType.toLowerCase() === 'video/av1',
-      // ),
-      // codec: device.value.rtpCapabilities.codecs?.find(
-      //   c => c.mimeType.toLowerCase() === 'video/vp9',
-      // ),
-      // codec: {
-      //   kind: 'video',
-      //   mimeType: 'video/AV1',
-      //   clockRate: 90000,
-      //   parameters: {
-      //     'level-idx': 13, // Level 4.1 — 1080p60
-      //     'profile': 0, // Main Profile
-      //     'tier': 0, // Main tier (0) vs High tier (1)
-      //     'x-google-start-bitrate': 8000,
-      //   },
-      // },
+      codec: settings.codec,
       encodings: [
         {
-          maxBitrate: 120_000_000,
-          maxFramerate: 60,
+          // maxBitrate: 120_000_000,
+          maxFramerate: settings.fps,
           scalabilityMode: 'L1T1',
           networkPriority: 'high',
         },

client/app/composables/use-preferences.ts

@@ -20,8 +20,6 @@ export const usePreferences = createGlobalState(() => {
   const noiseSuppression = useLocalStorage('NOISE_SUPPRESSION', true)
   const echoCancellation = useLocalStorage('ECHO_CANCELLATION', true)
 
-  const shareFps = useLocalStorage('SHARE_FPS', 30)
-
   const toggleInputHotkey = ref<SyncedPreferences['toggleInputHotkey']>('')
   const toggleOutputHotkey = ref<SyncedPreferences['toggleOutputHotkey']>('')
 
@@ -65,7 +63,6 @@ export const usePreferences = createGlobalState(() => {
     autoGainControl,
     noiseSuppression,
     echoCancellation,
-    shareFps,
     toggleInputHotkey,
     toggleOutputHotkey,
     inputDeviceExist,