{"id":13426338,"url":"https://github.com/kyle8998/Vynchronize","last_synced_at":"2025-03-15T21:31:08.441Z","repository":{"id":44745831,"uuid":"106231287","full_name":"kyle8998/Vynchronize","owner":"kyle8998","description":"Watch videos with friends online with the new real time video synchronization platform","archived":false,"fork":false,"pushed_at":"2025-01-03T20:23:32.000Z","size":2144,"stargazers_count":1169,"open_issues_count":56,"forks_count":182,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-09T18:08:17.956Z","etag":null,"topics":["nodejs","realtime","single-page-app","social","socket-io","synchronization","video-player","watch-synchronized-videos","web-sockets"],"latest_commit_sha":null,"homepage":"https://www.vynchronize.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kyle8998.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-09T03:11:40.000Z","updated_at":"2025-03-08T13:15:58.000Z","dependencies_parsed_at":"2025-01-19T12:11:01.182Z","dependency_job_id":null,"html_url":"https://github.com/kyle8998/Vynchronize","commit_stats":{"total_commits":96,"total_committers":4,"mean_commits":24.0,"dds":0.03125,"last_synced_commit":"addb14f7e66566d0adc8cc059a7c9699e4afd179"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle8998%2FVynchronize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle8998%2FVynchronize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle8998%2FVynchronize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyle8998%2FVynchronize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyle8998","download_url":"https://codeload.github.com/kyle8998/Vynchronize/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792343,"owners_count":20348626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nodejs","realtime","single-page-app","social","socket-io","synchronization","video-player","watch-synchronized-videos","web-sockets"],"created_at":"2024-07-31T00:01:32.249Z","updated_at":"2025-03-15T21:31:07.934Z","avatar_url":"https://github.com/kyle8998.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vynchronize\n[Access the application here!](https://vynchronize.herokuapp.com/)\n\n![Vynchronize Screenshot](https://raw.githubusercontent.com/kyle8998/Vynchronize/master/img/screenshot2.PNG)\n\nVynchronize is a real-time online video synchronization platform. You can enjoy any video available online with friends who may not be next to you!\n\nVynchronize currently supports YouTube, Daily Motion, Vimeo, and essentially any .mp4/.webm on the internet with the HTML5 Player!\n\n[![forthebadge](https://forthebadge.com/images/badges/60-percent-of-the-time-works-every-time.svg)](http://forthebadge.com)\n\n[![Build Status](https://travis-ci.org/kyle8998/Vynchronize.svg?branch=master)](https://travis-ci.org/kyle8998/Vynchronize)\n[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)\n\u003ca href=\"https://github.com/kyle8998/Vynchronize/commits/master\"\u003e \u003cimg src=\"https://img.shields.io/github/last-commit/kyle8998/Vynchronize.svg?label=last%20deployed\" alt=\"last deployed\"\u003e\u003c/a\u003e\n[![GitHub issues](https://img.shields.io/github/issues/kyle8998/Vynchronize.svg \"GitHub issues\")](https://github.com/kyle8998/Vynchronize/issues)\n[![GitHub stars](https://img.shields.io/github/stars/kyle8998/Vynchronize.svg \"GitHub stars\")](https://github.com/kyle8998/Vynchronize/stargazers)\n[![HitCount](http://hits.dwyl.io/kyle8998/Vynchronize.svg)](http://hits.dwyl.io/kyle8998/Vynchronize)\n\n---\n\n### Dependencies\n\nSocket.io\n\nNode.js\n\nExpress\n\nYouTube Data API V3\n\n---\n\n### How to run locally\n\n##### How to run the server\n\nInstall Dependencies\n```\nnpm install\n```\n\nCreate a `.env` file and add API keys for YouTube Data API V3 and Dailymotion SDK (Optional) as YT3_API_KEY and DM_API_KEY\n\nRun the server\n```\nnode server\n```\n\nAccess the page by going to localhost:3000\n\n##### How to run CI tests\n\n```\nnpm test\n```\n\n---\n\n### How it works\n\n##### The Basics\n\nThe entire functionality of Vynchronize relies on web sockets, specifically\nSocket.IO. When a client connects to the server, a socket is created. The user\nthen enters a name and a room number. The inputs are sent back to the server, and\nit creates/joins a room of that name with Socket.IO. Any user can connect to the\nroom and interact with the users there.\n\nSocket.IO functions can be emitted to certain rooms only. This way users in a\nspecific room can call a function and have it only affect their room. This\nprovides the foundation of the functionality.\n\n##### Functionality\n\nThe functionality of synchronization is simply controlling the video player, and\ncalling the same functions for each socket in the room. For example if a person\ncalls play, it will call play for every connected socket. If a person calls sync\nit will retrieve the current time from that user only and send the data to every\nother socket. It will use that data and bring everyone to the correct time.\n\n##### Hosts\n\nAt first it was fine to have host-less rooms, but I quickly realized\nthat people want to be auto-synced rather than hitting the sync button over\nand over. For example if you join an already existing room, you want to jump\nright into the content rather than worrying about syncing!\n\nTo do this I created a host socket which would be marked when a room is created.\nThis host socket is responsible for sending all the important video information\nto any new sockets that join. Socket.IO rooms have a really nice variable that\ncan hold specific information for a room.\n\n```\nio.sockets.adapter.rooms['room-'+roomnum].host = socket.id\n```\n\nAlong with holding the host information this object also holds the current\nvideo, player, and connected clients.\n\n##### Video Players\n\nAt first I only supported the YouTube API because it was the easiest and most\npopular video platform. While it was good for what it was, I wanted to support\nmany more players. It was difficult at first because the way I implemented\nYouTube was in a way that would not work with others. Additionally every\nvideo player had a different API and functioned differently.\n\nI started playing around with the Daily Motion API, and I had to completely\nredesign how I was displaying the player. What I did was simply initialize all\nof the players and would destroy/hide a player when necessary. While this worked\nthere seemed to be many bugs.\n\nThis was probably the hardest part so far. Just because of all of the\nasynchronous calls messing up some of the sockets. I finally figured out a way\nto add all the possible data into the host and room object. Any new sockets that\njoin or sync will have all the data already loaded and synced automatically.\nEven when you play a YouTube video and switch players, your progress on the\noriginal YouTube video will be saved and you can go back to it at any time.\n\nThis set up the foundation for many more video players in the future. I hope to\nimplement them soon! One feature I would really like would be the ability to\nparse videos from any link, but that may be out of my ability at the moment!\n\n\n##### The Room Object\n\nio.sockets.adapter.rooms['room-'+roomnum]\n\nThis is the special object generated for every room created. Here is it's structure:\n\n```\nio.sockets.adapter.rooms['room-'+roomnum]\n│   .host\n|   .hostName\n|   .users\n│   .currPlayer\n|   .length\n│\n└───.currVideo\n│   |   .yt\n│   |   .dm\n│   |   .vimeo\n│   |   .html5\n|\n└───.prevVideo\n│   │\n│   └───.yt\n│   |   |   .id\n│   |   |   .time\n│   └───.dm\n│   |   |   .id\n│   |   |   .time\n│   └───.vimeo\n│   |   │   .id\n│   |   │   .time\n│   └───.html5\n│       │   .id\n│       │   .time\n|\n└───.queue\n│   |\n|   └───.yt\n|   |   └───[{\n|   |   |   videoId,\n|   |   |   title\n|   |   |   }]\n|   |\n│   └───.dm\n|   |   └───[{\n|   |   |   videoId,\n|   |   |   title\n|   |   |   }]\n|   |\n│   └───.vimeo\n|   |   └───[{\n|   |   |   videoId,\n|   |   |   title\n|   |   |   }]\n|   |\n│   └───.html5\n|       └───[{\n|       |   videoId,\n|       |   title\n|       |   }]\n|\n└───.sockets\n    │   SOCKET-ID1\n    │   SOCKET-ID2\n    |   ...\n```\n\n**Some Notable Things**\n\nThe Queue object consists of arrays for each specific player. Each array then\nconsists of objects that hold both the id and title. It was created this way because\ngrabbing the title required extra work, and could not be done continuously on the spot.\n\n##### In Depth Functionality\n\n**Note**: This was a very brief summary of what goes on behind the scenes.\n\nPlease see the [Wiki](https://github.com/kyle8998/Vynchronize/wiki) for more\ninformation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyle8998%2FVynchronize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyle8998%2FVynchronize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyle8998%2FVynchronize/lists"}