feat: 1. 实现录音录制系统声音 2. 删除服务端接口

package.json

@@ -1,14 +1,13 @@
 {
   "name": "pear-rec",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "description": " pear-rec is a cross platform software with screenshot, screen recording, audio recording and video recording.",
   "scripts": {
-    "start:desktop": "concurrently --names \"SERVER,WEB,DESKTOP\" -c \"red,blue,auto\" \"npm run dev:server\" \"wait-on tcp:0.0.0.0:9190 && npm run dev:web\" \"wait-on tcp:0.0.0.0:9191 && pnpm run dev:desktop\"",
+    "start:desktop": "concurrently --names \"WEB,DESKTOP\" -c \"red,blue\" \"npm run dev:web\" \"wait-on tcp:0.0.0.0:9191 && pnpm run dev:desktop\"",
     "dev:desktop": "pnpm run -C packages/desktop dev",
-    "build:desktop": "pnpm run -C packages/desktop build && pnpm run copy:web && pnpm run copy:server && pnpm run -C packages/desktop build:win",
+    "build:desktop": "pnpm run -C packages/desktop build && pnpm run copy:web && pnpm run -C packages/desktop build:win",
     "copy:web": "pnpm run -C packages/web build && node tools/copy-files-web2desktop.js",
     "copy:server": "pnpm run -C packages/server build && node tools/copy-files-server2desktop.js",
-    "start:web": "concurrently --names \"SERVER,WEB\" -c \"red,auto\" \"npm run dev:server\" \"wait-on tcp:0.0.0.0:9190 && npm run dev:web\"",
     "dev:web": "pnpm run -C packages/web dev",
     "build:web": "concurrently -s \"pnpm run -C packages/server dev\" \"pnpm run project:web\"",
     "only-build:web": "pnpm run -C packages/web build",

packages/web/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @pear-rec/web
 
+## 1.4.4
+
+feat:
+
+1. 实现录音录制系统声音
+2. 删除服务端接口
+
 ## 1.4.3
 
 fix: 本地文件查看 bug

packages/web/src/components/editGif/tool/File.tsx

@@ -5,15 +5,13 @@ import { saveAs } from 'file-saver';
 import GIF from 'gif.js';
 import { useContext, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useApi } from '../../../api';
 import { GifContext } from '../../../components/context/GifContext';
 import { db } from '../../../db';
 import { UserContext } from '../../context/UserContext';
 import styles from './file.module.scss';
 
 const File = () => {
   const { t } = useTranslation();
-  const api = useApi();
   const fileRef = useRef(null);
   const videoRef = useRef(null);
   const [percent, setPercent] = useState(0);

packages/web/src/components/editGif/tool/Frame.tsx

@@ -37,12 +37,13 @@ const Frame = (props) => {
       fileData: file,
       fileType: 'cg',
       userId: user.id,
+      frameDuration: 100,
       createdAt: new Date(),
       createdBy: user.id,
       updatedAt: new Date(),
       updatedBy: user.id,
     };
-    const cacheId = await db.caches.add(cache);
+    await db.caches.add(cache);
     return cache.fileData;
   }
 

packages/web/src/components/recorderAudio/AudioRecorder.tsx

@@ -30,24 +30,7 @@ const AudioRecorder = (props) => {
 
     const record = wavesurfer.registerPlugin(RecordPlugin.create({ mimeType }) as any);
 
-    record.getEnumerateDevices().then((deviceInfos) => {
-      let _audioInputOptions = [
-        {
-          value: '',
-          label: '全部',
-        },
-      ];
-      for (let i = 0; i < deviceInfos.length; i++) {
-        const deviceInfo = deviceInfos[i];
-        if (deviceInfo.kind == 'audioinput') {
-          _audioInputOptions.push({
-            value: deviceInfo.deviceId,
-            label: deviceInfo.label || `microphone ${_audioInputOptions.length + 1}`,
-          });
-        }
-      }
-      audioInputOptions.current = _audioInputOptions;
-    });
+    getEnumerateDevices(record);
 
     const mimeTypes = record.getSupportedMimeTypes();
     let _mimeTypesOptions = [];
@@ -98,6 +81,38 @@ const AudioRecorder = (props) => {
     setRecord(record);
   }, [micRef]);
 
+  function getEnumerateDevices(record) {
+    record.getEnumerateDevices().then((deviceInfos) => {
+      if (deviceInfos.length <= 2) {
+        navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+          location.reload();
+        });
+        return;
+      }
+      let _audioInputOptions = [
+        {
+          value: '',
+          label: '麦克风',
+        },
+        {
+          value: 'desktop',
+          label: '系统',
+        },
+      ];
+      for (let i = 0; i < deviceInfos.length; i++) {
+        const deviceInfo = deviceInfos[i];
+        if (deviceInfo.kind == 'audioinput') {
+          deviceInfo.deviceId &&
+            _audioInputOptions.push({
+              value: deviceInfo.deviceId,
+              label: deviceInfo.label || `microphone ${_audioInputOptions.length + 1}`,
+            });
+        }
+      }
+      audioInputOptions.current = _audioInputOptions;
+    });
+  }
+
   function startRecord() {
     record.startRecording(deviceId);
   }
@@ -148,6 +163,7 @@ const AudioRecorder = (props) => {
 
   function handleChangeSource(value) {
     setDeviceId(value);
+    record.stopMic();
     isOpenMic && record.startMic(value);
   }
 
@@ -158,15 +174,15 @@ const AudioRecorder = (props) => {
   return (
     <Card title="设置">
       <Space>
-        麦克风
-        <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={changeMic} />
         音源
         <Select
           defaultValue=""
           style={{ width: 120 }}
           onChange={handleChangeSource}
           options={audioInputOptions.current}
         />
+        开关
+        <Switch checkedChildren="开启" unCheckedChildren="关闭" onChange={changeMic} />
         格式
         <Select
           defaultValue="audio/webm"

packages/web/src/components/recorderAudio/plugins/record.ts

@@ -78,8 +78,22 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
   public async startMic(deviceId?: string): Promise<MediaStream> {
     let stream: MediaStream;
     try {
-      const constraints = { audio: deviceId ? { deviceId: { exact: deviceId } } : true };
-      stream = await navigator.mediaDevices.getUserMedia(constraints);
+      const constraints =
+        deviceId == 'desktop'
+          ? {
+              audio: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                },
+              },
+              video: {
+                mandatory: {
+                  chromeMediaSource: 'desktop',
+                },
+              },
+            }
+          : { audio: deviceId ? { deviceId: { exact: deviceId } } : true };
+      stream = await navigator.mediaDevices.getUserMedia(constraints as any);
     } catch (err) {
       throw new Error('Error accessing the microphone: ' + (err as Error).message);
     }
@@ -102,14 +116,12 @@ class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
 
   /** Start recording audio from the microphone */
   public async startRecording(deviceId?: string) {
-    const stream = this.stream || (await this.startMic(deviceId));
-
-    const mediaRecorder =
-      this.mediaRecorder ||
-      new MediaRecorder(stream, {
-        mimeType: this.options.mimeType || findSupportedMimeType(),
-        audioBitsPerSecond: this.options.audioBitsPerSecond,
-      });
+    const stream = deviceId ? await this.startMic(deviceId) : this.stream;
+    const [audioTrack] = stream.getAudioTracks();
+    const mediaRecorder = new MediaRecorder(new MediaStream([audioTrack]), {
+      mimeType: this.options.mimeType || findSupportedMimeType(),
+      audioBitsPerSecond: this.options.audioBitsPerSecond,
+    });
     this.mediaRecorder = mediaRecorder;
     this.stopRecording();
 

packages/web/src/pages/recorderFullScreen/index.tsx

@@ -7,14 +7,12 @@ import { Button, message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BsFillStopFill, BsPause, BsPlayFill, BsRecordCircle } from 'react-icons/bs';
-import { useApi } from '../../api';
 import { db, defaultUser } from '../../db';
 import ininitApp from '../../pages/main';
 import styles from './index.module.scss';
 
 const RecorderScreen = () => {
   const { t } = useTranslation();
-  const api = useApi();
   const videoRef = useRef<HTMLVideoElement>();
   const mediaStream = useRef<MediaStream>();
   const micStream = useRef<MediaStream>(); // 声音流

packages/web/src/pages/recorderVideo/index.tsx

@@ -5,7 +5,6 @@ import { Button, Card, Divider, Flex, Modal, message } from 'antd';
 import { saveAs } from 'file-saver';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useApi } from '../../api';
 import { db, defaultUser } from '../../db';
 import initApp from '../main';
 
@@ -25,7 +24,6 @@ function initCvs(attchEl: HTMLDivElement | null) {
 
 export default function UI() {
   const { t } = useTranslation();
-  const api = useApi();
   const [user, setUser] = useState({} as any);
   const outputStream = useRef<any>();
   const [stateText, setStateText] = useState('');

packages/web/src/pages/viewAudio/index.tsx

@@ -1,13 +1,11 @@
 import APlayer from 'aplayer';
 import 'aplayer/dist/APlayer.min.css';
 import { useEffect, useRef, useState } from 'react';
-import { useApi } from '../../api';
 import { db } from '../../db';
 import ininitApp from '../../pages/main';
 import styles from './index.module.scss';
 
 const ViewAudio = () => {
-  const api = useApi();
   let refPlayer = useRef<any>();
   const [audio, setAudio] = useState<any>([]);