WorkspaceSims

Inspiration

Covid-19 had fundamentally changed how we work. With the need to be remote, organisations across the globe are forced to reimagine workspaces and support virtual modes of work. While the world has taken major leaps of innovation to setup tools and technology to foster this new work era, we all know that there's still a long way to go in truly replacing the in-person work setting. With this hack, we take a step towards building virtual workspace solutions that further replicate in-person experiences, making them “remotely” real.

What it does

At present, remote collaboration is heavily based on video calls and text-messaging applications. We miss those raw, in-person whiteboard discussions, where you can just walk up to the whiteboard and explain your idea to the entire team by just writing stuff down. While digital whiteboard have been around for a while, they require special, external hardware devices like a touch-screen coupled with a stylus pen, and sharing screens.

We built a shared virtual-whiteboard experience, much like an in-person meeting room session, where all attendees have a common virtual whiteboard which can be scribbled upon using hand gestures which are detected by their camera feed. All virtual scribbles are superimposed on the shared whiteboard for everyone to see! Just like walking up to a whiteboard in an in-person setting! To make the experience even more immersive, we plan the use of Virtual Reality to literally get the feeling of drawing physically on a common whiteboard, while being remotely located. This functionality can be easily integrated in modern-day video chat platforms alongside virtual meeting rooms to create a workspace that is more immersive than ever before. Not just discussion rooms, we imagine an entire “virtual-work” platform that consists of everything you would find in an actual workspace, but virtually. Virtual game rooms, classrooms, meeting rooms, and even cafeterias - all with the added interactive functionality

How we built it

We used JavaScript’s libraries to take video frames feed, and then contrasted the images so that the noise is filtered and gestures made using any pointer are focused. We then stored these gestures and marked them into the shared whiteboard for other collaborators to see. We also added sample virtual workspace map using HTML canvas to replicate the real environment, consisting of meeting rooms, cubicles etc which can be clicked upon, to join a meeting room.

Challenges we ran into

Getting familiar with HTML Canvas in order to create a virtual workspace map, which when clicked upon opens up a collaborative meeting room with shared whiteboard and video chat. Comprehending the feed from video to find out the difference in frames so that we can extract the gestures made by presenter and mark them.

Accomplishments that we're proud of

Getting a working model in place, while enjoying ourselves throughout the event is something we’re super happy about. The in-person events and networking with attendees were very fulfilling.