feat: 录制GIF

packages/server/src/util/upload.middleware.ts

@@ -30,6 +30,7 @@ export class UploadMiddleware implements MulterOptionsFactory {
             rs: 'webm',
             ra: 'webm',
             ei: 'png',
+            gif: 'gif',
           };
           const type = req.body.type;
           const fileType = fileTypeMap[type] || 'webm';

packages/web/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @pear-rec/web
 
+## 1.3.7
+
+feat: 录制GIF
+
 ## 1.3.6
 
 perf: 优化录制全屏

packages/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pear-rec/web",
   "private": true,
-  "version": "1.3.6",
+  "version": "1.3.7",
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist && tsc && vite build",
@@ -19,6 +19,7 @@
     "dayjs": "^1.11.7",
     "eventemitter3": "^5.0.1",
     "file-saver": "^2.0.5",
+    "gif.js": "^0.2.0",
     "i18next": "^23.4.6",
     "js-cookie": "^3.0.5",
     "plyr": "^3.7.8",
@@ -35,6 +36,7 @@
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",
+    "@types/gif.js": "^0.2.5",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react-swc": "^3.0.0",

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

@@ -25,6 +25,7 @@ const ScreenRecorder = (props) => {
   const audioStream = useRef<MediaStream>(); // 声音流
   const mediaRecorder = useRef<MediaRecorder>(); // 媒体录制器对象
   const recordedChunks = useRef<Blob[]>([]); // 存储录制的音频数据
+  const recordedUrl = useRef<string>(''); // 存储录制的音频数据
   const [isRecording, setIsRecording] = useState(false); // 标记是否正在录制
   const isSave = useRef<boolean>(false);
 
@@ -191,6 +192,7 @@ const ScreenRecorder = (props) => {
     if (recordedChunks.current.length > 0) {
       const blob = new Blob(recordedChunks.current, { type: 'video/webm' });
       const url = URL.createObjectURL(blob);
+      recordedUrl.current = url;
       isSave.current = false;
       console.log('录屏地址：', url);
       recordedChunks.current = [];
@@ -201,7 +203,6 @@ const ScreenRecorder = (props) => {
   async function saveFile(blob) {
     try {
       recordedChunks.current = [];
-
       const formData = new FormData();
       formData.append('type', 'rs');
       formData.append('userId', user.id);

packages/web/src/components/videoToGif/VideoToGifConverter.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import GIF from 'gif.js';
+import { Button, Modal, Progress } from 'antd';
+import { saveAs } from 'file-saver';
+import { useApi } from '../../api';
+
+export default function VideoToGifConverter({ videoSrc, user }) {
+  const { t } = useTranslation();
+  const api = useApi();
+  const gifRef = useRef(null);
+  const gifBlobRef = useRef(null);
+  const videoRef = useRef(null);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [percent, setPercent] = useState(0);
+
+  const handleConvertClick = async () => {
+    await videoRef.current.play();
+    convertToGif();
+  };
+
+  const handlePlayClick = async () => {
+    await videoRef.current.play();
+  };
+
+  useEffect(() => {
+    const handleLoadedMetadata = () => {
+      setIsLoaded(true);
+    };
+
+    videoRef.current.addEventListener('loadedmetadata', handleLoadedMetadata);
+
+    return () => {
+      videoRef.current.removeEventListener('loadedmetadata', handleLoadedMetadata);
+    };
+  }, []);
+
+  const convertToGif = async () => {
+    if (!isLoaded) {
+      return;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = videoRef.current.videoWidth;
+    canvas.height = videoRef.current.videoHeight;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const worker = new URL('./gif.js/gif.worker.js', import.meta.url) as any;
+    // const delay = 1000 / videoRef.current.playbackRate;
+    const delay = 100;
+
+    const gif = new GIF({
+      workers: 4,
+      quality: 10,
+      workerScript: worker,
+    });
+
+    gif.on('finished', (blob) => {
+      gifBlobRef.current = blob;
+      const gifUrl = URL.createObjectURL(blob);
+      gifRef.current.src = gifUrl;
+    });
+
+    gif.on('progress', (progress) => {
+      setPercent(Math.round(progress * 100));
+    });
+
+    gif.addFrame(canvas, { copy: true, delay: delay });
+
+    const renderFrame = () => {
+      context.drawImage(videoRef.current, 0, 0);
+      gif.addFrame(canvas, { copy: true, delay: delay });
+      if (videoRef.current.currentTime < videoRef.current.duration) {
+        setTimeout(renderFrame, delay);
+      } else {
+        gif.render();
+      }
+    };
+    setTimeout(renderFrame, delay);
+  };
+
+  async function handleSaveClick() {
+    const blob = gifBlobRef.current;
+    try {
+      const formData = new FormData();
+      formData.append('type', 'gif');
+      formData.append('userId', user.id);
+      formData.append('file', blob);
+      const res = (await api.saveFile(formData)) as any;
+      if (res.code == 0) {
+        if (window.isElectron) {
+          window.electronAPI?.sendEiCloseWin();
+          window.electronAPI?.sendViOpenWin({ imgUrl: res.data.filePath });
+        } else {
+          Modal.confirm({
+            title: '图片已保存，是否查看？',
+            content: `${res.data.filePath}`,
+            okText: t('modal.ok'),
+            cancelText: t('modal.cancel'),
+            onOk() {
+              window.open(`/viewImage.html?imgUrl=${res.data.filePath}`);
+              console.log('OK');
+            },
+            onCancel() {
+              console.log('Cancel');
+            },
+          });
+        }
+      }
+    } catch (err) {
+      saveAs(blob, `pear-rec_${+new Date()}.gif`);
+    }
+  }
+
+  return (
+    <div>
+      <video className="videoRef" ref={videoRef} src={videoSrc}></video>
+      <div className="tool">
+        <Progress percent={percent} />
+        <Button className="playBtn" onClick={handlePlayClick} type="primary" danger>
+          播放
+        </Button>
+        <Button className="convertBtn" onClick={handleConvertClick} type="primary">
+          保存
+        </Button>
+        <Button className="saveBtn" onClick={handleSaveClick}>
+          下载
+        </Button>
+      </div>
+      <img ref={gifRef} className="hide" alt="GIF" />
+    </div>
+  );
+}

packages/web/src/pages/videoToGif.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="icon" type="image/x-icon" href="/imgs/logo/favicon.ico" />
+  <title>pear-rec | GIF</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./videoToGif/index.tsx"></script>
+</body>
+
+</html>

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

@@ -0,0 +1,18 @@
+.videoToGif {
+  background: #fff;
+  max-width: 1000px;
+  :global {
+    .videoRef {
+      width: 100%;
+    }
+    .tool {
+      text-align: center;
+      .playBtn {
+        margin-right: 10px;
+      }
+      .convertBtn {
+        margin-right: 10px;
+      }
+    }
+  }
+}