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 项目，避免常见问题的发生。