js-screen-shot 项目常见问题解决方案
js-screen-shot web端自定义截图插件(原生JS版) 项目地址: https://gitcode.com/gh_mirrors/js/js-screen-shot
项目基础介绍
js-screen-shot
是一个用于在 Web 端实现自定义截图功能的 JavaScript 插件。该项目采用原生 JavaScript 编写,不依赖任何第三方库,因此可以在任意支持 JavaScript 的设备上运行。插件提供了多种截图模式,包括 WebRTC 模式和截图写入剪切板功能。
新手使用注意事项及解决方案
1. 项目依赖环境问题
问题描述:在使用 js-screen-shot
插件的 WebRTC 模式或截图写入剪切板功能时,需要确保网站运行在 HTTPS 环境或 localhost 环境下。如果网站运行在 HTTP 环境下,这些功能将无法正常工作。
解决方案:
- 步骤1:打开谷歌浏览器,在地址栏输入
chrome://flags/#unsafely-treat-insecure-origin-as-secure
。 - 步骤2:在打开的界面中,下拉框选择
enabled
,地址填写你的项目访问路径。
2. DOM 加载完成前实例化插件
问题描述:在 DOM 加载完成前实例化 js-screen-shot
插件会导致插件无法正常工作。
解决方案:
- 步骤1:确保在 DOM 加载完成后实例化插件。可以通过在
window.onload
事件中实例化插件来解决这个问题。 - 示例代码:
window.onload = function() { new ScreenShot(); };
3. Electron 环境下使用插件
问题描述:在 Electron 环境下无法直接调用 WebRTC 来获取屏幕流,需要调用者自己稍作处理。
解决方案:
- 步骤1:在 Electron 主线程中获取设备的窗口,并发送一个 IPC 消息。
- 示例代码:
// Electron 主线程 import { desktopCapturer, webContents } from "electron"; // 修复 electron 18.0.0-beta.5 之后版本的 BUG: 无法获取当前程序页面视频流 const selfWindws = async () => await Promise.all( webContents.getAllWebContents().filter(item => { const win = BrowserWindow.fromWebContents(item); return win && win.isVisible(); }).map(async item => { const win = BrowserWindow.fromWebContents(item); const thumbnail = await win.capturePage(); // 当程序窗口打开 DevTool 的时候 也会计入 return { name: win.getTitle() + (item.devToolsWebContents === null ? "" : "-dev"), id: win.getMediaSourceId(), thumbnail, display_id: "", appIcon: null }; }) ); // 获取设备窗口信息 ipcMain.handle("IPC消息名称", async (event, args) => { const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] }); return sources; });
通过以上步骤,新手用户可以更好地理解和使用 js-screen-shot
项目,避免常见问题的发生。
js-screen-shot web端自定义截图插件(原生JS版) 项目地址: https://gitcode.com/gh_mirrors/js/js-screen-shot