YouTube vs Threejs in VUe Typescript project

Nikola Lukic · August 1, 2020

VULETUBE web application

Project name: Vue project generator

First feature: YouTube vs Threejs

version 0.0.5

Public access for VuleTube service:

https://maximumroulette.com:3000

Screenshot1:

Screenshot with openCVJS

:

YouTube presentation: youtube link

Production use https node application for web server.

Clone whole project with submodules:

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

  npm i

Other good solution is node serve for instant start.

Install:

  npm install -g serve

Run:

  npm run serve

Project details

Vue3 vs TS
Version: typescript 3.9.6
Visual Code Text Editor used.
NodeJS based backend part.

Features Flow

Note:

  0.0.x => any changes
  0.x.1 ... n => any changes + updated present logic or new big feature.
  x.1.1 ... n => release git/build point version.

- version 0.0.2 [MASTER]

Getting response for youtube search.
Call server part for saving videos

- version 0.0.3 [MASTER]

Add options switch-place for two main components
Implement LocalStorageMemory class (For saving all user infly data - view options etc.)

- version 0.0.4 [MASTER]

Save current (exist) options with localStorage and load on refresh.
Every next options will be implemented with localStorage support.

- version 0.0.5 [MASTER]

Added new server module : npm install --save image-downloader
Prepare for search result preview in 3d. with raycast options for navigate. Add options for:
save result number per page - pagination.
show result in 3d

version 0.1.1 [MASTER]

Adding progress for video duration.
Adding webcam options.
Replace text with icons.

version 0.1.2 [MASTER]

Adding paypal donate buttons
test nui webcamer controller [DEV]
- voice commander activate => block detection 0
- information/about => block detection 7
- switch theme => block detection 3
test nui/voice controller [DEV] Just basic - voice-commander need to be improved.

Login proccess need mouse or touch event trigger (on user request). Can't be passed with nui or voice commander.

version 0.2.0 [MASTER]

Added new submodule https://github.com/zlatnaspirala/opencv-starter Basic implementation options for first effect gray. My opencv-starter project is script module type and prepared for this actions.
test nui/voice controller pre-command -> action command => v-command : search or search for then listening for what to search . [DONE]
NUI commander visibility option implemented [DONE]
Make more comfor in component class i created declare ts files for each/individual components. myYouTube.d.ts and webgl-player.d.ts

version 0.2.1 [NEXT][WIP]

Make openCV videoProcessing multi source reusable but with one output canvas effect.
Prevent raycast click event behind 3d plane video FIX@ [DEV]

Production

There is no any kind of build on public mashine just upload files in WEB manir. Plug and play. /var/html/www/ANY_PATH

How to upload on production (windows):

Build on windows mashine host with npm run build then simple upload dist/ with ftp client to the public vps. Run in server/node node server-connector.js

On top lever root folder of git project run => git submodule update --init --recursive

From submodules projects root => git pull https://github.com/zlatnaspirala/nui-commander master git pull https://github.com/zlatnaspirala/voice-commander master

Project structure

├── dist/  (This is auto generated)
├── node_modules/  (This is auto generated)
├── public/
|   ├── assets/
|   |   └── icons/
|   |   |   └── svgs
|   |   |   └── pngs
|   |   └── vule-logo1.png
|   |   └── logo.png
|   |   └── sounds/
|   |   |   └── note.mp3 ...
|   |   └── submodules/
|   |   |   └── nui-commander/
|   |   |   └── voice-commander/
|   |   |   └── opencv-starter/
|   ├── thumbnails/
|   ├── videos/
|   |   └── list.html
|   ├── bad.html
|   ├── favicon.ico
|   ├── index.html
├── server/
|   ├── node_modules/ (This is auto generated)
|   ├── package.json
|   ├── package-lock.json
|   ├── server-connector.js
├── src/
|   ├── components/
|   |   ├── nui-webcam-control/
|   |   |   ├── nui-webcam-control.vue
|   |   ├── youtube-3d/
|   |   |   ├── myYouTube.vue
|   |   |   ├── myYouTube.d.ts
|   |   |   ├── webgl-player.vue
|   |   |   └── webgl-player.d.ts
|   |   ├── myFooter.vue
|   |   ├── myHeader.vue
|   ├── my-common/
|   ├── local-storage/
|   ├── App.vue
|   └── styles/
|   |   └── styles.scss
|   ├── App.vue
|   ├── main.ts
|   ├── error-instance.ts
|   ├── shims-tsx.d.ts
|   ├── shims-vue.d.ts
|   └── store.ts
├── .gitignore
├── README.md (This file)
├── tsconfig.json
├── vue.config.js
├── package.json
├── package-lock.json (This is auto generated)
└── babel.config.js

Components :

- myYouTube.vue Getting response for youtube search. Call server part for saving videos

- webgl-player.vue Open opengles port view, look for video source saved to the maximumroulette:3000 I use quick solution from npm: https://www.npmjs.com/package/youtube-dl

About video processing

Role for enabling video processing effects with private webcam

Setting for openCV component must be enabled
Camera must be enabled

Handled situation with on/off variant.....

Response for youtube api v3 call `search`.

  body: "{↵  "kind": "youtube#searchListResponse",↵  "etag""
  headers: {cache-control: "private", content-encoding: "gzip",
  content-length: "5512", content-type: "application/json; charset=UTF-8", date: "Sun, 05 Jul 2020 20:47:06 GMT", …}
  result: {
    kind: "youtube#searchListResponse",
    etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38",
    nextPageToken: "CBkQAA", regionCode: "RS", pageInfo: {…}, …}
  status: 200
  statusText: null

Result property:

{
  "kind": "youtube#searchResult",
  "etag": "mlweRndBtBgAcVC-11ZrL0oI7ok",
  "id": {
    "kind": "youtube#video",
    "videoId": "YPhJOC9-M_M"
  },
  "snippet": {
  "publishedAt": "2019-07-14T19:27:31Z",
  "channelId": "UCc1NtMtvoVzKnOtnai9LGsA",
  "title": "Create game engine - Visual typescript game engine",
  "description": "Clone or download from : https://github.com/zlatnaspirala/visual-ts-game-engine Next video\
    developing in live - adding multiplayer feature. Project : Visual ts ...",
  "thumbnails": {
    "default": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/default.jpg",
      "width": 120, "height": 90
    },
    "medium": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/mqdefault.jpg",
      "width": 320, "height": 180
    },
    "high": {
      "url": "https://i.ytimg.com/vi/YPhJOC9-M_M/hqdefault.jpg",
      "width": 480, "height": 360
    }
  },
  "channelTitle": "javascript fanatic",
  "liveBroadcastContent": "none",
  "publishTime": "2019-07-14T19:27:31Z"
  }
}

Important flags field ->

{
  etag: "3nOm8AR0NU4TDlCxh0UCxk1KB38"
  items:
      etag: "mlweRndBtBgAcVC-11ZrL0oI7ok"
      id: {kind: "youtube#video", videoId: "YPhJOC9-M_M"}
      kind: "youtube#searchResult"
      snippet: {publis
      kind: "youtube#searchListResponse"
      nextPageToken: "CBkQAA"
      pageInfo: {totalResults: 400229, resultsPerPage: 25}
      regionCode: "RS"
      }
}

Opencvjs help

After git pull for submodules go to folder : vue-ts-starter\public\submodules\opencv-starter

For windows use powerShell for npm i if you have some trouble with cmd.

VueMaterial help

Notes :

All other <input type="file"> attributes, such as multiple and accept, can be used on md-field.
Icons used with https://fontawesome.com/v4.7.0/icons/
eslint or any other cheker full strict only for proc build in dev status lint will pass more roles.
In public/assets/icons i added complete fontawesome-free-5.14.0-web package.

About routes

From official:

Simple Routing From Scratch
If you only need very simple routing and do not wish to involve a full-featured router library,
you can do so by dynamically rendering a page-level component like this:

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || NotFound
    }
  },
  render (h) { return h(this.ViewComponent) }
})

Spiral position

Not in use at the moment.

  var count = 10;
  var radius = 32;
  for ( var i = 1, l = count; i <= l; i ++ ) {
    var phi = Math.acos( - 1 + ( 2 * i ) / l );
    var theta = Math.sqrt( l * Math.PI ) * phi;
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.setFromSphericalCoords( radius, phi, theta );
    mesh.lookAt( this.camera.position );
    this.scene.add( mesh );
  }

Direct link for dev server

VueTube web DEV [WIP] service 2020

https://maximumroulette.com:3000

Edited October 7, 2020 by Nikola Lukic

Sign In

YouTube vs Threejs in VUe Typescript project

Recommended Posts

Nikola Lukic

VULETUBE web application

Project name: Vue project generator

First feature: YouTube vs Threejs

version 0.0.5

Public access for VuleTube service:

https://maximumroulette.com:3000

Project details

Features Flow

Production

Project structure

Components :

About video processing

Response for youtube api v3 call `search`.

Result property:

Opencvjs help

VueMaterial help

About routes

Spiral position

YT Download module

Private links:

Help links/public

Direct link for dev server

VueTube web DEV [WIP] service 2020

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity

YouTube vs Threejs in VUe Typescript project

Recommended Posts

Nikola Lukic

VULETUBE web application

Project name: Vue project generator

First feature: YouTube vs Threejs

version 0.0.5

Public access for VuleTube service:

https://maximumroulette.com:3000

Project details

Features Flow

Production

Project structure

Components :

About video processing

Response for youtube api v3 call search.

Result property:

Opencvjs help

VueMaterial help

About routes

Spiral position

YT Download module

Private links:

Help links/public

Direct link for dev server

VueTube web DEV [WIP] service 2020

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity

Response for youtube api v3 call `search`.