Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/zlatnaspirala/vuletube
downloader nui opencv opencvjs play-video threejs typescript video-preview voice-commander vue youtube youtube-api
Last synced: 18 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/zlatnaspirala/vuletube
- Owner: zlatnaspirala
- License: gpl-3.0
- Created: 2020-06-24T20:13:20.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T18:03:59.000Z (22 days ago)
- Last Synced: 2024-10-24T02:05:02.113Z (22 days ago)
- Topics: downloader, nui, opencv, opencvjs, play-video, threejs, typescript, video-preview, voice-commander, vue, youtube, youtube-api
- Language: HTML
- Homepage: https://maximumroulette.com:3000
- Size: 79.5 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```js
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](https://github.com/zlatnaspirala/vue-typescript-starter/tree/master/vue-ts-starter)
## 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](https://developers.google.com/youtube/v3/getting-started)
[github.com/google/google-api-javascript-client](https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md)
## About programming paradigma methods ##
#### About vue methods in ts variant ####
For now we need trust this:
[Source https://blog.logrocket.com](https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript)
## 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:
```js
Say 'search' + 'what to search'
or
Say 'search for' + 'what to search'
```
### github submodules
Update all submodules:
```js
git pull --recurse-submodules
```
```js
[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)
```bash
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 `.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](https://maximumroulette.com/applications/vue-project/vue-typescript-starter/vue-ts-starter/docs/globals.html)
## Direct link for dev server
### VueTube web service 2020
https://maximumroulette.com:3000
https://www.youtube.com/watch?v=-lwkKzFLzk0