fix: 录屏截图 bug

packages/desktop/electron/main/constant.ts

@@ -20,6 +20,7 @@ export const DIST = path.join(DIST_ELECTRON, '../dist');
 export const PUBLIC = url ? path.join(DIST_ELECTRON, '../public') : process.env.DIST;
 
 export const ICON = path.join(PUBLIC, './imgs/icons/png/32x32.png');
+export const ICONx2 = path.join(PUBLIC, './imgs/icons/png/64x64.png');
 
 export const DOCS_PATH = path.join(homedir(), 'Documents');
 
@@ -125,7 +126,7 @@ export const WIN_CONFIG = {
     fullscreenable: false, // 窗口是否可以进入全屏状态
     alwaysOnTop: true, // 窗口是否永远在别的窗口的上面
     skipTaskbar: true,
-    // resizable: false,
+    resizable: false,
   },
   recorderVideo: {
     html: path.join(process.env.DIST, 'recorderVideo.html'),

packages/desktop/electron/main/index.ts

@@ -11,6 +11,7 @@ import { protocolHandle, registerSchemesAsPrivileged } from './protocol';
 import { initTray } from './tray';
 import { update } from './update';
 import { initApp } from './app';
+import { initNotification } from './notification';
 
 initConfig();
 initApp();
@@ -58,6 +59,7 @@ app.whenReady().then(() => {
   protocolHandle();
   createWindow();
   initTray(config.language);
+  initNotification();
   update();
 });
 

packages/desktop/electron/main/notification.ts

@@ -1,7 +1,14 @@
 import { Notification } from 'electron';
-import { ICON } from './constant';
+import { ICONx2 } from './constant';
 
-export function showNotification(_options) {
-  const options = { icon: ICON, ..._options };
-  new Notification(options).show();
+let notification = null;
+
+export function showNotification(options) {
+  notification.title = options.title;
+  notification.body = options.body;
+  notification.show();
+}
+
+export function initNotification() {
+  notification = new Notification({ icon: ICONx2 });
 }

packages/desktop/electron/win/recorderScreenWin.ts

@@ -28,12 +28,14 @@ function createRecorderScreenWin(search?: any): BrowserWindow {
     fullscreenable: WIN_CONFIG.recorderScreen.fullscreenable, // 窗口是否可以进入全屏状态
     alwaysOnTop: WIN_CONFIG.recorderScreen.alwaysOnTop, // 窗口是否永远在别的窗口的上面
     // skipTaskbar: WIN_CONFIG.recorderScreen.skipTaskbar,
-    // resizable: WIN_CONFIG.recorderScreen.resizable,
+    resizable: WIN_CONFIG.recorderScreen.resizable,
     webPreferences: {
       preload,
     },
   });
+
   // recorderScreenWin.webContents.openDevTools();
+
   if (url) {
     recorderScreenWin.loadURL(WEB_URL + `recorderScreen.html?type=${search?.type || ''}`);
   } else {

packages/web/src/components/recorderScreen/Camera.tsx

@@ -0,0 +1,21 @@
+import React, { useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CameraOne } from '@icon-park/react';
+
+const Camera = (props) => {
+  const { t } = useTranslation();
+
+  function handleCamera() {
+    if (window.electronAPI) {
+      window.electronAPI?.sendPvOpenWin();
+    }
+  }
+
+  return (
+    <div className={`toolbarIcon camera`} title={t('recorderScreen.camera')} onClick={handleCamera}>
+      <CameraOne className="icon" size={28} />
+    </div>
+  );
+};
+
+export default Camera;

packages/web/src/components/recorderScreen/FullScreen.tsx

@@ -6,10 +6,12 @@ const FullScreen = (props) => {
   const { t } = useTranslation();
 
   function handleFullRecordScreen() {
-    window.electronAPI?.sendRsCloseWin();
-    window.electronAPI
-      ? window.electronAPI.sendRfsOpenWin()
-      : window.open('/recorderFullScreen.html');
+    if (!props.isRecording) {
+      window.electronAPI?.sendRsCloseWin();
+      window.electronAPI
+        ? window.electronAPI.sendRfsOpenWin()
+        : window.open('/recorderFullScreen.html');
+    }
   }
 
   return (

packages/web/src/components/recorderScreen/MicMuteRecorder.tsx

@@ -7,7 +7,9 @@ const MuteRecorder = (props) => {
   const [isMute, setIsMute] = useState(false); // 标记是否静音
 
   function handleToggleMute() {
-    isMute ? unmuteRecording() : muteRecording();
+    if (!props.isRecording) {
+      isMute ? unmuteRecording() : muteRecording();
+    }
   }
 
   // 静音录制

packages/web/src/components/recorderScreen/ScreenRecorder.tsx

@@ -1,4 +1,4 @@
-import { CameraOutlined, ExclamationCircleFilled, DesktopOutlined } from '@ant-design/icons';
+import { ExclamationCircleFilled } from '@ant-design/icons';
 import Timer from '@pear-rec/timer';
 import useTimer from '@pear-rec/timer/src/useTimer';
 import { mp4StreamToOPFSFile } from '@webav/av-cliper';
@@ -16,6 +16,7 @@ import MicMuteRecorder from './MicMuteRecorder';
 import SoundMuteRecorder from './SoundMuteRecorder';
 import FullScreen from './FullScreen';
 import ShotScreen from './ShotScreen';
+import Camera from './Camera';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { fetchFile, toBlobURL } from '@ffmpeg/util';
 
@@ -188,15 +189,40 @@ const ScreenRecorder = (props) => {
     mediaRecorder.current = new AVRecorder(recodeMS, { width: size.width, height: size.height });
   }
 
-  function handleShotScreen() {
-    const { width, height } = props.size;
+  async function handleShotScreen() {
+    const { width, height } = window.isElectron
+      ? await window.electronAPI?.invokeRsGetBoundsClip()
+      : props.size;
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
     const context = canvas.getContext('2d');
     context.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
-    const url = canvas.toDataURL('image/png');
-    saveAs(url, `pear-rec_${+new Date()}.png`);
+    canvas.toBlob((blob) => {
+      saveImg(blob);
+    }, 'image/png');
+  }
+
+  async function saveImg(blob) {
+    try {
+      const fileName = `pear-rec_${+new Date()}.png`;
+      const record = {
+        fileName: fileName,
+        fileData: blob,
+        fileType: 'ss',
+        userId: user.id,
+        createdAt: new Date(),
+        createdBy: user.id,
+        updatedAt: new Date(),
+        updatedBy: user.id,
+      };
+      const recordId = await db.records.add(record);
+      if (recordId) {
+        window.electronAPI?.sendNotification({ title: '截图成功', body: '可以在历史中查看' });
+      }
+    } catch (err) {
+      console.log('截图保存失败', err);
+    }
   }
 
   // 开始录制
@@ -316,7 +342,7 @@ const ScreenRecorder = (props) => {
     <div className="screenRecorder">
       <video ref={videoRef} className="hide" playsInline autoPlay />
       <div>
-        <div className={`toolbarIcon recordBtn ${isRecording ? 'blink' : ''}`}>
+        <div className={`recordBtn ${isRecording ? 'blink' : ''}`}>
           <BsRecordCircle />
         </div>
         <div>录制</div>
@@ -330,8 +356,9 @@ const ScreenRecorder = (props) => {
           className="timer"
         />
         <div className="tool">
+          <Camera />
           <FullScreen isRecording={isRecording} />
-          <ShotScreen onShotScreen={handleShotScreen} />
+          <ShotScreen isRecording={isRecording} onShotScreen={handleShotScreen} />
           <MicMuteRecorder isRecording={isRecording} />
           <SoundMuteRecorder isRecording={isRecording} />
         </div>

packages/web/src/components/recorderScreen/ShotScreen.tsx

@@ -6,13 +6,12 @@ const ShotScreen = (props) => {
   const { t } = useTranslation();
 
   function handleShotScreen() {
-    props.onShotScreen();
-    console.log('截图');
+    props.isRecording && props.onShotScreen();
   }
 
   return (
     <div
-      className="toolbarIcon shotScreenBtn"
+      className={`${props.isRecording ? '' : 'disabled'} toolbarIcon shotScreenBtn`}
       title={t('recorderScreen.shotScreen')}
       onClick={handleShotScreen}
     >

packages/web/src/components/recorderScreen/SoundMuteRecorder.tsx

@@ -7,7 +7,9 @@ const SoundMuteRecorder = (props) => {
   const [isMute, setIsMute] = useState(false); // 标记是否静音
 
   function handleToggleMute() {
-    isMute ? unmuteRecording() : muteRecording();
+    if (!props.isRecording) {
+      isMute ? unmuteRecording() : muteRecording();
+    }
   }
 
   // 静音录制

packages/web/src/pages/index.scss

@@ -148,7 +148,8 @@ table {
 
 .disabled {
   opacity: 0.5;
-  cursor: not-allowed;
+  // pointer-events: none !important;
+  cursor: not-allowed !important;
 }
 
 #root {

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

@@ -267,13 +267,6 @@ const RecorderScreen = () => {
     <div className={styles.recorderFullScreen}>
       <div className={'recordTool ' + `${isRecording ? 'recording' : ''}`}>
         <BsRecordCircle className={'recordIcon ' + `${isRecording && !isPause ? 'blink' : ''}`} />
-        {/* <Button
-          type="text"
-          icon={<SettingOutlined />}
-          className="toolbarIcon settingBtn"
-          title={t('nav.setting')}
-          onClick={handleOpenSettingWin}
-        ></Button> */}
         <Button
           type="text"
           icon={<CameraOne theme="outline" size="22" fill="#333" strokeWidth={3} />}
@@ -288,13 +281,6 @@ const RecorderScreen = () => {
           title={t('nav.close')}
           onClick={handleCloseWin}
         ></Button>
-        {/* <Button
-          type="text"
-          icon={<CameraOutlined />}
-          className="toolbarIcon shotScreenBtn"
-          title={t('recorderScreen.shotScreen')}
-          onClick={handleShotScreen}
-        ></Button> */}
         <Timer
           seconds={timer.seconds}
           minutes={timer.minutes}

packages/web/src/pages/recorderScreen/index.module.scss

@@ -27,10 +27,8 @@
       z-index: 100;
       outline: 2px solid #ccc;
       display: flex;
-      // cursor: pointer;
       width: 100%;
       height: 100%;
-      // background-color: #ccc;
       align-items: center;
       justify-content: space-around;
       .info {
@@ -44,10 +42,27 @@
       }
       .toolbarIcon {
         font-size: 26px;
+        height: 35px;
+        display: flex;
+        width: 30px;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
+        .icon {
+          display: flex;
+          align-items: center;
+        }
+      }
+      .toolbarIcon:hover {
+        background-color: #ccc;
       }
       .recordBtn {
         font-size: 32px;
+        height: 35px;
+        display: flex;
+        width: 30px;
+        align-items: center;
+        justify-content: center;
       }
       .settingBtn {
         line-height: 15px;
@@ -61,8 +76,10 @@
       .playBtn {
         color: #1677ff;
         font-size: 40px;
+        width: 45px;
       }
       .stopBtn {
+        width: 45px;
         color: red;
       }
       .pauseBtn {
@@ -75,14 +92,8 @@
         background: transparent;
       }
       .playRecorder {
-        width: 55px;
+        width: 45px;
         text-align: center;
-        // line-height: 40px;
-        // display: flex;
-        .toolbarTitle {
-          // height: 30px;
-          // line-height: 35px;
-        }
       }
     }
     .iframeRef {