Accessing the device's camera with Phaser and CocoonJS

[hat_olympics]

Hi,

 

I've been developing a game using phaser, then packaging it for android using CocoonJS.

 

It's a cognitive training game, and I'm working with psychologists who want to gather as much data as possible about players. One thing we'd like to do (with players' consent, obviously) is take photos of the player while the play the game. This is because we want to analyse the images to gauge their levels of motivation and engagement.

 

So I've been trying to use the CocoonJS camera plugin to implement this feature, but I'm finding that the documentation and examples aren't very helpful.

 

I've got this:

Cocoon.Camera.start({  success: function(stream){    console.log('camera started');    if (Cocoon.nativeAvailable) {      console.log('native available');      context.fillRect(0, 0, 100, 100);      context.drawImage(stream, 0, 0, 100, 100);    }  },  error: function(){    console.log('error starting camera');  }});

So, assuming that I have context (and the associated canvas) defined somewhere, I have a couple of questions that I can't find answers to online.

 

1. Is there a way for me to not have this stream automatically displayed on screen? I've tried creating a canvas and context using Phaser.Canvas.create( ), which I thought didn't automatically add the canvas to the DOM, but it still appears on screen. I want to capture images in the background, without showing a preview, but I can't seem to figure out how to do this.

 

2. To capture the images, I've been calling canvas.toDataURL( ), which seems to work ok. Is this the best way for me to do this? Is there some way I can grab images directly from the stream object (the argument in the success function above), without having to draw to a context (because this would prob solve my problem in question (1) too?

 

3. I think generally I've found it very hard to work out exactly how the CocoonJS Camera plugin works, because, as I said, the docs are very sparse. They mention a video puzzle here, which I've downloaded on ipad and seems to work pretty well. But the code is missing from the CocoonJS demos on github.

 

I should also say, I really don't have to use the CocoonJS Camera plugin. So if anyone has any other suggestions about how a phaser + cocoonjs game can take photos using the device's camera without showing a preview, I'd really appreciate it. I've looked around but can't see much else. getUserMedia doesn't work, at least in CocoonJS canvas+, and I'd prefer to stick with canvas+ if possible.

 

Phaser, on the other hand, is pretty essential to my project, mainly because it's so so good: fast, intuitive, well-documented, and full of useful features.

 

Thanks! (and sorry for the long post!)

[seraphio777]

Hello,

 

I'm trying to solve absolutely same problems for more than week. I will be really appreciate for answers

[drhayes]

I have no experience using CocoonJS, but I wonder if the Cocoon camera plugin is making that preview screen show. You *might* be able to call getUserMedia directly and work with that instead? I don't know.

 

1. Use JS to create the canvas yourself and don't add it to the DOM.

var canvas = document.createElement('canvas');

2. That totally works. You can also call toBlob or call getImageData on the context you get from the canvas, then send that data to your server.

[hat_olympics]

I have no experience using CocoonJS, but I wonder if the Cocoon camera plugin is making that preview screen show. You *might* be able to call getUserMedia directly and work with that instead? I don't know.

 

Yeah, I'm beginning to think that it's the Cocoon camera plugin making the preview automatically show, because no matter how I create a canvas, the preview always appears. getUserMedia isn't supported in CocoonJS canvas+; I think I'll maybe try and use getUserMedia in a CocoonJS Webview, see if that works.

 

Thanks!