[main] Fix Window Capture Compatibility

[Pixelithas]

Window Capture Compatibility:

The problem is that the Pulsar Editor application does not appear in the list of available windows to capture in Discord and OBS. This is usually due to the way the application handles graphical context and how it interacts with operating system windows.

I made this change, so I write mainly on Pulsar, but at the same moment I stream on Twitch, but OBS doesn't capture Pulsar and I have to show it on Visual Studio.

Changed main.js and added this code that disables hardware acceleration, because of it often problems.

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const allowTransparency = settings.get('core.allowWindowTransparency', false);
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      hardwareAcceleration: false,
    },
    transparent: false,
    backgroundColor: '#FFF',
  });

  mainWindow.loadFile('index.html');
}
  mainWindow.on('minimize', () => {
    mainWindow.hide();
  });

  mainWindow.on('restore', () => {
    mainWindow.show();
  });
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});



app.disableHardwareAcceleration();

And added --enable-gpu to package.json.

"start": "electron . --enable-gpu"

Sry if the code is not correct, I would be glad if you could correct it.

[Pixelithas]

const { app, BrowserWindow } = require('electron');

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
    transparent: false,
    backgroundColor: '#FFF',
    hardwareAcceleration: false,
  });

  mainWindow.loadFile('index.html');
}

  mainWindow.on('minimize', () => {
    mainWindow.hide();
  });

  mainWindow.on('restore', () => {
    mainWindow.show();
  });
}

if (process.argv.includes('--screen-capture-mode')) {
  app.disableHardwareAcceleration();
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

The code has been modified

[savetheclocktower]

Thanks for putting this on our radar. We definitely want to make it possible to stream coding sessions in Pulsar.

That said: this is almost certainly not the best way to fix this. We don't want to introduce new code that creates the BrowserWindow — that's already handled in src/main-process/atom-window.js.

If the kernel of this request is adding a way to call app.disableHardwareAcceleration() when a command-line switch is given, then we can certainly consider that. But there are ways to do that that don't introduce so much extra code.

[savetheclocktower]

I'm also curious about what separates Pulsar from Visual Studio (or VS Code? which one do you mean?) handles this differently.

When you stream with that app, do you have to launch it a special way, or does it just work? If it's actually VS Code, I'd be surprised if they were disabling hardware acceleration altogether unless it's something you opted into.

[Pixelithas]

Thanks for putting this on our radar. We definitely want to make it possible to stream coding sessions in Pulsar.

That said: this is almost certainly not the best way to fix this. We don't want to introduce new code that creates the BrowserWindow — that's already handled in src/main-process/atom-window.js.

If the kernel of this request is adding a way to call app.disableHardwareAcceleration() when a command-line switch is given, then we can certainly consider that. But there are ways to do that that don't introduce so much extra code.

What if we make a streamer mode button that will disable hardware acceleration and optimize the capture through atom-window.js for broadcasting

[savetheclocktower]

If it truly has to be done from the main process, then a button won't do it. It'd have to be set at launch time.

[confused-Techie]

If it truly has to be done from the main process, then a button won't do it. It'd have to be set at launch time.

Would we be able to utilize our existing IPC communication to enable such behavior? Since I feel like a special command flag would be easily hidden.

If not possible there, I'd personally vote for a setting like "Enable streamer mode on next launch" but I hope there's another way to do this without disabling hardware acceleration.

I can see why disabling hardware acceleration seems like a good fix, because that's how you enable Discord streaming for most digitally protected content (e.g. widevine protected content) but we aren't doing anything like that in Pulsar, so hopefully there's something else we could look at.

---

Actually, just tested myself, I'm able to stream the content of my Pulsar window without any change on v1.124.0.

So this whole PR my not actually be needed. @Pixelithas what happens when you try to stream Pulsar?

Here's what I see: (This screen shot is my own Discord client while streaming Pulsar)

[savetheclocktower]

Would we be able to utilize our existing IPC communication to enable such behavior? Since I feel like a special command flag would be easily hidden.

No, because — quoth the Electron docs — “This method can only be called before app is ready.” So it's a one-shot deal at startup.

I, too, wonder if this is necessary; that's why I asked about VS Code. I support the goal of being able to stream Pulsar from Twitch, so I'm hoping to learn more about exactly why OBS won't record it.

[confused-Techie]

@savetheclocktower Thanks for that info, seems you're right that we only get the one chance to disable hardware acceleration.

But luckily I actually have OBS already configured. Lemme test to see what I get for Pulsar on v1.124.0

Capturing full Desktop:

Window Capture Only:

Game Capture:

So the only way I can get this to not work is by attempting to use "Game Capture" in OBS, but it's very clear about that not working, and tells me what other methods to use, which seem to work fine.

[savetheclocktower]

@Pixelithas, I'm also curious whether you've turned on window transparency (as your initial snippet implies). If so, that could explain why it's not showing up in OBS. It was our mistake to add that setting in the first place.

[Pixelithas]

@Pixelithas, I'm also curious whether you've turned on window transparency (as your initial snippet implies). If so, that could explain why it's not showing up in OBS. It was our mistake to add that setting in the first place.

@savetheclocktower I wanted to use core.allowWindowTransparency, which was added in 1.118.0, but looking in the code, did not find it and thought that this function was removed. Disabling Transparency will have its benefits

[Pixelithas]

@confused-Techie It is possible as if to write without disabling hardware acceleration, but then you will have to create a new function for BrowserWindow, try it.

[Pixelithas]

backgroundThrottling: true also with this value, there may be problems if an older version of Electron. Since version 22.x, compatibility with capture tools has been improved with updated Chromium, is there any chance that VS is using the latest version?

Anyway tried to fix this problem without disabling hardware acceleration, but through a flag. I went into src/main-process/atom-window.js.

const forceWindowCapture = process.argv.includes('--force-window-capture');

    const options = {
      show: false,
      title: getAppName(),
      tabbingIdentifier: 'atom',
      webPreferences: {
        backgroundThrottling: !this.isSpec,
        disableBlinkFeatures: 'Auxclick',
        nodeIntegration: true,
        contextIsolation: false,
        webviewTag: true,
        enableRemoteModule: true,
        nodeIntegrationInWorker: true
      },
      simpleFullscreen: this.getSimpleFullscreen(),
      backgroundColor: forceWindowCapture ? '#FFF' : undefined,
      transparent: forceWindowCapture ? false : options.transparent
    };

And then in HandleEvents() adding handling of minimize and restore with hide and show, so that they do not involve GPU.

this.browserWindow.on('minimize', () => {
      this.browserWindow.hide(); 
    });

    this.browserWindow.on('restore', () => {
      this.browserWindow.show();
    });
  }

And if we don't use the flag, we remove it and add transparent: this.atomApplication.config.get(‘core.allowWindowTransparency’) || false As far as I'm concerned, the code should perform its function, but there is a probability that some plugins that don't work on rendering processes will break.

[savetheclocktower]

@Pixelithas Before we get too deep into this, I'm wondering what your results are when you try the things @confused-Techie demonstrated. Are your results different in OBS? What is preventing you from using one of the modes described?

[Pixelithas]

@Pixelithas Before we get too deep into this, I'm wondering what your results are when you try the things @confused-Techie demonstrated. Are your results different in OBS? What is preventing you from using one of the modes described?

I don’t know about the others, but I may have a delay, and there is also a bit overload with two included "Game Capture"

And use one capture scene for Pulsar, so I won’t be able to show both code and result and other resources at the same time.

[confused-Techie]

@Pixelithas I'm so sorry, but would you mind rephrasing that last comment? I'm having trouble understanding what you mean.

Are you describing difficulty in streaming Pulsar and other resources at the same time? I'm not sure changes to hardware acceleration would help that.

And like I mentioned above, it seems OBS isn't compatible in "Game Capture" with any chromium powered application, which would include things like VS Code, Discord, Bitwarden, etc. But using "Window Capture" seems to work fine.

Also to answer your earlier question, VS Code is on the latest Electron version, meanwhile Pulsar is a bit behind, but that is something we are actively working towards fixing. But to do so the changes are rather huge and far spanning.

[savetheclocktower]

And like I mentioned above, it seems OBS isn't compatible in "Game Capture" with any chromium powered application, which would include things like VS Code, Discord, Bitwarden, etc. But using "Window Capture" seems to work fine.

Sounds like @Pixelithas wants to capture at least two windows at once (Pulsar plus another window, presumably a web browser to show the results). But “Desktop Capture” still ought to work.

[Pixelithas]

Sounds like @Pixelithas wants to capture at least two windows at once (Pulsar plus another window, presumably a web browser to show the results). But “Desktop Capture” still ought to work.

Yep. Previously wrote the code without disabling hardware acceleration, I will have to test it or you. As I said earlier, if Electron below 22.x, then the only option is to disable transparency and put hide(), if the code allows you to disable backgroundThrolling

[confused-Techie]

@Pixelithas So I would recommend disabling transparency no matter what if you aren't taking advantage of it. But that's completely configurable in settings.

But I'm able to use screen capture tools just fine with both Discord and OBS. Without any changes in the codebase, I'm still failing to see what isn't working on your end, we are more than happy to find a fix for it, but due to the fact it's working as far as I can tell, it doesn't seem that we need to make any changes to get things functional.

---

As for the use case outlined above, "Desktop Capture" would work for multiple applications, or even having two instances of "Window Capture" for each application would work. Sure "Game Capture" doesn't work, but according to the message I got on OBS, that's a limitation of Chromium e.g. anything that's built on Electron, the changes here wouldn't change that at all.

[savetheclocktower]

You can also give PulsarNext a shot — that's Pulsar running on Electron 30. It's less polished and still needs work, but it would be a quick way of checking whether newer Electron fixes this for you.