Show Youtube videos in sync


#1

I want to share a script for sync view of Youtube videos.
You can test this script on AVRENG domain on HighFidelity, or in a browser at: http://transmissiongate.com:3030/

YouTube Together on High Fidelity

A simple app to allow watching youtube together

Installation

If you want the default script:
git clone https://github.com/zillding/yt-together.git

the updated version without login:
wget http://transmissiongate.com/yt-together.zip

cd yt-together
npm install
npm start
open http://localhost:3030

Features

  • Watch YouTube videos with your pals (synced using websocket)
  • Search YouTube videos
  • Preview search result
  • Add video to/delete video from a playlist
  • See current number of viewers

#2

That’s FANTASTIC george! Best player I have seen yet.

Would be so cool if it didn’t have the “Enter your username” button so it would “just work” immediately…

or could somehow get your username…


#4

Done! I’ve updated the script in order to login without user name input.


#5

Thanks, nice nice one!


#6

This is pretty cool! Any plans to put this into a user friendly format like an HDTV 3d model and put it on the marketplace? I’m sure it would be a favorite!


#7

If the script don’t work, you must change the authorization API key for youtube search:

https://console.developers.google.com/apis/library/youtube.googleapis.com/?id=125bab65-cfb6-4f25-9826-4dcc309bc508

Obtain a new key and change the key in: /src/app/config.js in line 2.

export const SEARCH_API = 'https://www.googleapis.com/youtube/v3/search'
export const API_KEY = 'AIzaSyBjyz_4NV9e2qEaH20jVqY6P4ZLQUxdHxo'

#8

Hiya! This looks terrific & works fine for me on @GeorgeDeac’s website, however I’m not able to get any search results from my own installation. I have changed my config.js to use my newly acquired API key, then ran the “npm install” again. It starts up fine & I can access the page without issue, but no search results spawn regardless of what I try. Any assistance would be greatly appreciated.


#9

Hi Krougeau,
can you send me please your web address of this app?
If you open this app in a Chrome browser, and look at developer tools, do you see some errors?


#10

Hi @GeorgeDeac,

Thanks so much! The app is currently online at http://149.248.33.204:3030/

Checking the dev tools in Chrome does show an error:

Failed to load resource: the server responded with a status of 403 ()
https://www.googleapis.com/youtube/v3/search?part=snippet&key=AIzaSyBBVXTzmM5IRhd_0rCz6eAfpOD9Lr1oKoQ&q=high%20fidelity&type=video&maxResults=30 

I’ve double-checked the key & it looks fine. Just to make sure I went about setting it up correctly, I registered for the YouTube Data API v3, not the analytics, reporting or ad APIs. The key itself is currently Unrestricted, which I would think would be even less likely to cause an issue, haha, but I can (and likely should) set it to Restricted if that’ll help.

Following the first error, I see an uncaught exception error stating that currentURL is not defined:

Uncaught (in promise) ReferenceError: currentURL is not defined
    at then.catch.e (content_script_bundle.js:13)
chrome-extension://mlomiejdfkolichcflejclcbmpeaniij/dist/content_script_bundle.js

#11

Oh hell, I figured it out. facepalm
Following the URL that failed to load directly, I’m given a bit more verbose explanation. It seems I simply hadn’t Enabled the API, just generated a key. Doh! Hit the Enable button & everything looks great now. Thanks again! This is ever so useful! :smiley:

Now all I have to do is rig it up to run as a daemon so I don’t need to keep the terminal connection open. Should be a no-brainer, eh? :stuck_out_tongue: