Jump to content

Accessing the device's camera with Phaser and CocoonJS


hat_olympics
 Share

Recommended Posts

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!)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...