Waterford institute of technology

Final Year Project Presentation

Development of a platform for the consumption of media in sync on multiple clients

Read along at glenkeane.me/fyp-presentation

Developed by: Glen Keane

Student number: 20057974

Course: BSc (Hons) in Applied Computing

Supervisor: Colm Dunphy

What is it?

Well, my abstract says...

MediaSync is a full solution to synchronised consumption of media (video & audio) online with other people. It is a responsive online application which will allow multiple users (clients) in a virtual room the ability to control the playback of media for other users in that room. The result being that they will all see the same thing at the same time (with a delay of up to 4 seconds).

While the synchronization technology is the main feature of the application, an interactive social media application has been developed to utilise this technology. This application will have an advanced permission system built around the control of playback and user entry into rooms. This application is designed to be a social media service to enable the sharing of what they are currently watching with their friends or family.

What this means is that...

Why are things done like they are?!

So wait... What's a media room?

Heres a little demo of how the synchronisation works, from my first prototype:

Note: This is not the UI I am using in my project

Heres a mindmap of the rooms components

The permissions system

In my report, I outline a permissions system for rooms

The permissions system allows users to configure

Room types

Rooms can be one of three types

Playback controlled

If playback is controlled/restricted within a room, the currently playing media can only be modified by certain users.

This allows owners to only let people they know to change the playback... etc.

In a room, there are several user classes

What technology is used, and why is it used?


Built with node.js!



NoSQL Database!

Why Monolithic?

Because it works

What is the alternative? how does it differ?

The alternative is Microservices, a practice whereby you break down all functionality into seperate running processes/services

Monoliths just keep this functionality in a single process

Microservices add a lot of complexity with sending messages to and from services

Monoliths... don't

A nice illustration

via Martin Fowler

Why Node.js?

My comparison wordcloud

Why React.js?

What is MVC?

MVC works on the principle that that all application data which needs to be used is stored or accessed from the Model component. However, both Views and Controllers can interact with the Model component and modify that data, so it can lead to the View and Controller having different local data within them, causing display/functionality errors when they interact.

What is flux?

unidirectional flow, multiple components: a dispatcher, data-stores, views and actions

A single “dispatcher” has a registry of all the data-stores. these get updates when certain events or actions occur to update their data. These data-stores have views which render the data they contain. These views can send events to the singular dispatcher. This will keep all data consistent, so there should be no display errors like with MVC.


Coming into this, I was new to both mvc and flux approaches.

I have decided that because of my lack of familiarity with any of the available tools, to choose the one that seems like the best fit, while also beig quite popular.

It seems like flux is very well suited for an event based system, which the media synchronisation functionality is.

And react is popular right now, so I wanted to see why.

Further reinforcement in these choices:

in the recent TSSG summit, Mícheál ó Foghlú and Rory Walsh verified all of my choices of using node, react and monoliths

Why WebSockets?

I compared WebSockets and WebRTC, and I originally wanted to use WebRTC, But...

So I decided to stick with WebSockets over WebRTC

because there is potentially no limit to the amount of people who can connect

Why a NoSQL server?

Because MongoDB works really well with node.js, and allows me to use javascript on my database too

Also, it stores stuff in a format pretty similar to JSON

A mock up of a possible database schema

Note: Not really neccessary on a NoSQL database, but I wanted a logical model for reference anyway

Additional tools in use

Now onto the how...

My Design and Plans for the service

Well, here is a table of how I expected users to want to use this system

I've already shown how stuff is kept in sync previously

I have completed a mathemathical representation in Z Notation of my services permission system for another module

Available here!

This pretty much covers the majority of use cases as they relate to permissions based around media playback

Keeping things in synchronisation


I plan on deploying to some cloud host

Probably Amazon as I have student credit

I haven't built the permissions system yet.

However, I have mocked up how my UI will interact with it

UI Mockups

I have completed the majority of the design of my UI

In the next few slides I will cover these mock ups and the layouts which I have envisioned

These mockups are built with bootstrap and jquery

UI Design

I aimed to break my ui down into small components

Such as the navbar and main content

The navbar component state can be signed in or out, generally the main content is signin state agnostic

The main content composes the components of the different pages to build the ui

Some of the pages

Refer to the report to see all pages

Heres the mockup for a room (navbar signed in, different components together)

Heres a mockup with a navbar for a signed out user

And a mockup of the signed in component, which will be on several pages (and will also have a page to itself)

Finding rooms in your area

Searching rooms

Current Project State