Search the Community

Is web camera access is possible in phaser 3? If yes. Any one can, please provide me a sample code. How to use webcam.js plugin with phaser 3 game, To access the system web camera.

Hi y'all, I'm having trouble getting the Webcam plugin running in my game for some reason. Seems like it should be simple enough judging by the example: https://phaser.io/examples/v2/misc/webcam When I start the plugin from inside my Game state, the plugin starts, my browser asks for permission to access the camera, and then I get a completely blank screen - no output from the camera. Or the output is printing somewhere that's not being added to the game. Here's my code: BasicGame.Game = function(game) {}; BasicGame.Game.prototype = { preload: function() { this.game.load.script('webcam', '/src/utils/Webcam.js'); }, create: function() { var webcam = this.game.plugins.add(Phaser.Plugin.Webcam); console.log(this.game.plugins.plugins); var bmd = this.game.make.bitmapData(600, 450); var sprite = bmd.addToWorld(); webcam.start(600, 450, bmd.context); }, update: function() { }, }; The plugin is definitely added and then started so I really don't know what the issue is! Any help is appreciated :-) Thanks, Sam

When I'm using webcam as a texture I get a lot of these warnings: RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering. which happen until the webcam texture finally appears on the object. I think its trying to display the texture before the webcam feed has appeared. Here's my webcam playground: https://www.babylonjs-playground.com/#1R77YT#10

Hold up something red like a bottle cap and you should see a 3d sphere following it around. When your up to it, use arrows and mouse to move around and it should still track to the plane showing your webcam. https://www.babylonjs-playground.com/#YGKM4#1 As it identifies red above a certain threshold make sure there are no other red objects in the environment (like a t-shirt) or tracking may get weird. Let me know if it works since I've only tried it at home

Hi guys, I am making an app that overlays a png over a video. I want the user to insert their face via webcam or upload. How do i allow user to upload image to phaser? Is it possible to use webcam? I am also building resize image UI, unless there is already one.

Made a small demo on how to use the Webcam in 2.6. https://www.babylonjs-playground.com/#EETLE#0 More info about Video here: http://doc.babylonjs.com/tutorials/advanced_texturing. From what I gather you don't need to use a shadermaterial if you just want to display the webcam stream. However applying it to a shadermaterial allows for custom pixelshaders on the stream. [EDIT] Had some time so I made a sample using standard material for the video. https://www.babylonjs-playground.com/#LIVJ8#0 In this one I needed to set the emissiveColor because the scene has no lights. Also use of the webcam requires a HTTPS connection (in Chrome) which might require use of a local webserver if anyone is developing at home.

Hi, I am searching for an example where we can set the video from the webcam as the source for the VideoTexture. Thanks, Raghavender Mylagary

Hi! I have this code and I need to save several images in Array, and then show them. How to do this? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });function preload () {game.load.script('webcam', '../plugins/WebCam.js');}var webcam;var bmd;var sprite;function create () {webcam = game.plugins.add(Phaser.Plugin.Webcam);bmd = game.make.bitmapData(800, 600);sprite = bmd.addToWorld();webcam.start(800, 600, bmd.context);game.input.onDown.addOnce(takePicture, this);}function takePicture () {webcam.stop();// bmd.context now contains your webcam imagesprite.tint = Math.random() * 0xff0000;}

(also on Hacker News: https://news.ycombinator.com/item?id=7899214) Hey guys, I posted about this a few weeks ago but the games weren't quite ready yet so it didn't get much attention. This time I made a video ! Please have a look at http://short.epfl.ch/paprika/ to test the games and know more about the project! I hope you like the games, and I would really appreciate any feedback concerning the framework itself, any sort of informal evaluation really. So, the story: As part of a school project I've been working on a adapting an AR markers library called Chilitags into a very simple, very easy to use, more abstract JavaScript framework called Paprika. In short, what it does is allow you to use AR markers as input for your web application (with property binding and condition triggers for position, rotation, specific orientation, visibility, card flipping, tilting, stacking.) I created 3 games/demos with Phaser which are far from perfect, but serve as experiments to test paper interaction. I hope you enjoy these and I'd love to hear what you think of them! Asteroids:http://chili-epfl.github.io/paprika/phaser_demo_3.htmlIn this game you control the orientation and color mode of a spaceship using a card. Plays like Asteroids, with color mode mechanics inspired by Ikaruga.It uses one 2-sided card and tests rotation tracking + flipping detection.Traffic Management: http://chili-epfl.github.io/paprika/phaser_demo_2.htmlIn this game you control which lane gets a green light at 4 crossroads, the objective being to let all cars through in the shortest time possible without letting (too many of) them crash.It uses four 1-sided cards and tests orientation.there's also a simpler, 1 crossroad version of it here http://chili-epfl.github.io/paprika/phaser_demo_1.html)Ball Maze: chili-epfl.github.io/paprika/phaser_demo_4.htmlIn this game you control a ball inside a baze by tilting a piece of paper as you would the ball maze. the objective is to get to the goal without hitting the walls in the shortest time possible.It uses a 1 sided card and tests tilting and tilt orientation.

Hey everyone! As part of a school project I've been working on a adapting an augmented reality software library called Chilitags into a very simple, very easy to use, more abstract JavaScript framework called Paprika. In short, what it does is allow you to use AR markers as input for your web application (with triggers for position, rotation, specific orientation, visibility, card flipping.) More info on it here: http://chili-epfl.github.io/paprika/ (I would really appreciate if anyone wanted to give a shot at making a small game using Paprika, or adapting one of your existing games/demos to use it, as any feedback from developers would help me with further development. Don't hesitate to contact me privately or through this post if interested.) Anyways, my approach was to implement paper input functionality along with 2 game demos created with Phaser. These demos are far from perfect games, but were mostly done to experiment with the interaction and test the different functionality developed for the framework. But hey I'd still love to hear what you think of them! (ideally you'd have to print the marker cards but there are PNG images which you can download to your phone and show your webcam, detection is pretty robust and works just as good either way.) Asteroids game: http://chili-epfl.github.io/paprika/phaser_demo_3.htmlIn this game you control the orientation and color mode of a spaceship using a card. Plays like Asteroids, with color mode mechanics inspired by Ikaruga.It uses one 2-sided card and tests rotation tracking + flipping detection. Traffic Management game: http://chili-epfl.github.io/paprika/phaser_demo_2.htmlIn this game you control which lane gets a green light at 4 crossroads, the objective being to let all cars through in the shortest time possible without letting (too many of) them crash.It uses four 1-sided cards and tests orientation.(edit: there's also a simpler, 1 crossroad version of it here http://chili-epfl.github.io/paprika/phaser_demo_1.html) I hope you enjoy these!