使用Electron自制錄屏軟件

更新時間：2024年01月16日 10:29:05 作者：可樂雞翅kele

錄屏軟件對于我們來說都不陌生了,本文我們要做的事情是實現(xiàn)自己的錄屏軟件,載體使用Electron,因為它更適合錄制桌面的場景,下面我們就來看看具體實現(xiàn)方法吧

前言

錄屏軟件對于我們來說都不陌生了，今天我們要做的事情是實現(xiàn)自己的錄屏軟件。載體使用Electron，因為它更適合錄制桌面的場景。我們今天實現(xiàn)的錄屏軟件會包括下面的功能

分辨率調節(jié)
幀率調節(jié)
支持保存為webm、mp4、gif格式

本文用到的技術包括：

electron
ffmpeg
vite
antd

下面話不多說，我們馬上進入實戰(zhàn)環(huán)節(jié)

環(huán)境搭建

我個人習慣的技術棧是React+Vite，所以這次搭建這個Electron腳手架的時候我也往這方面去搭建。搭建過程中發(fā)現(xiàn)了一個很好的腳手架工具——electron-vite。需要搭建Electron項目的兄弟們也可以考慮用這個。功能還是十分強大的，用起來十分舒服，很多東西都預設好了

直接下面的一條命令就可以搭建一個基礎框架：

npm create @quick-start/electron

搭建完框架之后，下面現(xiàn)在寫一下簡單的配置頁面，因為我們是配置錄制的各種參數(shù)的。配置頁面如下：

就是使用了antd下了幾個下拉框，還是比較簡單的。

這里寫的是渲染進程的代碼，所以我們寫在了renderer/src/App.jsx里。做Electron開發(fā)心里需要清楚，這種頁面相關的，就寫在渲染進程里，跟我們平時寫web頁面無異。

另外，我們的配置肯定是要持久化存儲的，所以我會把這些配置存儲在localStorage里。

  useEffect(() => {
  //清晰度
    setLocal(DEFINITION, definition)
  }, [definition])
  useEffect(() => {
  // 幀率
    setLocal(FRAME_RATE, frameRate)
  }, [frameRate])
  useEffect(() => {
  // 產物拓展名
    setLocal(EXT, ext)
  }, [ext])

以下是三個下拉框的選項配置，可以稍微看一下，后續(xù)會作為參數(shù)使用到錄屏功能中

const DEFINITION_LIST = [
  { label: '超清', value: '3840x2160' },
  { label: '高清', value: '1280x720' },
  { label: '標清', value: '720x480' }
]

const FRAME_RATE_LIST = [
  { label: '高', value: '60' },
  { label: '中', value: '30' },
  { label: '低', value: '15' }
]

const EXT_LIST = [
  { label: 'webm', value: 'webm' },
  { label: 'mp4', value: 'mp4' },
  { label: 'gif', value: 'gif' }
]

IPC通信

在Electron中，包括渲染進程跟主進程。渲染進程就是我們寫的頁面，主進程就是跟Electron窗體相關的，或者是需要調用一些node模塊的邏輯。在主進程跟渲染進程是需要相互通信的，這里的通信方式就是IPC。

下面介紹兩個例子，幫助理解這兩個進程如何通信

渲染進程發(fā)，主進程收

下面需要在主進程中實現(xiàn)錄屏的功能，所以我們頁面的配置需要發(fā)送到主進程。那么就可以通過這種方式發(fā)送到主進程中。

//渲染進程發(fā)送
  useEffect(() => {
    const options = {
      definition,
      frameRate,
      ext
    }
    window.electron.ipcRenderer.send(RECORD_EVNET.SET_CONFIG, options)
  }, [definition, frameRate, ext])

而主進程則可以通過下面的方式來接收

import {
  ipcMain
} from 'electron'
let config = {}
ipcMain.on(RECORD_EVNET.SET_CONFIG, (e, data) => {
    config = data
})

主進程發(fā)，渲染進程收

下面介紹另外一種，主進程發(fā)送給渲染進程

//主進程發(fā)送
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    // frame: false,
    // autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false
    }
  })
mainWindow.webContents.send('event-name', { name:'jayliang' })

渲染進程接收

window.electron.ipcRenderer.on('event-name', callback)

系統(tǒng)托盤

下面要實現(xiàn)的是系統(tǒng)托盤的功能，方便我們在各個窗口的時候也能快速喚起錄屏以及停止錄屏。

具體代碼實現(xiàn)如下

import {
  Menu,
  Tray,
  nativeImage,
} from 'electron'


let trayIcon = nativeImage.createFromPath(icon)
// 設置圖標大小
trayIcon = trayIcon.resize({ width: 16, height: 16 })

const tray = new Tray(trayIcon)

const contextMenu = Menu.buildFromTemplate([
{
  label: '開始',
  type: 'normal',
  click: startRecording
},
{
  label: '停止',
  type: 'normal',
  click: stopRecording
},
{ type: 'separator' },
{ label: '退出', type: 'normal', role: 'quit' }
])

tray.setToolTip('你的應用名稱')
tray.setContextMenu(contextMenu)

可拖拽窗體

這個功能跟錄屏軟件無關，覺得這是一個很有意思的功能，就把它實現(xiàn)了哈哈哈。實現(xiàn)的方法也很簡單，具體代碼如下

  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.executeJavaScript(`
      document.addEventListener('mousedown', (e) => {
        if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
          window.isDragging = true;
          offset = { x: e.screenX - window.screenX, y: e.screenY - window.screenY };
        }
      });

      document.addEventListener('mousemove', (e) => {
        if (window.isDragging) {
          const { screenX, screenY } = e;
          window.moveTo(screenX - offset.x, screenY - offset.y);
        }
      });

      document.addEventListener('mouseup', () => {
        window.isDragging = false;
      });
    `)
  })

上面是在主進程中監(jiān)聽渲染進程的加載完成事件，往渲染進程中注入了一段javascript代碼。這段js代碼主要做的事情也是監(jiān)聽鼠標事件，然后調用moveTo方法來移動整個窗體。

實現(xiàn)錄制

好的，前面啰嗦了那么多。終于到實現(xiàn)真正的錄制功能的時候了。先安裝一下ffmpeg，這里使用的是ffmpeg-static這個庫，安裝這個庫的時候它會識別你的操作系統(tǒng)，然后去安裝編譯好的ffmpeg二進制文件，最后導出的是一個ffmpeg的路徑。

它里面用的下載鏈接可能會超時，所以可以設置一個鏡像地址：

export FFMPEG_BINARIES_URL=https://cdn.npmmirror.com/binaries/ffmpeg-static

打包的命令記得改一下，為的是安裝不同操作系統(tǒng)的ffmpeg

"build:win": "rm -rf ./node_modules && npm run build && electron-builder --win --config",
"build:mac": "rm -rf ./node_modules && npm run build && electron-builder --mac --config",
"build:linux": "rm -rf ./node_modules && npm run build && electron-builder --linux --config"

安裝完之后就可以實現(xiàn)開始錄制以及停止錄制功能了，實現(xiàn)的代碼如下：

import ffmpegPath from 'ffmpeg-static'
  const startRecording = async () => {
    let ffmpegCommand
    const { ext, frameRate, definition } = config
    const fileName = `${app.getPath('downloads')}/${+new Date()}.${ext}`
    if (ext === 'webm') {
      ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -c:v libvpx-vp9 -c:a libopus ${fileName}`
    } else if (ext === 'mp4') {
      ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -vsync vfr -c:v libx264 -preset ultrafast -qp 0 -c:a aac ${fileName}`
    } else if (ext === 'gif') {
      ffmpegCommand = `${ffmpegPath} -f avfoundation -framerate ${frameRate} -video_size ${definition} -i "1" -vf "fps=15" -c:v gif ${fileName}`
    }
    ffmpegProcess = spawn(ffmpegCommand, { shell: true })
    ffmpegProcess.stderr.on('data', (data) => {
      console.error(`FFmpeg Error: ${data}`)
    })
    ffmpegProcess.on('exit', (code, signal) => {
      console.log(`Recording process exited with code $[code] and signal ${signal}`)
    })
  }

  const stopRecording = () => {
    if (ffmpegProcess) {
      ffmpegProcess.kill('SIGINT') // 發(fā)送中斷信號停止錄制
    }
  }

解釋一下上面的代碼，ext是拓展名、frameRate是幀率、definition是分辨率，這些都是從渲染進程中獲取的。

不同的錄制產物對應不同的ffmpeg命令，開始錄制時使用spawn開啟一個子進程去調用ffmpeg錄制，并保存子進程的飲用，在點擊托盤的停止按鈕時，向子進程發(fā)送停止命令。

這樣我們就可以愉快的錄制屏幕，并保存為我們想要的樣子啦

以上還是存在不足：avfoundation是用在mac的采集庫，在Windows下應該是用不了的，所以希望后續(xù)有時間也把windows版本給兼容了～

以上就是使用Electron自制錄屏軟件的詳細內容，更多關于Electron錄屏的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

javascript數(shù)組使用調用方法匯總
javascript數(shù)組使用調用方法匯總...
2007-12-12
JS實現(xiàn)的緩沖運動效果示例
這篇文章主要介紹了JS實現(xiàn)的緩沖運動效果,涉及JavaScript數(shù)值運算與時間函數(shù)相關使用技巧,需要的朋友可以參考下
2018-04-04
WebRTC媒體權限申請getUserMedia實例詳解
這篇文章主要為大家介紹了WebRTC媒體權限申請getUserMedia實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)
在項目開發(fā)中,有時候需要使用JavaScript驗證用戶輸入的是否為正整數(shù),這篇文章主要給大家介紹了關于JavaScript判斷輸入值是否為正整數(shù)(判斷變量為數(shù)字)的相關資料,需要的朋友可以參考下,
2023-11-11
Javascript 中的 && 和 || 使用小結
Javascript 中的 && 和 || ，有時候用作條件判斷，非常的簡潔，不熟悉的朋友可能不太了解，這里最后有個朋友補充，非常的好。
2010-04-04
在Uniapp中獲取用戶地理位置的實現(xiàn)方法
本文詳細介紹了如何在Uniapp中獲取用戶的地理位置,包括申請高德地圖的Key、配置定位功能以及實現(xiàn)定位功能的代碼示例,感興趣的小伙伴跟著小編一起來看看吧
2025-02-02
JavaScript創(chuàng)建對象的幾種方式小結
這篇文章主要介紹了 JavaScript 中創(chuàng)建對象的多種方式,包括字面量方式、構造函數(shù)方式、原型模式、() 方法、ES6 類,并分別說明了它們的特點和適用場景,強調在實際編程中要根據需求選擇合適的方式以提高代碼質量和性能,需要的朋友可以參考下
2024-12-12
javascript使用call調用微信API
這篇文章主要介紹了javascript使用call調用微信API,需要的朋友可以參考下
2014-12-12
跨域解決之JSONP和CORS的詳細介紹
跨域常見的兩種方式，分別是jsonp和cors，這篇文章主要介紹了跨域解決之JSONP和CORS的詳細介紹，非常具有實用價值，需要的朋友可以參考下
2018-11-11
詳解如何替換項目中的if-else和switch
這篇文章主要為大家介紹了詳解如何替換項目中的if-else和switch，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11