tl;dr
Cobrowsing is a Chrome extension from GitDuck that allows you to share websites that can be browsed by other people. Check a demo, read the complete instructions or download the extension.

Why did we build Cobrowsing?

We are building GitDuck to help software teams talk and collaborate more fluently. When we think about how teams interact (and how we work as a team), it is normal that many of our interactions consists of sharing some content and talking about it. We could be sharing the code, a drawing and a lot of times we are sharing a website.

Traditional screen sharing is one way of doing this by sharing 60 frames of your screen per second and allowing your team to see it in real-time. This is ok, but there some problems that we need to talk about:

1. Image quality. If your internet connection is not great or if a participant has a slow internet connection, the image quality would reduce dramatically and this would compromise the experience.

2. Lack of interactivity when screen sharing. When someones is screen sharing, the other participants are always passive. This can work on some scenarios, but most of the time people need to point things out and explore. Trying to do this via screen sharing is super frustrating.

Can you click on that button?

What button?

Wait, scroll back a little bit

Come on, it's 2021! Why were we still doing screen sharing the same way we did in the mid-2000s? These tiny frictions build up and the flow of information slows.

Screen sharing without interaction is like talking on a walkie-talkie instead of having a real-time conversation.

We want to be able to share any website and allow people to view and control it as if they had opened that website themselves. People should be able to scroll, click on things, see everyone's cursors and even type. People should have an interactive screen sharing experience.

What's the use case?

Whenever you are working remotely, one of the most common things to do is show something on your screen and talk about it. You might want to share your sprint planning and discuss the task details. Or you want to share your local server and show the most recent version running locally of your web app. Or perhaps read together a technical documentation and discussion implementation details.

Sharing localhost

When sharing the local version of your website or web app, you want people to be able to use it and get their direct feedback. If you are the one sharing your screen, then you are filling the UX gaps that might not be obvious for other people. For example, you might be taking a shortcut when showing how people are signing up for your app and you not even noticing that you are doing that.

By allowing them to use your local in development version, you are getting valuable feedback that are not compromised by your bias. Another great thing is that you can do it without deploying anything. People can literally browse the local version in your machine while you watch they doing it.

Sprint planning

At GitDuck we do weekly sprint plannings to review together our plan and discuss the tasks. It's a moment of detailed discussion that we need to be in the same page and we use the cobrowsing feature in our favor. By sharing our board page, everyone is looking at the same item and we can write specs in a more collaborative way.

QA and debugging

To be able to show and reproduce a bug is one of the most important things you need when developing a product. A lot of times this happens over screen sharing, but the context is already different as you are only seeing the screen of your colleagues. You don't have access to their logs and can't debug in real-time. With the cobrowsing feature you could share the web app and have the dev console open while your colleague is using the website. It's like they would be using the web on your machine. You can see the logs in real-time and catch bugs much faster than if you had to guess how to reproduce the issues.

Extra point: When you share a website with cobrowsing, you are really sharing your local version. When a bug happens, you can have the confidence that the bug is happening on your machine. That's one less variable to worry about and you can focus on solving the issue.

Sharing references

Whenever you need to share a documentation or any website for reference, one important feature is to be able to select and copy the text that you are seeing. With the cobrowsing feature you can do that. You can copy examples, interact with the website and make the whole process of reading a documentation much easier.

How does it work?

By leveraging the capabilities of Chrome Extensions, while you're on a call, we're able to inject JavaScript code inside of the webpage you want to share. That way, the moment you click Share tab, we start watching for changes being made to the DOM tree by using the MutationObserver API, available on all modern web browsers.

We send the DOM and their subsequent changes to all other call participants the same way we do when you share your code or terminal from any of our extensions, by using a peer-to-peer connection with WebRTC (taking advantage of all the security benefits WebRTC comes with out of the box). That DOM tree that your peers receive is going to be rebuilt inside an iframe (along with the mutations received from the MutationObserver API).

Other than that, we leverage popular browser APIs and events for achieving an interactive "browser-sharing" experience: checking for scroll position, listening to events like mousemove, click, selectionchange, change from elements like <input>, etc. Note that we also need to listen to those events on the iframe representation (and send them back to the person who is sharing), so guests can scroll, click and type around in sync.

There are lots of other issues we need to take care of like private assets that are only available to the person who's sharing (e.g. because he has a cookie or is on a private network), recording iframes or canvas, keeping everything in sync when multiple people are typing at the same time, making it performant, dealing with strict security headers, etc. We're still polishing details and improving this extension with your feedback so if you notice something it's not working as expected on a certain page please let us know! Also, if you're interested in working on interesting challenges like this one, don't hesitate to keep an eye on our open positions.

Security

As with the audio communication and the code sharing features on GitDuck, the content is only being shared encrypted and peer to peer between the call participants. That's right, no content touches our servers. We take security and privacy very seriously. Check our security page for more details.

How to use Cobrowsing on GitDuck?

You will need two things to be able to use this feature.

1. First you need to have a GitDuck account and be part of a team so you can talk there. If you don't have one, just go to gitduck.com and create an account.
2. Then you need to install the GitDuck extension for Chrome. Get it on the Chrome web store. GitDuck extension on Chrome web store.

Once you complete both steps, join a call on GitDuck. The GitDuck Chrome extension will notice that you are on a call and add a small widget to the open tabs that you have. Once you click that, you will be sharing that tab to everyone that is on the call and they will be able to browse that website with you. Everybody will be on the same page and you are going to be able to see each other's cursors. If someone clicks or scrolls, everybody will see and follow.

You can also read the full instructions here.