Giter VIP home page Giter VIP logo

vynchronize's Introduction

Vynchronize

Access the application here!

Vynchronize Screenshot

Vynchronize is a real-time online video synchronization platform. You can enjoy any video available online with friends who may not be next to you!

Vynchronize currently supports YouTube, Daily Motion, Vimeo, and essentially any .mp4/.webm on the internet with the HTML5 Player!

forthebadge

Build Status Open Source Love last deployed GitHub issues GitHub stars HitCount


Dependencies

Socket.io

Node.js

Express

YouTube Data API V3


How to run locally

How to run the server

Install Dependencies

npm install

Create a .env file and add API keys for YouTube Data API V3 and Dailymotion SDK (Optional) as YT3_API_KEY and DM_API_KEY

Run the server

node server

Access the page by going to localhost:3000

How to run CI tests
npm test

How it works

The Basics

The entire functionality of Vynchronize relies on web sockets, specifically Socket.IO. When a client connects to the server, a socket is created. The user then enters a name and a room number. The inputs are sent back to the server, and it creates/joins a room of that name with Socket.IO. Any user can connect to the room and interact with the users there.

Socket.IO functions can be emitted to certain rooms only. This way users in a specific room can call a function and have it only affect their room. This provides the foundation of the functionality.

Functionality

The functionality of synchronization is simply controlling the video player, and calling the same functions for each socket in the room. For example if a person calls play, it will call play for every connected socket. If a person calls sync it will retrieve the current time from that user only and send the data to every other socket. It will use that data and bring everyone to the correct time.

Hosts

At first it was fine to have host-less rooms, but I quickly realized that people want to be auto-synced rather than hitting the sync button over and over. For example if you join an already existing room, you want to jump right into the content rather than worrying about syncing!

To do this I created a host socket which would be marked when a room is created. This host socket is responsible for sending all the important video information to any new sockets that join. Socket.IO rooms have a really nice variable that can hold specific information for a room.

io.sockets.adapter.rooms['room-'+roomnum].host = socket.id

Along with holding the host information this object also holds the current video, player, and connected clients.

Video Players

At first I only supported the YouTube API because it was the easiest and most popular video platform. While it was good for what it was, I wanted to support many more players. It was difficult at first because the way I implemented YouTube was in a way that would not work with others. Additionally every video player had a different API and functioned differently.

I started playing around with the Daily Motion API, and I had to completely redesign how I was displaying the player. What I did was simply initialize all of the players and would destroy/hide a player when necessary. While this worked there seemed to be many bugs.

This was probably the hardest part so far. Just because of all of the asynchronous calls messing up some of the sockets. I finally figured out a way to add all the possible data into the host and room object. Any new sockets that join or sync will have all the data already loaded and synced automatically. Even when you play a YouTube video and switch players, your progress on the original YouTube video will be saved and you can go back to it at any time.

This set up the foundation for many more video players in the future. I hope to implement them soon! One feature I would really like would be the ability to parse videos from any link, but that may be out of my ability at the moment!

The Room Object

io.sockets.adapter.rooms['room-'+roomnum]

This is the special object generated for every room created. Here is it's structure:

io.sockets.adapter.rooms['room-'+roomnum]
│   .host
|   .hostName
|   .users
│   .currPlayer
|   .length
│
└───.currVideo
│   |   .yt
│   |   .dm
│   |   .vimeo
│   |   .html5
|
└───.prevVideo
│   │
│   └───.yt
│   |   |   .id
│   |   |   .time
│   └───.dm
│   |   |   .id
│   |   |   .time
│   └───.vimeo
│   |   │   .id
│   |   │   .time
│   └───.html5
│       │   .id
│       │   .time
|
└───.queue
│   |
|   └───.yt
|   |   └───[{
|   |   |   videoId,
|   |   |   title
|   |   |   }]
|   |
│   └───.dm
|   |   └───[{
|   |   |   videoId,
|   |   |   title
|   |   |   }]
|   |
│   └───.vimeo
|   |   └───[{
|   |   |   videoId,
|   |   |   title
|   |   |   }]
|   |
│   └───.html5
|       └───[{
|       |   videoId,
|       |   title
|       |   }]
|
└───.sockets
    │   SOCKET-ID1
    │   SOCKET-ID2
    |   ...

Some Notable Things

The Queue object consists of arrays for each specific player. Each array then consists of objects that hold both the id and title. It was created this way because grabbing the title required extra work, and could not be done continuously on the spot.

In Depth Functionality

Note: This was a very brief summary of what goes on behind the scenes.

Please see the Wiki for more information.

vynchronize's People

Contributors

dependabot[bot] avatar fcmam5 avatar kyle8998 avatar yokogfx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vynchronize's Issues

Event Overflow (3+ Sockets)

On certain occasions, the event listeners would cause an infinite loop leading the site to crash. This is probably caused when more than 2 users call an event at the same time, and it is trying to sync across multiple sockets leading into an endless feedback loop.

Mobile Sync Infinite Loop Crash

On very rare occasions, when syncing and using event listeners across a computer and mobile, it will trigger an infinite loop. This will cause the website to eventually crash due to the amount of requests.

The issue has something to do with the event handlers

Mobile Site No Longer Functional

After adding the event listeners, the mobile site will crash if it syncs.

I'm not too sure what is causing this, but I would guess it has to do with the mobile player.

Video Scraping From Any Link

The ability for a user to simply paste in a link to any page with a video and have it load into the player ready to be synced.

This is what I first envisioned the application to be like, but found it to be rather challenging. I'm not sure if it will work with most links, but I would like to look into it more in the future.

Buffering Pause Error

When the host seeks to a point in the video that has not been loaded yet, it will pause for the other sockets and play on the host. It needs to be able to play on all sockets.

Vimeo Lights Bug

Turn off the lights feature does not work with Vimeo player div.

Database to store all room information

Have a database to hold all of the data. This way when everyone leaves a room, everything is saved for the next session. This also is a better way of keeping the data than having a host socket.

Host Event Listener Controls

Expand the host socket functionality into event listeners. Only allow the host to control event listeners. This should stop the bugs occurring with event listeners.

Instant Seek Sync

Vimeo has a seeked function that can return details/perform actions immediately after a seek call. This does not exist on YouTube/DailyMotion.

Perhaps it would be a good feature to add a sync call as soon as a time is seeked.

Hot swapping videos

What would be really cool and unique would be the ability to switch videos without losing the place of the previous video and be able to freely switch between videos.

Web Application Complete Crash

For some unknown reason the heroku app completely crashes and has to be redeployed. This occurred when two sockets were connected to a room, then went inactive for a bit of time.

I'm currently not aware of the exact issue at the moment.

Documentation

Have a descriptive readme that documents and outlines the functionality.

Enforce Username

Require users to enter a name. It becomes less intuitive if everyone is an empty string.

Vimeo Async Bugs

Due to how different the vimeo player is structured, there are many bugs regarding how the functions are called. This is because all the functions are asynchronous and return promises. One example is the sync function not always syncing properly.

Code Quality

Fix all improper code indentation, unneeded comments, etc.

Double Socket Connect

For some reason, each client that joins the server connects as two separate sockets. This can impact some events that occur.

Event Sync Overflow

When syncing it via event listeners, the sync/seek function is called repeatedly leading to an overflow. This can cause everything to crash.

A possible fix is to have some level of error correction to prevent simultaneous seek/sync calls.

Simultaneous Video Playback in Background

When videos are played then the host switches to a different player, the original video may be triggered when a new client joins the room.

This is caused because the currPlayer variable is not updating before the sync occurs. This is an issue of async calls.

Rooms Not Isolated

Actions done in separate rooms sometimes affects each other. This is very important, and actions done in one room should only affect that one room.

Auto Sync

The video often isn't perfectly in sync at all times. Possibly implement an asynchronous auto sync function to sync with the host.

Host Disconnect Room Sync Bug

Currently the room variables are set based on the initial host.

If the host leaves the room, and another socket joins the video will be reset because there will be no host to grab the data from. A fix could be just reassigning the host socket when the host leaves. Another solution could be to create a database and constantly add the room data to the database.

Unit Tests

Have some sort of continuous integration tests for maintainability.

Dark Mode

Create a dark mode function where the user can block every element on the screen aside from the video player, simulating a darkened room.

No automatic player change when a new socket enters a room

When a new socket joins a room, it should automatically sync to the correct player and video. At the moment it will sync to the right video only if it is on YouTube. The player does not change.

This will require changing of the syncVideo() function. This may also lead to invalid syncs when syncing on another player.

Online Users Not Accurate

When users disconnect/join the online users often gets glitched and does not display the correct users.

currPlayer var not set

Socket room variables are not being set properly. Trying to access the undefined currPlayer var leads to a server crash

Seeking Event Not Working on Pause

On the youtube player, the seeking is not working when the player is paused. This may be caused due to the sync call rather than a seek call like the vimeo player.

Soundboard

Have a small soundboard to play reaction sounds to the room. Sounds like a fun feature.

Redesign layout

Rearrange elements on the page. Move the chat box in a location in which it can be used while watching the video. Maybe directly next to the video.

Rare Nonsync Event

Only some of the times, the video will not sync the host with a new socket that has joined late. This can be reproduced by playing a dailymotion video on one socket, then joining the room with another socket multiple times.

This must have something to do with the asynchronous calls.

Video Chat

Integrate a video chat within the page for even more interaction with friends.

Chat Room Design Overhaul

Redesign the chat room front end. Right now it looks clunky, and does not fit well with the video player.

Automatic Host Reassign

When the host socket leaves the room, it should be reassigned. Host can be reassigned if another socket clicks on the button, but it should be automatic if the host leaves.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.