zlatnaspirala / vuletube

Starter project for vue in combination with typescript. Getting response for youtube search. Call server part for saving videos. Use videos in three.js 3d port view. Control vuletube site with hands (NUI) also with voice command.

Project name: vue-ts-starter - vuletube

Creator: Nikola Lukic 2020 - Visual Code editor used

Version "Ecstacy of gold"

https://maximumroulette.com:3000

Clone project command:

  git clone --recurse-submodules https://github.com/zlatnaspirala/vue-typescript-starter

Project objective

To create perfect modular fit for any type project. I will integrate next features:

• Add https://github.com/fent/node-ytdl-core like another options support (on server side) for youtube-dl.
• Google client login based on ApiKey. [DONE]
• Test yt video play with YT Player embeded iframe[DONE] also with customhtml5 video tag.[DONE]
• Google account login based on node.js server.
• Calling Youtube API v3. and preview in classic html tags. [DONE]
• Implementing three.js video preview sub component[DONE]
• Preview thumbnails with threejs component. [DONE]
• BASIC NUI commander and Voice commander [DONE]
• NUI hands control yt vieo navigation [WIP]
• BASIC openCV for web (opencvjs) implementation [DONE]
• Implementing different view modes (OrbitControl, First person control)[DONE]
• Implementing custom webGL2 (glmatrix) video preview sub component.
• Kure Video Chat (kurento) Mixing yt video with camera stream.
• Visual ts game engine - some kind of implementation Adding 2d/3d games intro 3d view.
• Implementing AR (commercial)
• Google map API - Not free (maybe for 3d vs maps) 7$ min cost

Last main page screenshot:

Go to project folder

Starter readme more details

Credits

About Legacy Note

I use download procedure just like internal techical solution. I put logo "Developed with youtube" and make documentation about Youtube api usage also i delete downloaded files after some time. There is no any redistribution even playing in offline regime or any other usage or reusage. Also this has been fixed (YT-DL refuses to download such files RIAA) I am not promoting any downloading , dis-respectful & excessive pirating. I keep it as friendly usage.

Screenshot webcam example:

See setup-from-zero-point.md to make clear who this project was created.

Help links:

developers.google.com/youtube/v3

github.com/google/google-api-javascript-client

About programming paradigma methods

About vue methods in ts variant

For now we need trust this:

Source https://blog.logrocket.com

About three.js implementation

I will not use ts variant for three.js. Reasons on page:

https://threejs.org/docs/#manual/en/introduction/Typescript-setup

I will use javascript classic variant but script type module with import.

Raport: npm i three -> found 376 vulnerabilities (375 low, 1 high)

Features DONE

• YouTube component. Log in , fetch data from youtube APi v3. preview images in list

• Added threejs lib / my subComponent and preview video and thumbnails. Play video in webGL context , control video from status bar buttons UI.

• nuiCommander implemented also Voice commande.

  Voice commands:

     Say 'search' + 'what to search'
     or
     Say 'search for' + 'what to search'

github submodules

Update all submodules:

  git pull --recurse-submodules

[submodule "vue-ts-starter/public/submodules/nui-commander/nui-commander"]
  url = https://github.com/zlatnaspirala/nui-commander
[submodule "vue-ts-starter/public/submodules/voice-commander/voice-commander"]
  url = https://github.com/zlatnaspirala/voice-commander
[submodule "vue-ts-starter/public/submodules/opencv-starter"]
  url = https://github.com/zlatnaspirala/opencv-starter

Formating

Lints and fixes files (eslint)

  npm run lint
  npm run format

Documentation

From experience i want to use typedoc. There is one small problem with vue single file component loading procedure. I try from internet different solution but no one works. Solution => I will add new pseudo file extension <nameComp>.docs.ts. Add to exclude list and define type declaration inside *.docs.* They can be active interface/type script or only dev comp.

Generate docs:

  npm run docs

Vuletube API documentation

Direct link for dev server

VueTube web service 2020

https://maximumroulette.com:3000

https://www.youtube.com/watch?v=-lwkKzFLzk0