Search the Community

Showing results for tags 'youtube'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 10 results

  1. Project name: VuleTube Alternative YouTube viewer Based on Vue vs Typescript - YouTubeAPI vs Three.js and Node.js First feature: YouTube vs Threejs version 0.2.0 Public access for VuleTube service: https://maximumroulette.com:3000 I am looking for collaborants who will support this project. Api documentation: DocumentationLink Production use https node application for web server. git clone https://github.com/zlatnaspirala/vue-typescript-starter npm i Other good solution is node serve for instant start. Install web server for dev: For Localhost works npm install -g serve Run: npm run serve Youtube presentation: Project details Project details Features 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 [WIP NEXT] Adding paypal donate buttons Prevent raycast click event behind 3d plane video FIX@ Adding progress for video duration. Adding webcam options 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. done on played main video (threejs canvas texture). - Create first documentation for VULETUBE Application. - Prevent raycast click event behind 3d plane video FIX@ [DEV] Project structure: ├── dist/ (This is auto generated) Ignore this ├── docs/ (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 https://maximumroulette:3000 I use quick solution from npm: https://www.npmjs.com/package/youtube-dl 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" } } { 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" } } 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/ 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 ); } YT Download module Download from: https://www.npmjs.com/package/youtube-dl Help links/public: https://vuematerial.io/themes/configuration https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md#LoadinganAPIandMakingaRequest https://developers.google.com/youtube/v3/docs/search/list?apix=true Direct link for dev server VueTube web service 2020 https://maximumroulette.com:3000
  2. 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 ); } YT Download module Download from: https://www.npmjs.com/package/youtube-dl Private links: https://console.developers.google.com/apis/credentials?folder=&organizationId=&project=vue-project-generator https://console.developers.google.com/apis/library?filter=category:maps&project=vue-project-generator Help links/public https://vuematerial.io/themes/configuration https://github.com/google/google-api-javascript-client/blob/master/docs/samples.md#LoadinganAPIandMakingaRequest https://developers.google.com/youtube/v3/docs/search/list?apix=true Direct link for dev server VueTube web DEV [WIP] service 2020 https://maximumroulette.com:3000
  3. Live conference about gamedev. It's on twitch and youtube, the conf is free, translated in 8 languages - vocals and subtitles. more info here : https://twitter.com/gamedevworld
  4. Since GODOT does everything that Phaser does but with greater facilitaton as well as more quickly and with great easiness and much much less effort blood and tears. Why to use phaser any more?
  5. What is the best way to record/screencast a video of your html5 game? I'm trying out some stuff so I can upload something to YouTube or Vimeo, here is what I've found useful so far. OBS Studio (Open Broadcaster Software) is a fully fledged suite for typical game-streaming stuff, there's a pretty advanced scene builder to arrange game + webcam + chatfeed etc. But it can also simply record a browser window to file as FLV/AVI/MP4. It works great with FireFox, although it seems a little resource intensive. ShotCut can do some simple video editing and the final rendering. It's pretty intuitive and it can do transitions, text/png overlays and even green-screen effects, but no fancy animated titles or sliding an image intro frame AFAIK. Btw I haven't tried Story Remix yet, which is Microsoft's replacement for Windows Movie Maker Has anyone else got any experience with recording their JavaScript game, for a promotional video or something like that?
  6. Hi, Is there any way we can add Youtube video as a source for the Video Textures. Thanks, Raghavender Mylagary
  7. Hi I am new to Phaser. I have been asked to load an youtube thumbnail based on a given ID. Without using their API, the thumbnail can be retrieved this way: https://img.youtube.com/vi/<youtube ID>/0.jpg Is there some restrictions when using statements like this: game.load.image("youtubeTN", "https://img.youtube.com/vi/<youtube ID>/0.jpg"); ... ... var sprite = new Phaser.Sprite(game, youtube.x, youtube.y, "youtubeTN"); I was able to load an image locally but the image wouldn't load if it's from an external site. Thanks!
  8. Hey everyone. We've just published a video montage of cool content made in PlayCanvas. Check it out: Hope you like it!
  9. Hi all! I was just reading Ten top tips for developing HTML5 games and discovered this forum so I figured I'd "PLUG" our HTML5 game. Plug.dj is a free social game where people take turns DJing new music or videos for each other. It's basically a real-time chat room with synchronized music streaming powered by YouTube & SoundCloud content. Everyone in the community has an avatar that dances when you Woot (i.e. up-vote) the currently playing track. It's a great way to not only share music you love, but also to discover great new music since it's curated by real people from people around the world. Direct game link here: https://plug.dj/ Would love to hear any optimization tips you have on how to improve sprite performance. We already cap avatar rendering to 200 per community (although you can have thousands of people in the community simultaneously, we only draw up to 200). We're monetizing the game through in-app avatar upgrades and other experience-enhancements. Here's another screenshot of the store. All feedback welcome!
  10. Wow.. the smashing glass effects are stunning.