Product Update: Layout Engine and Speaking vs Listening

by on

This week we worked on the MeetSpace Rooms to improve the layout of participants, as well as introducing a new concept: Speaking vs Listening.

Speaking vs Listening

A big addition this week is the Speaking Zone and Listening Zone and it’s the most unique feature of MeetSpace so far. In every other video conferencing application you take care to mute yourself when you’re not talking, but you still share screen real estate with the people who are speaking. In Google Hangouts, one person is given the spotlight as the speaker, but this can quickly end up swapping back and forth in a very disorienting manner.

At MeetSpace, we’ve added the concept of Speakers and Listeners. When you are a Speaker, you are up in the main area of the meeting. If you’re a Listener, you are in the bottom tray area of the meeting and are automatically muted. It looks like this:

The two happy Nicks up top are speaking and are not muted. The two Nicks in the bottom tray are muted and listening.

So who controls who’s speaking and who’s listening? You do! You can click the microphone icon in the header, or, hit the SPACE bar! (See what I did there?)

What that means is, while two people are having a conversation, you can hit SPACE to move up to the speaking zone. This visually shows the speakers you’d like to say something, without having to try to interrupt the conversation. They can finished their sentence and say “Oh hey Nick, what do you think?”.

Best of all, this feature is insanely fast. It often takes under 100ms to move between zones, and combined with the low 100ms audio delay normally experienced on MeetSpace, you can very quickly pop in, say something, and pop out, and it’s really smooth.

New Layout Engine

Next up, the new Layout Engine was written from the ground up to maximize the space for video while maintaining a decent aspect ratio. MeetSpace rooms need to be able to render many different participants, while at the same time dealing with one of the biggest challenges of web design: variable browser window widths. On top of that, we didn’t want to settle on just a few basic grid layouts, because they don’t do as well for odd and prime numbers of people in a room.

To tackle this problem, MeetSpace uses a unique algorithm for determining how many rows of participants there should be, and then how wide each participant should be on each row. The algorithm is tuned to optimize for an aspect ratio between 1:1 and 16:10, but to stretch within (and a bit beyond) that in order to maximize screen real estate.

Here are some examples:

One person will use the full space, zoomed to fit.

Two people will split the window. Because my window is a bit wide, it decided to split vertically. A horizontal split would’ve really squashed us.

Three people just got to the threshold of vertical splitting, but it’s better to be a little narrow than have a lot of the top cut off.

Here’s an example of when you’re multitasking while in a meeting, like with your project management software. MeetSpace decided that it needed at least two rows. One person is on top, and they’re a bit wide, while the other two are on the bottom, more square.

Here we make the other app even bigger, and MeetSpace stacks us up.

And here’s 11 people, in a wide browser. (In this one I used avatars because my computer was not happy with 112 video streams).

So there you have it! A dynamic layout engine that responds to the number of participants and screen size, and optimizes for a good video aspect ratio.

— Nick Gauthier

Frustrated with video conferencing?

MeetSpace has the best audio quality and reliability around, and is built for distributed teams.

Start Your Free Trial