Skip to content

Latest commit

 

History

History
61 lines (38 loc) · 3.2 KB

README.md

File metadata and controls

61 lines (38 loc) · 3.2 KB
Raw

Lukeflix: Watch With Friends (LukeStream)

Watch movies in sync with friends using video and voice chat.

Getting Started

Requires npm & Node.js and Font Awesome Pro License. Currently only optimized for Chrome.

  1. Clone repo.

  2. Export your Font Awesome Access Token.

    FONTAWESOME_NPM_AUTH_TOKEN=<YOUR-TOKEN-HERE>

  3. Install dependencies:

    npm i

  4. Build server:

    npm run build

  5. Run once (to generate default config):

    npm run start

  6. Quit server: control + c

  7. Edit newly generated config.json

  8. Restart server (to use updated config):

    npm run start

  9. Visit https://localhost:3000 or whatever port is set in the config file.

  10. There may be some browser security warnings. If using Chrome, type thisisunsafe anywhere to view the site. HTTPS is required as the voice/video chat will not function without it. The server is using a provided self-signed cert. Consider using Let's Encrypt if hosting externally.

Tech Stack

This app is written in TypeScript for both the server and client. This allows for consistent type-checking between both environments. The client uses React with Next.js for server-side rendering. On the back-end, the Next.js server script has been modified to use Express and serve a Socket.IO server. Currently, there is no database, as everything is managed client-side via local storage.

Movie playback syncing and voice/video chat call signaling is handled using sockets. After the initial signaling, the voice/video chat uses WebRTC to provide an end-to-end encrypted peer-to-peer chat. It uses a mesh-network format for each peer, meaning there is no host, peer, or centralized connection. Each user connects individually with each other user. This does have some performance implications when adding additional users to the room; however, this reduces the load on a centralized server.

To maintain SSL encryption, external content, such as the movies themselves, captions, thumbnails, etc... are all reverse-proxied through the back-end.

On the front-end, most components are styled using styled-components and are theme-customizable to make it easily re-brandable. Icons are using Font Awesome Pro.

Development

You can learn more about developing for this project in the contributing guide.

LICENSE

This project is currently unlicensed. Please ask permission for using directly, however, using it as an example of how to set up your own project is more than welcome. The code was originally written in JavaScript in 2017 and updated in 2020 to meet the needs of the pandemic to include video and audio chat and to use TypeScript. I haven't updated or maintained it since and cannot gurantee it works properly. I'd love to get back to it though as this is one of my favorite projects I've worked on.