一款兼容Electron的WebRTC编码工具包

kurento-utils-js is a browser library that can be used to simplify creation and handling of RTCPeerConnection objects, to control the browser’s WebRTC API. However, the official kurento-utils-js is no longer maintained, and problems might occur when using the official library.

This library is an optimized version of kurento-utils-js, currently it adds supports for screen sharing and mixed media sharing for mainstream browsers (as well as Electron, since v6.18.6) without extra plugins.

Installation Instructions

Be sure to have installed Node.js in your system:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

To install the library, it’s recommended to do that from the NPM repository:

npm install kurento-utils-universal

Alternatively, you can download the code using git and install manually its dependencies:

git clone https://github.com/LeoHaoVIP/kurento-utils-universal.git
cd kurento-utils-universal
npm install

Developing Instructions

Quickly Shift

If you have read the kurento-docs and already known how to build WebRTC applications with the official kurento-utils-js, you can quickly enjoy the new features by replacing the official dependency item with {"kurento-utils-universal": "latest"} in your package.json file.

Compared to coding with the official library, the only action that you should make is to update the sendSource field when creating WebRtcPeer. Update details about sendSource are provided below.

Updates on Official Library

• Update enumeration values of sendSource

  The official kurento-utils-js supports two kinds of send sources, which are webcam and screen. In this updated library, we have provided four commonly used sharing modes, which are audio|screen|camera|mix.

  When a user is sharing on mix mode, the camera and screen media are mixed into one single media stream via MultiStreamMixer.

  

• Add supports for free-plugin screen sharing

  Most browsers now naturally support getDisplayMedia for screen sharing. In this updated library, we utilized it and implemented getScreenMedia, thus users can share their screen without installing extra browser plugins.

  Besides, considering that some developers are writing WebRTC applications running on Electron framework, since v6.18.6, we also implemented getScreenMediaForElectron and getMixMediaForElectron using desktopCapturer module of Electron.

  It’s worth noting that developers don’t need to make any extra actions or configuration to start screen sharing, the only thing that you should do is to assign 'screen' or 'mix' to the sendSource field.

Screen Sharing on Electron

Screen sharing works perfectly on mainstream browsers, such as Chrome, Firefox, Microsoft Edge. When the WebRtcPeer is created with sendSource as 'screen' or 'mix', a window will pop up and ask user to select the target window (or the entire screen) to share.

However, Things get different when WebRTC applications are running on Electron, since no popup window will show up.

In this library, we have implemented the basic screen sharing functionality for Electron applications. By default, the target sharing media source is the entire screen.

Sharing Certain Window on Electron

If you want to share a certain window instead of the entire screen on Electron, some coordination is required on the Electron application.

Step1. Get a list of screen and window media sources via desktopCapturer.

// main.js of Electron application
const {desktopCapturer} = require('electron');

desktopCapturer.getSources({types: ['window', 'screen']}).then(async sources => {
    for (const source of sources) {
        //Add your media source selection logic
    }
})

The next following is a sample of media source object. The id field will be used in the next step.

// A sample of media source object
{
  name: 'app',
  id: 'window:854492:1',
  thumbnail: NativeImage {...},
  display_id: '',
  appIcon: null
}

Step2. Select the target media source ID and pass it to the HTML WebRTC page .

Note: The HTML WebRTC page is deployed remotely and not specifically designed for Electron.

// main.js of Electron application
const injectJs="document.getElementById('electron-media-source-id').innerText=${targetSourceId};";
// Inject js code when the HTML WebRTC page is loaded
tab.webview.executeJavaScript(injectJs);

Explanation

In this kurento-utils-universal library, we have created an invisible element with id electron-media-source-id to interact with Electron. Developers need to pass the targetSourceId to this element, and then the library will start sharing the target media. The relevant codes in our library are as follows:

screenConstrains.video = {
    mandatory: {
        chromeMediaSource: 'desktop',
        // Use media source ID retrieved from electronMediaIdSlot
        // electronMediaIdSlot is the invisable element with id 'electron-media-source-id'
        chromeMediaSourceId: electronMediaIdSlot.innerText
    }
};

After finishing the above steps, a certain window media can be shared on Electron.