Screen share on Electron framework

Affects

Dolby Product(s)

• Interactivity API Web SDK

Description

When building an Electron application using the Dolby Interactivity API Web SDK, when you try to start a screen share, you will face the following error message: Failed to execute 'getUserMedia' on 'MediaDevices': At least one of audio and video must be requested

Please note that Electron is not on the list of supported environments.

Reproduction Steps

1. Create and join a conference
2. Start the screen share using startScreenShare
3. The screen share does not start and the console shows the error message

Workaround

The problem is related to the window.getScreenSourceId function that is missing in the Electron context. Electron is now using the desktopCapturer object in order to select the window you want to share.

In the preload.js, add the following content:

const { desktopCapturer } = require('electron');
const { contextBridge } = require('electron');

contextBridge.exposeInMainWorld('voxeet', {
 desktopCapturer: () => desktopCapturer
});

Then, in the javascript that runs the application using the Dolby.io Interactivity SDK: 

window.getScreenSourceId = function (getScreenSourceId) {
 return function () {
   return window.voxeet.desktopCapturer().getSources({ types: ['window', 'screen'] })
      .then(sources => {
        console.log("Sources", sources);

        for (const source of sources) {
          // Just return the first one
          // You should create a window that will present all the possibilities
          return source.id;
        }
      });
  };
}(window.getScreenSourceId);

Once you add this code, you will automatically share the first monitor when you click the screen share button. If you want to have the same experience as in Chrome, you will need to write your own window that you present to the end user when they click on Screen Share and list all the sources from the getSources() function.

Ticket References

Dolby Reference

• CCS-920