Inspiration
We wanted to create a way to connect two users in a more integrated browsing experience, simply. Most tools require you to download and install software, then only allow for screen sharing where one person is in control of the screen at a time. Our chrome extension can be added to your browser in a very simple process, allowing users to quickly make and join sessions, where they can both interact with the screen at the same time.
What it does
ScreenSync has both host and viewer experience. One person begins the connection by generating a sync code, this code is then used by another user to connect to the host session and begin viewing the website on both screens. Not only can both people see the same chrome window, but they can also each scroll and explore together at the same time. The actions on one device are shown on the other, connecting the two users more intimately.
How we built it
The software consists of two major parts: the chrome extension and a backend server.
The server uses express + http server + socket.io_server, and handles creating IDs, connecting users, and routing events between connected users.
The clients are chrome extensions with a UI popup that integrates with a background script for the extension, and several files that are evaluated in the context of the current tab, used for collecting events from the window as well as altering the window as events are received. The background script communicates with the server using the socket.io client.
In order to get accurate mouse tracking as well as scrolling on displays of different sizes (since changing the size of a display can cause elements to shuffle large amounts), we create an iframe within the webpage that hosts the full content of the site, with the iframe’s width and height set according to the viewsize of the smaller connected browser.
Challenges we ran into
Making sure the right UI elements were displayed and accessible to the user at the appropriate time. Being able to input values at the wrong time could hamper the function of the program Making sure the changes to the page were smooth for both users Making sure both users could see the mouse of the other user on their page Making it fast and efficient, so that both users can connect at the same time, without any hassle, and not have lags in the connection displays Scaling the size of the larger display down so the content on the page will not be scaled differently on different size displays, to allow accurate scrolling.
Accomplishments that we're proud of
We are incredibly proud of all the work we’ve put in, and the final product we were able to achieve in only two days. Some specific parts of the program that we are especially proud of are:
That we were able to track page data from one user and properly present it on the other users page (and vice versa) in real time
How clear the function of the program is. Users are informed of the state of their connection at all times, and they even receive an alert when the connection is first established.
Creating a UI that is simple but efficient for the needs of the project
What we learned
We learned more about javascript, html, and browser chrome extensions We learned about frontend and backend how to connect them clearly and efficiently How to create browser extensions, especially executing scripts from an extension that can change the content of the current webpage, not just the extension’s popup Proper UI management, and how to build functions around what the user will be doing How to debug the code in nodejs and a browser Using Git/Github to work on a project in a way that was both simultaneous and efficient
What's next for ScreenSync
We want to improve the stability of our platform, and ease of connecting. Sometimes connections can fail to establish properly, leaving one person able to interact with the screen while the other can’t. We also want to allow more than one user to connect to a session at a time. The ability to draw on the screen, or highlight text and have that sent to the other users is also on our radar for future updates.
Built With
- browser-extension
- html5
- javascript
- node.js
- socket.io
Log in or sign up for Devpost to join the conversation.