/Misc-6-Infinity-Remote

Control Youtube on your Desktop remotely from your mobile using this Chrome Extension integrated with a Progressive Web App

Primary LanguageJavaScriptMIT LicenseMIT

Description

This Project gives you a Chrome Extension and a Progressive Web App (PWA) allowing you to control Youtube on your Desktop Browser from the PWA in your Mobile. It enforces a 1-1 connection between the Browser Extension and the PWA. The Extension gets connected to the PWA using a QR Code which has to be scanned using the built-in QR Code Scanner in the PWA. This will land you on the Infinity Remote page that allows you to control the Youtube. Proper Instructions / Icons helps the User control the Utility.

Developer Details

Team Members:

  1. Mukul Jain (200001050)
  2. Gaurav Khushpat Jain (200001023)
  3. Vankayalapati Sai Venkata Satwik (200001077)
  4. Nishit Sushil Singh (200001056)

Mentors:

  1. Shaikh Ubaid (180001050)
  2. Ashish Raj (190003013)

How to Implement and Use

  1. Download the Frontend folder on your Desktop and load it in Chrome Extensions.
  2. Open https://infinity-remote.herokuapp.com from your Mobile browser.

Features

  1. Selection and Navigation
  2. Playback Controls - Such as Play, Pause, Volume Up-Down, Mute-Unmute, Captions, Playback Rate, Previous Video and Next Video.
  3. 1-1 Connection
  4. PWA for easy accessibility
  5. Searching on Youtube
  6. Dark Mode as per your convenience
  7. Instructions and error pages
  8. Skipping of Advertisements

Tech Stacks/Packages

This project uses the following packages and languages:

  1. Hyper Text Markup Language (HTML)
  2. Cascading Style Sheets (CSS)
  3. Javascript
  4. NodeJS
  5. ExpressJS
  6. Embedded Javascript Templating (EJS)
  7. Socket.io
  8. Qrious
  9. JSQR
  10. Compression
  11. Font Awesome Icons package
  12. Chrome Extension
  13. Progressive Web App (PWA)

Acknowledgement

This Project is created during June-July, 2021 under the event IITISoC'21, which is the Annual Dev Fest of IIT Indore to introduce the students to Software Development and Open Source. During IITISoC, the students work upon multiple Open Source Projects and they are mentored by experienced developers. The pattern followed by IITISoC is similar to GSoC so that the students get an idea of what GSoC is and how it works. We are grateful towards IIT Indore and IITISoC'21 for providing us this opportunity to build this amazing Project.

Documentation

Documentation can be found here

Presentation

Presentation can be found here

UML Diagram

UML Diagram illustrating the design flow of the Project

GIFs

GIF of QR-Code being scanned GIF of video-screen controls

Screenshots

QR-Scanner

Remote-Navigation

Remote controlling Youtube Video

Video being controlled by Remote