Web 应用程序中的桌面屏幕截图

Question

Web 服务应用程序如何捕获用户视图(如桌面屏幕(的视频流，以在我的 Web 应用程序中使用(例如，它有一个运行 php 的后端和 JavaScript 客户端(。这是否可能，使用哪种方法可以实例化和流水线化此数据馈送？

Answer 1

这根本不可能，因为PHP是服务器端，与客户端桌面无关，绝对JavaScript在浏览器或electron环境中运行，它们都与OS环境分开，JavaScript代码在封闭环境中运行，因此是不可能的。

Answer 2

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

Answer 3

电子应用程序可以利用桌面捕获器API来截取屏幕的屏幕截图。

演示(带代码(可在Electron API demos应用程序中找到。您可以下载适用于您的操作系统的最新版本，也可以自行构建。

渲染器进程：

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
}
}