GSoC 2017: Log #1

First of all, I need to make sure that the large video in the Main window’s Jitsi-meet iframe also appears in the Micro window. If I can’t even access the video elements in the Jitsi-meet iframe, I can’t proceed to anywhere.

There were three approaches I attempted:

  1. Import the video element directly from the render process, using ‘module require’
  2. Use createObjectURL to generate URL of the video element and pass it to Micro mode’s window.
  3. Instead of creating a separate window for Micro mode, change the layout of main window when the window is minimized.

After trying all three, I realize that none of them actually works. The most important problem I missed out was that each Electron BrowserWindow is an separate, independent process, and Electron does not provides a Inter-Process-Communication(IPC) feature for media elements.

The reasons each approach failed are:

  1. Node’s ‘module require’ does not support transferring of a HTMLMediaElement to another page. It became ‘undefined’ every time I attempted.
  2. Similar to the ‘require’ approach, the scope of URL create is limited within the same page. When I tried to receive the media element from the URL, I only got 404 response.
  3. This approach only works partially. I can restructure the layout every time the Micro mode is called, but that means the Normal mode and the Micro mode shares the same window. So when the user minimizes the (only) window, the Micro mode’s window gets minimized as well.

 

In the end, I ended up using webRTC’s RTCPeerConnection to set up a peer-to-peer connection between the main window and the micro window. By right, I was supposed to use a STUN/TURN server to do signalling between the main window and the micro window. But since they are both under the Electron’s main process, I used Electron’s IPC feature instead to pass necessary information for signalling.

After creating html and js files for the Micro mode, I added a module for the peer connection between the main window and the micro window.

The WebRTC connection is established in following order:

     Main Window                                                                Micro Window

1.  Sets up RTCPeerConnection

                                                                                     2. Sets up RTCPeerConnection

3. Attaches jitsi video stream to peer connection

4. Creates and sends connection offer

                                                                                            5. Receives the offer

                                                                                            6. Creates and sends answer

7. Receives the answer

8. Sends ICE candidate

9. Receives and adds ICE candidate

                                                                                      10. Receives the media stream

And then… Voila!

rtc

https://github.com/jitsi/jitsi-meet-electron/pull/12/commits/a95e12ec17630701f035b2e71d8c92d6ed4754c1

 

Advertisements

One thought on “GSoC 2017: Log #1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s