perf: 📸 Recording camera support

src/components/Device/components/ControlBar/Synergy/index.vue

@@ -58,8 +58,8 @@ export default {
     },
   },
   methods: {
-    scrcpyArgs(...args) {
+    scrcpyParams(...args) {
-      return this.$store.preference.getScrcpyArgs(...args)
+      return this.$store.preference.scrcpyParameter(...args)
     },
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
@@ -82,7 +82,7 @@ export default {
             `${this.$store.device.getLabel(
               this.device,
             )}-displayId-${displayId}`,
-          args: this.scrcpyArgs(this.device.id),
+          args: this.scrcpyParams(this.device.id),
         })
 
         res.forEach((item) => {

src/components/Device/components/MirrorAction/index.vue

@@ -37,7 +37,7 @@ export default {
 
       this.toggleRowExpansion(row, true)
 
-      const args = this.$store.preference.getScrcpyArgs(row.id, {
+      const args = this.$store.preference.scrcpyParameter(row.id, {
         excludes: ['--otg', '--mouse=aoa', '--keyboard=aoa'],
       })
 

src/components/Device/components/MoreDropdown/components/Camera/index.vue

@@ -29,7 +29,7 @@ export default {
 
       this.toggleRowExpansion(row, true)
 
-      const args = `--video-source=camera ${this.$store.preference.getScrcpyArgs(
+      const args = `--video-source=camera ${this.$store.preference.scrcpyParameter(
         row.id,
         {
           excludes: [

src/components/Device/components/MoreDropdown/components/Otg/index.vue

@@ -29,7 +29,7 @@ export default {
 
       this.toggleRowExpansion(row, true)
 
-      const args = `--otg ${this.$store.preference.getScrcpyArgs(row.id, {
+      const args = `--otg ${this.$store.preference.scrcpyParameter(row.id, {
         excludes: [
           '--mouse=uhid',
           '--keyboard=uhid',

src/components/Device/components/MoreDropdown/components/Record/index.vue

@@ -32,7 +32,7 @@ export default {
 
       const savePath = this.getRecordPath(row)
 
-      const args = this.$store.preference.getScrcpyArgs(row.id, {
+      const args = this.$store.preference.scrcpyParameter(row.id, {
         isRecord: true,
         excludes: ['--otg', '--mouse=aoa', '--keyboard=aoa'],
       })

src/components/Device/components/MoreDropdown/components/RecordCamera/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <slot :loading="loading" :trigger="handleClick" />
+</template>
+
+<script>
+import { sleep } from '$/utils'
+import { openFloatControl } from '$/utils/device/index.js'
+
+export default {
+  props: {
+    row: {
+      type: Object,
+      default: () => ({}),
+    },
+    toggleRowExpansion: {
+      type: Function,
+      default: () => () => false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+    }
+  },
+  methods: {
+    async handleClick() {
+      const row = this.row
+
+      this.loading = true
+
+      this.toggleRowExpansion(row, true)
+
+      const savePath = this.getRecordPath(row)
+
+      let args = this.$store.preference.scrcpyParameter(row.id, {
+        isRecord: true,
+        excludes: ['--otg', '--mouse=aoa', '--keyboard=aoa', '--video-source'],
+      })
+
+      args += ' --video-source=camera'
+
+      try {
+        const recording = this.$scrcpy.record(row.id, {
+          title: this.$store.device.getLabel(row, 'recording'),
+          savePath,
+          args,
+          stdout: this.onStdout,
+          stderr: this.onStderr,
+        })
+
+        await sleep(1 * 1000)
+
+        this.loading = false
+
+        openFloatControl(toRaw(this.row))
+
+        await recording
+
+        await this.handleSuccess(savePath)
+      }
+      catch (error) {
+        console.error('record.args', args)
+        console.error('record.error', error)
+
+        if (error.message) {
+          this.$message.warning(error.message)
+        }
+      }
+    },
+    onStdout() {},
+    onStderr() {},
+    getRecordPath(row) {
+      const config = this.$store.preference.getData(row.id)
+      const basePath = config.savePath
+      const extension = config['--record-format'] || 'mp4'
+
+      const fileName = this.$store.device.getLabel(
+        row,
+        ({ time }) => `record-${time}.${extension}`,
+      )
+
+      const joinValue = this.$path.join(basePath, fileName)
+      const value = this.$path.normalize(joinValue)
+
+      return value
+    },
+    async handleSuccess(savePath) {
+      return this.$message.success(
+        `${this.$t('device.record.success.title')}: ${savePath}`,
+      )
+    },
+  },
+}
+</script>
+
+<style></style>

src/components/Device/components/MoreDropdown/index.vue

@@ -38,16 +38,18 @@
 </template>
 
 <script>
-import Camera from './components/Camera/index.vue'
-import Custom from './components/Custom/index.vue'
-import Otg from './components/Otg/index.vue'
 import Record from './components/Record/index.vue'
+import Camera from './components/Camera/index.vue'
+import RecordCamera from './components/RecordCamera/index.vue'
+import Otg from './components/Otg/index.vue'
+import Custom from './components/Custom/index.vue'
 
 export default {
   components: {
     Record,
-    Otg,
     Camera,
+    RecordCamera,
+    Otg,
     Custom,
   },
   props: {
@@ -63,14 +65,18 @@ export default {
           label: 'device.actions.more.record.name',
           component: 'Record',
         },
-        {
-          label: 'device.actions.more.otg.name',
-          component: 'Otg',
-        },
         {
           label: 'device.actions.more.camera.name',
           component: 'Camera',
         },
+        {
+          label: 'device.actions.more.recordCamera.name',
+          component: 'RecordCamera',
+        },
+        {
+          label: 'device.actions.more.otg.name',
+          component: 'Otg',
+        },
         {
           label: 'device.actions.more.custom.name',
           component: 'Custom',

src/components/Preference/components/PreferenceForm/index.vue

@@ -160,7 +160,7 @@ function handleReset(type) {
 }
 
 async function generateCommand() {
-  const value = await preferenceStore.getScrcpyArgs(preferenceData.value, {
+  const value = await preferenceStore.scrcpyParameter(preferenceData.value, {
     isRecord: true,
     isCamera: true,
     isOtg: true,

src/components/Preference/index.vue

@@ -173,6 +173,7 @@ export default {
 
     handleSave() {
       this.preferenceStore.setData(this.preferenceData)
+
       this.$message({
         message: this.$t('preferences.config.save.placeholder'),
         type: 'success',

src/locales/languages/en-US.json

@@ -127,8 +127,9 @@
   "device.record.success.message": "Open record location?",
   "device.actions.more.name": "More Operation",
   "device.actions.more.record.name": "Start Recording",
-  "device.actions.more.otg.name": "Startup OTG",
   "device.actions.more.camera.name": "Startup Camera",
+  "device.actions.more.recordCamera.name": "Record Camera",
+  "device.actions.more.otg.name": "Startup OTG",
   "device.actions.more.custom.name": "Custom Startup",
 
   "device.control.name": "Control",

src/locales/languages/ru-RU.json

@@ -127,8 +127,9 @@
   "device.record.success.message": "Открыть место сохранения записи?",
   "device.actions.more.name": "Дополнительные действия",
   "device.actions.more.record.name": "Начать запись",
+  "device.actions.more.camera.name": "Запустить камеры",
+  "device.actions.more.recordCamera.name": "Запись камеры",
   "device.actions.more.otg.name": "Запустить OTG",
-  "device.actions.more.camera.name": "Запустить камеру",
   "device.actions.more.custom.name": "Пользовательский запуск",
 
   "device.control.name": "Управление",

src/locales/languages/zh-CN.json

@@ -127,8 +127,9 @@
   "device.record.success.message": "是否前往录制位置进行查看？",
   "device.actions.more.name": "更多操作",
   "device.actions.more.record.name": "开始录制",
+  "device.actions.more.camera.name": "启动相机",
+  "device.actions.more.recordCamera.name": "录制相机",
   "device.actions.more.otg.name": "启动OTG",
-  "device.actions.more.camera.name": "启动摄像",
   "device.actions.more.custom.name": "灵活启动",
 
   "device.control.name": "操作",

src/locales/languages/zh-TW.json

@@ -127,8 +127,9 @@
   "device.record.success.message": "是否前往錄製位置進行檢視？",
   "device.actions.more.name": "更多操作",
   "device.actions.more.record.name": "開始錄製",
-  "device.actions.more.otg.name": "啟動 OTG",
   "device.actions.more.camera.name": "啟動鏡頭",
+  "device.actions.more.recordCamera.name": "錄製鏡頭",
+  "device.actions.more.otg.name": "啟動 OTG",
   "device.actions.more.custom.name": "靈活啟動",
 
   "device.control.name": "操作",