feat(recording): add frame rate, resolution and bitrate controls (#2175)

Author: nekomoyi

packages/client/internals/RecordingDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { nextTick } from 'vue'
-import { getFilename, mimeType, recordCamera, recorder, recordingName } from '../logic/recording'
+import { bitRate, frameRate, getFilename, mimeType, recordCamera, recorder, recordingName, resolution } from '../logic/recording'
 import DevicesSelectors from './DevicesSelectors.vue'
 import Modal from './Modal.vue'
 
@@ -18,6 +18,14 @@ const value = useVModel(props, 'modelValue', emit)
 
 const { startRecording } = recorder
 
+const frameRateOptions = [15, 24, 30, 60]
+const resolutionOptions = [
+  { value: '1280x720', label: '720p (1280x720)' },
+  { value: '1920x1080', label: '1080p (1920x1080)' },
+  { value: '2560x1440', label: '1440p (2560x1440)' },
+  { value: '3840x2160', label: '2160p (3840x2160)' },
+]
+
 function close() {
   value.value = false
 }
@@ -27,6 +35,7 @@ async function start() {
   await nextTick()
   startRecording({
     mimeType: mimeType.value,
+    bitsPerSecond: bitRate.value * 1024,
   })
 }
 </script>
@@ -51,6 +60,48 @@ async function start() {
             <div>This will be used in the output filename that might <br>help you better organize your recording chips.</div>
           </div>
         </div>
+
+        <div class="form-text">
+          <label for="framerate">Frame Rate</label>
+          <select
+            v-model="frameRate"
+            class="bg-transparent text-current border border-main rounded px-2 py-1"
+            name="framerate"
+          >
+            <option v-for="rate in frameRateOptions" :key="rate" :value="rate">
+              {{ rate }} fps
+            </option>
+          </select>
+        </div>
+
+        <div class="form-text">
+          <label for="resolution">Resolution</label>
+          <select
+            v-model="resolution"
+            class="bg-transparent text-current border border-main rounded px-2 py-1"
+            name="resolution"
+          >
+            <option v-for="res in resolutionOptions" :key="res.value" :value="res.value">
+              {{ res.label }}
+            </option>
+          </select>
+        </div>
+
+        <div class="form-text">
+          <label for="bitrate">Bitrate</label>
+          <div class="relative">
+            <input
+              v-model.number="bitRate"
+              type="number"
+              min="1000"
+              step="1000"
+              class="bg-transparent text-current border border-main rounded px-2 py-1 w-full pr-12"
+              name="bitrate"
+            >
+            <span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-sm opacity-50">kbps</span>
+          </div>
+        </div>
+
         <div class="form-check">
           <input
             v-model="recordCamera"

packages/client/logic/recording.ts

@@ -12,6 +12,9 @@ type MimeType = Defined<RecorderOptions['mimeType']>
 export const recordingName = ref('')
 export const recordCamera = ref(true)
 export const mimeType = useLocalStorage<MimeType>('slidev-record-mimetype', 'video/webm')
+export const frameRate = useLocalStorage<number>('slidev-record-framerate', 30)
+export const bitRate = useLocalStorage<number>('slidev-record-bitrate', 8192)
+export const resolution = useLocalStorage<string>('slidev-record-resolution', '1920x1080')
 
 export const mimeExtMap: Record<string, string> = {
   'video/webm': 'webm',
@@ -78,7 +81,6 @@ export function useRecording() {
 
   const config: RecorderOptions = {
     type: 'video',
-    bitsPerSecond: 4 * 256 * 8 * 1024,
     // Extending recording limit as default is only 1h (see https://github.com/muaz-khan/RecordRTC/issues/144)
     timeSlice: 24 * 60 * 60 * 1000,
   }
@@ -141,12 +143,13 @@ export function useRecording() {
     const { default: Recorder } = await import('recordrtc')
     await startCameraStream()
 
+    const [width, height] = resolution.value.split('x').map(Number)
     streamCapture.value = await navigator.mediaDevices.getDisplayMedia({
       video: {
         // aspectRatio: 1.6,
-        frameRate: 15,
-        width: 3840,
-        height: 2160,
+        frameRate: frameRate.value,
+        width,
+        height,
         // @ts-expect-error missing types
         cursor: 'motion',
         resizeMode: 'crop-and-scale',