Skip to content

A live watch party app to watch videos with your friends remotely, built with the Jamstack architecture.

Notifications You must be signed in to change notification settings

ably-labs/jamstack-sync-stream-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Synchronized video streaming with Jamstack

This project demonstrates realtime messaging in Jamstack apps. Dubbed as a 'live watch party', this app allows a host to create a private watch party room, invite friends to it and watch videos together. They can also share live comments and see who's participating (online) in the party.

You can try it yourself at https://jamstack-watch-party.ably.dev/.

Watch party homepage

The host is able to choose a video from the available library.

Watch party video library

The host also has full control of the video playback for all participants, including play, pause and seek events.

Screenshot 2021-05-07 at 20 01 47

How to run this locally

Start your Strapi Server

$ cd api
$ npm install
$ npm run develop

Before you can get things working, head to http://localhost:1337/admin, create a new user and log into your Admin to add videos! Make sure you go to your User Permissions > Roles > Public Role > click the find and find one checkboxes under videos as well as the auth checkbox under ably-auth.

Start your Nuxt App

$ cd watch-party
$ npm install
$ npm run dev

Go to the browser and open http://localhost:3000/ and follow the flow.

The tech stack

We've used the technologies that work with the Jamstack architecture:

Frameworks and Libraries

  1. Nuxt.js - A Vue framework capable of generating server side rendered (SSR) static sites.
  2. Strapi - An open-source headless CMS.
  3. Ably - A scalable pub/sub messaging platform.
  4. Netlify - A serverless platform to build, deploy, and collaborate on web apps.

App architecture

Realtime watch party app architecture

Resources

TBD