ElectronJS 捕获屏幕质量低

2024-05-08

我正在使用 ElectronJS 测试屏幕捕获。我可以捕获屏幕,但捕获的视频质量低于原始视频。

  • 操作系统:Linux Mint 20
  • 电子版本:11.1.0

这是我的代码。我选择我的屏幕,然后使用以下命令在电子应用程序中显示捕获的屏幕video元素。这里的一些代码是不相关的,我用注释行标记以使其清晰,但粘贴了整个代码,以防您想自己尝试一下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #vd {
      position: absolute;
      bottom: 300px;
    }
  </style>
</head>
<body style="background: white;">
  <video id="vd"></video>
  <button id="videoSelectBtn" class="button is-text">
    Choose a Video Source
  </button>
  <footer>
    <script>
      const { desktopCapturer, remote } = require('electron');
      const { Menu } = remote;

      // This part is not important. Just ignore the code here. It is not related with our problem. It just allows me to select my screen.

      const videoSelectBtn = document.getElementById('videoSelectBtn');
      videoSelectBtn.onclick = async () => {
        const inputSources = await desktopCapturer.getSources({
          types: ['screen']
        });

        const videoOptionsMenu = Menu.buildFromTemplate(
          inputSources.map(source => {
            return {
              label: source.name,
              click: () => selectSource(source)
            };
          })
        );

        videoOptionsMenu.popup();
      };

      // Important part starts here

      async function selectSource(source) {
        const stream = await navigator.mediaDevices
          .getUserMedia({
            audio: false,
            video: {
              mandatory: {
                chromeMediaSource: 'desktop',
                chromeMediaSourceId: source.id,
                minWidth: 1920,
                maxWidth: 1920,
                minHeight: 1080,
                maxHeight: 1080
              },
            }
          });

        const videoElement = document.getElementById('vd')

        videoElement.srcObject = stream;
        videoElement.play();
      }
    </script>
  </footer>
</body>
</html>

在这里您可以看到我的原始屏幕和捕获的视频之间的差异。如果您关注歌剧图标,差异会清晰可见。


过了很长一段时间,现在在GeForce上玩一些游戏时,我遇到了同样的问题。红色是模糊的。正如您在图像中注意到的,最大的区别在于歌剧图标也是红色的。在电子中,问题中的代码不直接用于屏幕截图。这是从视频捕获中获取屏幕截图的解决方法。所以它与数字图像压缩有关,并且很可能是无法修复的问题。

进一步阅读:https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/ https://obsproject.com/forum/threads/red-color-blurry-when-recording.64851/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElectronJS 捕获屏幕质量低 的相关文章

随机推荐

  • 如何在核心数据中应用group by子句

    我正在实现 tableview 我想在 tableview 部分显示类名 并且我正在尝试获取 使用核心数据实现的数据库中的类值 我想使用类名上的 group by 子句获取数据 这是我的代码 AppDelegate appDelegate
  • Android Studio同时为同一个项目构建两个应用程序

    我正在使用 Android Studio v0 5 9 制作一个应用程序 它有一个图书馆项目作为依赖 但是 每次我运行该项目时 都会将两个具有相同名称和图标的 APK 部署到我的设备上 第一个 apk app 包含我的主模块 而第二个是库项
  • 如何将多个请求传输到 Firebase 以同时从多个节点获取数据

    我需要从 Firebase 数据库中的 4 个节点检索数据 根据设计 在 firebase 中 这只能通过触发 4 个查询来完成 就我而言 这 4 个查询是独立的 因为我已经知道每个查询的路径 我可以同时触发它们 我从 Frank van
  • 有没有办法在 Spring Boot 应用程序配置中使用 Spring Cloud {cipher} ?

    我有一个使用 Spring Cloud Config 的 Spring Boot 应用程序 但我想在 Spring Boot 应用程序 bootstrap yml 文件中加密 Spring Cloud Config 密码 有没有办法做到这一
  • smoothScrollToPosition() 在 Android ICS 中只能滚动到一半?

    在 Gingerbread 中 我使用 smoothScrollToPosition 一次滚动数十个项目没有任何问题 在我的 Nexus S 升级到 Ice Cream Sandwich 后 我注意到无论我在 smoothScrollToP
  • 在源代码和预编译二进制文件之间切换

    我们的应用程序中有大量的库 库是用 C 或 C 编写的 平台 net Framework Windows 64 位 将所有内容编译为源代码需要花费大量时间 我们正在考虑切换到预构建的二进制文件 但我们仍然希望保留返回源代码的可能性 作为版本
  • 枚举nodejs中的系统驱动器

    有没有办法检索计算机上所有逻辑驱动器的驱动器名称 我查看了 fs api 但从那里我只能枚举给定目录的文件和目录 我不确定 驱动器名称 是什么意思 如果您的意思是以下形式的驱动器 PhysicalDriveN 我遇到了同样的问题并实现了这个
  • 在 asp.net MVC 控制器中调用异步外部 Web 服务

    在 Asp net MVC 控制器 GET 方法 中 我调用外部 Web 服务 用于 IP 地理定位 返回 IP 位置的 json 数据 如何使调用异步 以便堆栈可以在等待服务响应时继续 当 GEO IP 请求完成后 我希望能够更新数据库
  • Gradle 找不到 Android Compose 编译器

    我对这个问题感到非常困惑 我的 gradle 文件中有以下几行 implementation androidx compose runtime runtime 1 0 0 alpha04 implementation androidx co
  • 应用程序因使用私有 API“commentText”而被拒绝

    我的应用程序更新刚刚被拒绝 并显示以下消息 您的应用程序使用或引用以下非公共 API 评论文本 我搜索了 StackOverflow 以了解如何使用 nm 和 otool 来检查我的库中的私有 API 但我无法让它工作 另外 我有一种轻微的
  • TortoiseSVN 不允许我添加任何文件

    我正在尝试使用 TortoiseSVN 1 8 1 将文件添加到 SVN 存储库 我右键单击这些文件并选择 TortoiseSVN gt Add 然后 我选择弹出窗口中的所有文件 然后单击 确定 单击 确定 后 会弹出另一个对话框 所有文件
  • vega-lite:单个图表中的多个标记

    我目前正在评估应该使用哪种类型的 js 图表引擎来制作开箱即用的图表 而 vega lite 因其非常简单和灵活而脱颖而出 但是 我想知道是否可以在单个图表中包含多种类型的标记 例如 我可能有一个很长的每月时间序列 我可能会考虑使用具有逐月
  • Rails 3 UJS 干客户端 + 服务器端表单验证

    使用 jQuery 进行表单验证就像向字段添加类名一样简单 使用 Rails 进行表单验证就像将条件放入控制器 和 或模型 中一样简单 我认为应该有一种方法可以编写一次验证并将它们应用到客户端和服务器端 我一直热衷于编写自己的 javasc
  • 从 Asp.Net Core 控制器返回 IAsyncEnumerable 和 NotFound

    返回一个控制器操作的正确签名是什么IAsyncEnumerable
  • AngularJS + Laravel 5 身份验证

    在使用 AngularJS 构建 SPA 时 我想在 AngularJS 网站中实现用户身份验证 但是 我不知道从哪里开始以及最佳实践是什么 基本上我有一个确定可以担任一个或多个角色 我寻找了一些例子 这样我就可以对如何正确处理这个问题有一
  • 为什么我在 tsx 文件中不断收到 The class method 'componentDidMount' Must be makred Either 'private' 'public' or 'protected' 警告?

    我不确定应该在反应类组件中标记我的方法 我在这些方法上收到此错误 componentDidMount componentDidUpdate componentWillUpdate 和 render 这是我拥有的一个基本组件 import a
  • 完成后未删除时如何重用 CABasicAnimation?

    很多人都在谈论在使用 CABasicAnimation 对象后保留它 所以通过设置 完成时删除 否 当动画完成时 动画对象保持附加到图层 在不创建新的 CABasicAnimation 的情况下 如何重新启动该动画 保留这个物体有什么意义呢
  • tomcat 7 + ssl 不工作 - ERR_SSL_VERSION_OR_CIPHER_MISMATCH

    Ubuntu 14 tomcat 7 java 7 our crt our key 和 gd bundle g2 g1 crt 由 godaddy 提供 该捆绑包中有 3 个证书 通过查看文件可以看出 请注意 我们的密钥和 crt 在 no
  • Xcode:一步完成清理和构建

    在 Xcode 中 您可以从 产品 菜单执行 清理 您还可以进行构建 也可以从产品菜单中进行 但是 你能将两者结合起来吗 即是否可以一步完成 清理 然后 构建 None
  • ElectronJS 捕获屏幕质量低

    我正在使用 ElectronJS 测试屏幕捕获 我可以捕获屏幕 但捕获的视频质量低于原始视频 操作系统 Linux Mint 20 电子版本 11 1 0 这是我的代码 我选择我的屏幕 然后使用以下命令在电子应用程序中显示捕获的屏幕vide