Add camera sharing function to scene

Hi
I want to have a button that enables the device camera, takes a snapshot and then gives you the ability to share across social media - how can I do this? Any tutorials anywhere?

Thanks

1 Like

Hey @technology

if I understand well, you need a snapshot function. Like this:

symbol.nodes.plane.on("pointerup", ()=>{
      Z.device.snapshot();
});

If the share option don’t show up, just set a device node on hierarchy and turn the share on. By there you can set a message and if you want so, you can do this by the code too, in this way:

symbol.nodes.plane.on("pointerup", ()=>{
      Z.device.snapshot("your message here");
});

P.S.: It doesn’t work in iOS’s whatsapp. Don’t know why but iOS’s whatsapp don’t show a pic with a message.

Is this what you need?

att, HigĂŁo.

1 Like

Hi
Thanks for this. It’s that simple?

Can the share box be restyled?

Many thanks

1 Like

Don’t worry,

I don’t think so, because the box looks like an intern function from Zappar Application!

att, HigĂŁo.

Oh that’s a shame…

1 Like

I’m doing this but it won’t publish

parent.on(“pointerup”, (e) => {

symbol.nodes.Buttons_forCompilotZapparShare_png.on(“pointerup”, ()=>{

Z.device.snapshot(“NDCS Technology”);

});

1 Like

Apologies it does indeed work…

I just need the UI to disappear when the snapshot is taken.

2 Likes

Hmm @technology,

You’re putting a button with a button event into a parent with a button event on it. The parent isn’t a button so it don’t receive pointerup or pointerdown (it just receives show, hide or ready if I’m not wrong). The right thing should be something like:

parent.on("show", ()=>{
    symbol.nodes.Buttons_forCompilotZapparShare_png.on("pointerup", ()=>{
         Z.device.snapshot("NDCS Technology");
    });
});

And as I told you too time back, you don’t need to program your buttons into the show parent. It’s better to use outside of it in this way:

parent.on("show", ()=>{
     //shown
     
     //hidden
     
});

symbol.nodes.Buttons_forCompilotZapparShare_png.on("pointerup", ()=>{
     Z.device.snapshot("NDCS Technology");
});

Hope this helps.

Also, about the UI, what you could do is put all your UI into a group and put before the snapshot function to visible false and put a Z.after some time after the snapshot function to give it a visible true. In this way it will disappear before the photo and will appear after the photo. For the Z.after I recomend something like 200 - 250 but it will depends : )

att, HigĂŁo.

1 Like

Thanks, I did work the first bit out!

The second bit - hiding the UI. Can you explain that a bit more?

1 Like

Hello @technology,

This is awesome! And yes, I do. When you want to something disappear before a snapshot function and appear after it, the most common way that I see is:

Take all your UI, throw then into a single group (or several if you want xD) and you set this group to visible false before the snapshot function. Like this:

symbol.nodes.Buttons_forCompilotZapparShare_png.on("pointerup", ()=>{
     symbol.nodes.group.visible(false);
     Z.device.snapshot("NDCS Technology");
});

and to make it appear after a snapshot function, just set a Z.after(), after it. Like this:

symbol.nodes.Buttons_forCompilotZapparShare_png.on("pointerup", ()=>{
     symbol.nodes.group.visible(false);
     Z.device.snapshot("NDCS Technology");
     Z.after(250, ()=>{
          symbol.nodes.group.visible(true);
     });
});

If you don’t set the Z.after, when you click to take the photo, the UI should just flash and will appear in your photo. If it is still showing up in your photo, just try to increase the Z.after value.

att, HigĂŁo.

1 Like

Great, love it!

1 Like

Amazing, thanks so much for the insights @higor!

1 Like