Colab
This is a prototype for a shared working space for remote teams using collaborative whiteboards. It's inspired by how offices work and is part of the Remote Interaction Guidelines project developed by BBC R&D. Read more about the project here: https://rig.rd.labs.bbc
This is a Next.js application that uses Tailwind for styling, Livekit for audio calls and Liveblocks for data synchronisation. The code contains many artefacts betraying its prototype nature — the code quality and organisation will reflect that.
Getting Started
You will need to create an account with Liveblocks and setup your own instance of Livekit. Once you have done this, you need to set environment variables in your .env file:
NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY=pk_XXXXXX
NEXT_PUBLIC_LIVEKIT_SERVER=XXXXXX // http://localhost:7880 for local livekit server
LIVEKIT_API_KEY=XXXXXX
LIVEKIT_SECRET_KEY=XXXXXX
Then, install the dependencies and run the development server:
npm install
npm run devOpen http://localhost:3000 with your browser to see the result.
Code Structure
The initial project was largely based on the initial Liveblocks example for a whiteboard and was heavily customised. They have since then released a new template which might be a better starting point. Also consider using tldraw if you're looking for a fully featured whiteboard.
The Lobby page connects to all the Liveblocks room and shows a preview of every room in real-time, including cursors. The lobby also includes an audio chat supported by Livekit. The Room page largely wraps the Stage component and adds the Livekit audio function. Livekit has since then included a listener to check if someone is speaking while muted so the use of our own component should not be needed anymore.
The prototype includes a loose system of usernames, requiring users to choose a username before they can start the app. They're encourage not to use someone else's username but that is not enforced. This can be an issue if multiple people use the same username as part of the Livekit setup as it's used for their identity (though this is currently mitigated by adding a timestamp to the username). The tokens are created through a simple local API.
Credits & Licence
The purpose of this release is to demonstrate the design patterns of our white paper and research. The prototype was designed and built by Mathieu Triay and Andrew Wood. The icons are from Heroicons.
The project is licensed under the open source BSD-3-Clause licence.
Thanks to everyone who took part in this project and helped us refine the design, in particular the Designing for Public Value team who was incredibly supportive.
Copyright BBC 2023