bump

client/app/app.vue

@@ -4,6 +4,7 @@
   </NuxtLayout>
 
   <PrimeToast position="bottom-center" />
+  <PrimeDynamicDialog />
 </template>
 
 <script setup lang="ts">

client/app/components.d.ts

@@ -14,7 +14,9 @@ declare module 'vue' {
     PrimeButtonGroup: typeof import('primevue/buttongroup')['default']
     PrimeCard: typeof import('primevue/card')['default']
     PrimeDivider: typeof import('primevue/divider')['default']
+    PrimeDynamicDialog: typeof import('primevue/dynamicdialog')['default']
     PrimeFloatLabel: typeof import('primevue/floatlabel')['default']
+    PrimeIftaLabel: typeof import('primevue/iftalabel')['default']
     PrimeInputGroup: typeof import('primevue/inputgroup')['default']
     PrimeInputText: typeof import('primevue/inputtext')['default']
     PrimePassword: typeof import('primevue/password')['default']

client/app/components/ShareScreenDialog.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <PrimeFloatLabel class="mb-1">
+      Resolution
+    </PrimeFloatLabel>
+    <PrimeSelectButton
+      v-model="resolution"
+      :options="resolutionOptions"
+      fluid
+      option-label="label"
+      option-value="value"
+      :allow-empty="false"
+    />
+  </div>
+
+  <div class="mt-4">
+    <PrimeFloatLabel class="mb-1">
+      FPS
+    </PrimeFloatLabel>
+    <PrimeSelectButton
+      v-model="fps"
+      :options="fpsOptions"
+      fluid
+      option-label="label"
+      option-value="value"
+      :allow-empty="false"
+    />
+  </div>
+
+  <div class="mt-4">
+    <PrimeFloatLabel class="mb-1">
+      Codec
+    </PrimeFloatLabel>
+    <PrimeSelect
+      v-model="codecPayloadType"
+      :options="videoCodecs"
+      fluid
+      option-label="mimeType"
+      option-value="preferredPayloadType"
+      placeholder="Select codec"
+    >
+      <template #option="{ option }">
+        <div class="w-full whitespace-normal">
+          <p>{{ option.mimeType }}</p>
+          <p class="text-muted-color text-xs break-words">
+            {{ option.parameters }}
+          </p>
+        </div>
+      </template>
+    </PrimeSelect>
+  </div>
+
+  <div class="text-right mt-8">
+    <PrimeButton severity="success" @click="share">
+      Share screen
+    </PrimeButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { RtpCodecCapability } from 'mediasoup-client/types'
+import { StorageSerializers, useLocalStorage } from '@vueuse/core'
+
+export interface ShareSettings {
+  resolution: number
+  fps: number
+  codec?: RtpCodecCapability
+}
+
+const emit = defineEmits<{
+  share: [ShareSettings]
+}>()
+
+const mediasoup = useMediasoup()
+
+const resolutionOptions = [
+  {
+    label: '720p',
+    value: 720,
+  },
+  {
+    label: '1080p',
+    value: 1080,
+  },
+  {
+    label: '1440p',
+    value: 1440,
+  },
+]
+
+const fpsOptions = [5, 30, 60].map((value) => {
+  return {
+    label: value.toString(),
+    value,
+  }
+})
+
+const videoCodecs = computed(() => {
+  return (mediasoup.rtpCapabilities.value?.codecs ?? []).filter((codec) => {
+    return codec.kind === 'video' && codec.mimeType !== 'video/rtx'
+  })
+})
+
+const fps = useLocalStorage<number>(
+  'SHARE_FPS',
+  30,
+  {
+    serializer: StorageSerializers.number,
+  },
+)
+
+const resolution = useLocalStorage<number>(
+  'SHARE_RESOLUTION',
+  1080,
+  {
+    serializer: StorageSerializers.number,
+  },
+)
+
+const codecPayloadType = useLocalStorage<number>(
+  'SHARE_CODEC_PAYLOAD_TYPE',
+  (videoCodecs.value.find(codec => codec.mimeType === 'video/H264') ?? videoCodecs.value[0])?.preferredPayloadType ?? -1,
+  {
+    serializer: StorageSerializers.number,
+  },
+)
+
+function share() {
+  emit('share', {
+    resolution: resolution.value,
+    fps: fps.value,
+    codec: videoCodecs.value.find(codec => codec.preferredPayloadType === codecPayloadType.value),
+  })
+}
+</script>
+
+<style lang="scss">
+
+</style>

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,

client/app/pages/preferences.vue

@@ -66,24 +66,6 @@
       <label for="inputDevice">Input device</label>
     </PrimeFloatLabel>
 
-    <PrimeDivider align="left">
-      Screen sharing
-    </PrimeDivider>
-
-    <div>
-      <p class="text-sm mb-2 text-center">
-        FPS
-      </p>
-      <PrimeSelectButton
-        v-model="shareFps"
-        :options="shareFpsOptions"
-        fluid
-        size="small"
-        option-label="label"
-        option-value="value"
-      />
-    </div>
-
     <template v-if="isTauri">
       <PrimeDivider align="left">
         Hotkeys
@@ -156,16 +138,8 @@ const {
   inputDeviceExist,
   outputDeviceExist,
   videoDeviceExist,
-  shareFps,
 } = usePreferences()
 
-const shareFpsOptions = [5, 30, 60].map((value) => {
-  return {
-    label: value.toString(),
-    value,
-  }
-})
-
 const setupToggleInputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleInputHotkey)
 const setupToggleOutputHotkey = (event: KeyboardEvent) => setupHotkey(event, toggleOutputHotkey)
 

client/src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Chad",
-  "version": "0.3.0-rc.7",
+  "version": "0.3.0-rc.8",
   "identifier": "xyz.koptilnya.chad",
   "build": {
     "frontendDist": "../.output/public",