GSoC 2017: Log #1

22 Jun 2017 | Jitsi GSoC WebRTC

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:

Node’s ‘module require’ does not support transferring of a HTMLMediaElement to another page. It became ‘undefined’ every time I attempted. 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. 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!