electron Web应用程序中的桌面屏幕捕获[已关闭]

j8ag8udp  于 2023-06-20  发布在  Electron
关注(0)|答案(3)|浏览(112)

**已关闭。**此问题正在寻求书籍、工具、软件库等的建议。它不符合Stack Overflow guidelines。目前不接受答复。

我们不允许问题寻求书籍,工具,软件库等的建议。您可以编辑问题,以便可以用事实和引用来回答。
4年前关闭。
这篇文章是编辑并提交审查7天前.
Improve this question
web服务应用程序如何捕获用户视图的视频流,例如桌面屏幕,以用于我的web应用程序(例如,它有一个运行php的后端和javascript客户端)。这可能吗?使用哪种方法可以示例化和管道化此数据馈送?

k4aesqcs

k4aesqcs1#

这是完全不可能的,因为PHP是服务器端,与客户端桌面无关,而且JavaScript绝对运行在浏览器或electron环境中,这两者都与OS环境分离,JavaScript代码运行在封闭的环境中,所以这是不可能的。

3df52oht

3df52oht2#

JavaScript可以完全访问文档对象模型,所以至少在理论上,它可以捕获自己网页上的内容(但不能捕获浏览器窗口之外的任何内容),并且有一个库可以做到这一点:http://html2canvas.hertzen.com/(我还没试过)

ffx8fchx

ffx8fchx3#

electron应用程序可以使用desktopCapturer API来获取屏幕截图。
Electron API Demos应用程序中提供了一个演示(带代码)。您可以为您的操作系统download the latest release或自己构建它。
渲染器进程:

const electron = require('electron')
const desktopCapturer = electron.desktopCapturer
const electronScreen = electron.screen
const shell = electron.shell

const fs = require('fs')
const os = require('os')
const path = require('path')

const screenshot = document.getElementById('screen-shot')
const screenshotMsg = document.getElementById('screenshot-path')

screenshot.addEventListener('click', function (event) {
  screenshotMsg.textContent = 'Gathering screens...'
  const thumbSize = determineScreenShotSize()
  let options = { types: ['screen'], thumbnailSize: thumbSize }

  desktopCapturer.getSources(options, function (error, sources) {
    if (error) return console.log(error)

    sources.forEach(function (source) {
      if (source.name === 'Entire screen' || source.name === 'Screen 1') {
        const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')

        fs.writeFile(screenshotPath, source.thumbnail.toPng(), function (error) {
          if (error) return console.log(error)
          shell.openExternal('file://' + screenshotPath)
          const message = `Saved screenshot to: ${screenshotPath}`
          screenshotMsg.textContent = message
        })
      }
    })
  })
})

function determineScreenShotSize () {
  const screenSize = electronScreen.getPrimaryDisplay().workAreaSize
  const maxDimension = Math.max(screenSize.width, screenSize.height)
  return {
    width: maxDimension * window.devicePixelRatio,
    height: maxDimension * window.devicePixelRatio
  }
}

相关问题