WebMIDI doesn't retrieve devices in Windows App

[fpassa]

Hi,
I'm developing a desktop Electron App that includes this library and it works fine in MacOS, however when running it on Windows 10, it doesn't shows devices.

I'm using the below code to get devices:

function getMIDIDevices() {
    WebMidi.enable(function (err) {
        if (err) { 
            console.log(err);
        } else {
            // console.log('WebMidi enabled');
            onEnabled();
        }
    });
}

I'm suspecting that this sentence may impact it, but not sure, as it should also affect the MacOs version: "From your note it states: "Starting with version 77, Chrome deprecates Web MIDI usage on insecure origins. This means that, going forward, the page will need to be hosted on a secure origin (e.g. https://, localhost: or file:///) and the user will need to explicitely authorize usage (no matter if sysex is used or not)."

I'm adding the following CORS in my index.html, but still not retrieving the devices.

<meta http-equiv="Content-Security-Policy"
    content="default-src 'none';
            connect-src 'self' https: wss:;
            script-src 'self' 'unsafe-inline';
            style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
            img-src 'self' blob: data:;
            font-src 'self' https://fonts.gstatic.com;
            media-src 'self' blob:;
            worker-src 'self' 'unsafe-inline' blob:;
            child-src 'self';
            object-src 'self' blob"
    />

And this is the Console Warning message, even on MacOS:

/Users/flavio/xtractplerv/dist/mac/xtractpler.app/Contents/Resources/app/node_modules/webmidi/webmidi.min.js:31 [Deprecation] Web MIDI will ask a permission to use even if the sysex is not specified in the MIDIOptions since around M82, around May 2020. See https://www.chromestatus.com/feature/5138066234671104 for more details.

Any idea how to fix it?

[djipco]

A bit of research led me to ses.setPermissionRequestHandler(handler). It seems Electron requires you to explicitly ask for permission in order to use MIDI. Can you try it and let me know if it works?

Depending on what's involved, I might be able to add the necessary code directly inside version 3 of WebMidi.js.

[fpassa]

Hi,

That was exactly what I added in my code and still not working in Windows. It works fine in MacOS.

This is the added code to the main process in my electron app:

const currentSession = mainWindow.webContents.session;
  currentSession.setPermissionRequestHandler((webContents, permission, callback) => {
    if (webContents.getURL() === "some-host" && permission === 'midi') {
      
      return callback(false); 
    } else {

      return callback(true);
    }
  });

Have you been able to retrieve MIDI devices under an electron App in Windows?

[djipco]

Have you been able to retrieve MIDI devices under an electron App in Windows?

I'm not an Electron user, so I have never tried it. However, I could give it a try if you provided me with a barebones example to test. Actually, I could share your example as a starter template for those who wish to use WebMidi.js inside Electron. This would benefit everyone.

[fpassa]

Never mind, I switched to this other library (https://www.npmjs.com/package/web-midi-api) that works as expected.

Thanks anyway.

[djipco]

By using this package, you effectively bypass front-end restrictions because it is a Node.js module. Version 3 of WebMidi.js (currently in alpha) can also be run under Node.js. Anyway, I'm glad you found a solution.