Group creation screen, where the admin creates a game

DrawingSockets

WebSocket Pictionary® application with videocalling

Date: 2021-01-10

Vue

TypeScript

WebRTC

Node

Source code

Made as an assignment for the course Network Design and Applications, the project utilizes WebRTC to transmit audio, video and drawing data. Allowing groups to play pictionary while video conferencing.

As part of the Network Design and Applications course at Hasselt University, taught by Prof. Dr. Peter Quax, I developed an application that leverages modern networking protocols. The project involved creating a Pictionary-style game playable over the network, featuring integrated video and audio communication using WebRTC. Game data and signaling for media setup were handled via WebSockets.

Vue interface with Material Design
Video- and audiocommunication using WebRTC and P2P communication (without central server). Using a TURN server if needed.
Real-time drawing board synchronized between players using WebSockets
Custom game logic for word selection, guessing, and scoring.
Show the pattern of the word and reveal letters over time.
Drawing with multiple colors.
Source code and more details available on GitLab

Some Screenshots:

Lobby screen of DrawingSockets — Lobby screen, where you can enter your username.

Game in progress with drawing board and video streams — Waiting screen until at least one other player has joined.

Screen where a non-admin can join — The other players can pick a game (created by an admin) to join.

Guessing phase with chat and drawing — Game in progress: drawing board and video conferencing between players. The player on the right has to draw.

Interface in white theme — The interface in light theme allows to show where video is shown. Also, we show how you can use multiple colors.