关于前端:🖥️Electron实现录屏软件二指定区域录制

公众号：【可乐前端】，期待关注交换，分享一些有意思的前端常识

在上一期咱们应用 Electron 实现了一个本人的录屏软件，评论区有小伙伴说如何反对区域录制。诚然区域录制也是一个非常常见的需要，所以明天咱们就来实现一下录屏软件的区域录制。

上一期的文章链接在这，感兴趣的敌人们能够返回观看：🔥Electron 打造你本人的录屏软件🔥

在开始区域录制之前，先优化一下之前的一些实现形式，以及从新定义一些概念。不便咱们更好地开始实现前面的逻辑。

在上一期中咱们定义了几种清晰度规范：

超清：3840x2160分辨率
高清：1280x720分辨率
标清：720x480分辨率

而后通过 ffmpeg 指定分辨率去录制不同品质的视频，但其实这样的实现是有一些问题的。试想一下你的录制硬件设施最高的分辨率都没达到超清的分辨率，那么设置超清的分辨率也是没有意义的。

所以录制的时候我会不指定分辨率，这样 ffmpeg 就会采纳最高分辨率来录制，录制实现之后再把视频转成指定的分辨率。这里的分辨率我也从新定义了一下，当初是以百分比来设置。

const DEFINITION_LIST = [{ label: '100%', value: '1'},
  {label: '75%', value: '0.75'},
  {label: '50%', value: '0.5'},
  {label: '25%', value: '0.25'}
]

录制命令就改成了上面的样子

const ffmpegCommand = `${ffmpegPath} -f avfoundation -r ${frameRate} -i "1" -c:v libx264 -preset ultrafast ${fileName}`

录制实现之后，再调用 ffmpeg 的视频格式转换性能，这个时候顺便把分辨率一起设置一下。录制实现后对应的子过程就会退出，此时监听子过程的退出事件，调用转码办法。

  ffmpegProcess.on('exit', (code, signal) => {console.log(`Recording process exited with code ${code} and signal ${signal}`)
    afterRecord()})

上面是 afterRecord 的局部实现，解释一下实现流程：

fileName是录制的默认 mp4 文件，output是咱们要输入的视频文件
依据抉择导出的视频格式，将 mp4 文件转成对应的格局
启动一个子过程，执行 ffmpeg 命令解决视频
视频解决实现后删除默认 mp4 文件，并关上保留视频的文件夹

    const output = `${FILE_PATH}/record-${moment().format('YYYYMMDDHHmmss')}.${ext}`
    if (ext === 'mp4') {command = `${ffmpegPath} -i ${fileName} -vf "scale=${scale}" -c:a copy ${output}`
    } else if (ext === 'webm') {command = `${ffmpegPath} -i ${fileName} -vf "scale=${scale}" -c:v libvpx -c:a libvorbis ${output}`
    } else if (ext === 'gif') {command = `${ffmpegPath} -i ${fileName} -vf "fps=15,scale=${scale}:flags=lanczos" -c:v gif ${output}`
    }
    let progress = spawn(command, { shell: true})
    progress.stderr.on('data', (data) => {console.log(`FFmpeg Convert Log: ${data}`)
    })
    progress.on('exit', (code, signal) => {console.log(`Recording process exited with code ${code} and signal ${signal}`)
      fs.unlinkSync(fileName)
      if (code == 0) {shell.openPath(FILE_PATH)
        progress = null
        ffmpegProcess = null
      }
    })

上面来实现区域的录制，首先咱们要实现一个能框住某个区域的窗口。这样咱们在录制的时候，视频的录制范畴就是区域的范畴。

我在托盘菜单这里加了一个选取区域的菜单，点击这个菜单的时候会关上一个新窗口，这个新窗口是能够挪动并且调整大小的。后续的屏幕录制就会以这个窗口的大小地位为基准录制。

实现逻辑并不简单，具体如下：

创立一个新窗口，frame为 false 示意无边框，transparent为 true 示意通明窗口
loadURL加载一个空的 html 页面
dragWindow办法实现整体窗口可拖动，具体在第一期实现过，这里就不再赘述
executeJavaScript给新窗口注入一些款式

let areaWindow
export const closeArea = () => {if (areaWindow) {areaWindow.close()
    areaWindow = null
  }
}

export const openRecordArea = () => {if (areaWindow) {closeArea()
    return
  }
  const newWindow = new BrowserWindow({
    width: 600,
    height: 600,
    frame: false,
    transparent: true,
    webPreferences: {
      preload: PRELOAD_URL,
      sandbox: false
    }
  })
  areaWindow = newWindow
  newWindow.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent('<html><body></body></html>')}`
  )
  newWindow.on('ready-to-show', () => {newWindow.show()
  })
  newWindow.on('close', () => {areaWindow = null})
  newWindow.webContents.on('did-finish-load', () => {dragWindow(newWindow)
    newWindow.webContents.executeJavaScript(`
    const customStyles = \`
      html, body {
        padding: 0;
        margin: 0;
        background: transparent;
        border-radius:4px;
      }
      body {border: 2px dashed #ccc;}
      #root {display: none}
    \`;

    const styleTag = document.createElement('style');
    styleTag.textContent = customStyles;
    document.head.appendChild(styleTag);
  `)
  })
}

开始录制之前要先介绍三个概念，物理像素、逻辑像素跟 DPI。

物理像素是显示屏上的理论光点或发光元素，是硬件层面上的概念，它们间接映射到显示设施的硬件组件。

逻辑像素是在软件层面上的概念，是应用程序和操作系统中用于形容图像和界面的根本单位。逻辑像素通常不间接映射到硬件上的物理像素，而是由操作系统和图形引擎解决，以适应不同的显示设施和分辨率。

DPI代表“每英寸点数”（Dots Per Inch），它是一种用来度量打印设施、扫描仪、显示器或数字图像设施分辨率的单位。DPI 示意在一英寸的空间内有多少个点或像素。

对于咱们的性能须要留神的就是，ffmpeg操作的像素都是物理像素，而咱们的录制区域获取到的值都是逻辑像素。比如说咱们通过以下的代码获取录制区域的地位大小信息：

const size = areaWindow.getSize()
const position = areaWindow.getPosition()
const [width, height] = size
const [left, top] = position

这里的高度、宽度、间隔等等都是逻辑像素。

咱们是应用 ffmpeg 的裁剪来录制指定区域，比如说上面的命令

ffmpeg -f avfoundation -r 30 -i "1" -vf "crop=800:600:100:100" output.mp4

-vf "crop=800:600:100:100" 的意思是裁剪视频，使其宽度为800，高度为600，并且从左上角坐标 (100, 100) 开始裁剪。

所以咱们在计算窗口大小，即视频的分辨率大小时，是须要将逻辑像素转换成物理像素的。物理像素 = 逻辑像素×DPI。所以咱们获取录制区域信息的时候，须要这样计算

let cropRect = {}
const size = areaWindow.getSize()
const position = areaWindow.getPosition()
const [width, height] = size
const [left, top] = position
const mainScreen = screen.getPrimaryDisplay()
const {scaleFactor} = mainScreen
cropRect = {
  width: width * scaleFactor,
  height: height * scaleFactor,
  left: left * scaleFactor,
  top: top * scaleFactor
}

接着就能够应用 crop 进行区域录制了

  const {frameRate} = config
  fileName = `${FILE_PATH}/${moment().format('YYYYMMDDHHmmss')}.mp4`
  const cropString = !isEmpty(cropRect)
    ? `-vf "crop=${cropRect.width}:${cropRect.height}:${cropRect.left}:${cropRect.top}"`
    : ''
  /** 对立先录制为 mp4，防止受硬件影响 */
  const ffmpegCommand = `${ffmpegPath} -f avfoundation -r ${frameRate} -i "1" ${cropString} -c:v libx264 -preset ultrafast ${fileName}`

这里再看一个问题，如果我的选区是 600*600，DPI 为2，那么录制进去的视频分辨率是多少呢？

没错，就是 1200*1200，那么再回到咱们下面的 清晰度 配置项，如果我的清晰度抉择了50%，那么其实最终的产物文件分辨率应该是600*600。所以在录制默认文件实现之后，还须要依据清晰度再去做一遍解决。

rate就是抉择的清晰度
physicalWidth、physicalHeight别离对应屏幕的物理宽度、物理高度
原始的分辨率应该就是physicalWidth * scaleFactor，这个时候乘以抉择的清晰度就是设置的分辨率（physicalWidth * scaleFactor * rate）
算一下裁剪的区域占原始区域多少，再乘一下这个比例，就是最终指定区域的视频分辨率。（留神 cropRect.width 咱们曾经乘过 DPI 了）

let command
let rate = Number(definition)
const mainScreen = screen.getPrimaryDisplay()
const {scaleFactor} = mainScreen
const {width: physicalWidth, height: physicalHeight} = mainScreen.size
let scale = [physicalWidth * scaleFactor * rate, physicalHeight * scaleFactor * rate]
if (!isEmpty(cropRect)) {const cropXRate = cropRect.width / (physicalWidth * scaleFactor)
  const cropYRate = cropRect.height / (physicalHeight * scaleFactor)
  scale = [scale[0] * cropXRate, scale[1] * cropYRate]
}

scale = `${Math.round(scale[0])}:${Math.round(scale[1])}`
command = `${ffmpegPath} -i ${fileName} -vf "scale=${scale}" -c:a copy ${output}`

以上就是本文介绍的指定区域录屏性能，如果你有一些不同的想法，欢送评论区交换。如果你感觉有所播种的话，点点关注点点赞吧～

🔥Electron 打造你本人的录屏软件🔥
🚀React+Node 全栈无死角解析，吃透文件上传的各个场景
🐲龙年大吉——AIGC 生成龙年春联🐲
🌟前端应用 Lottie 实现炫酷的开关成果🌟

关于前端:🖥️Electron实现录屏软件二指定区域录制

前言

前置优化

从新定义清晰度

视频格式转换

区域窗口

指定区域录制

最初

文章举荐