React-360: LiveEnvCamera

[EugeneNguyen]

I don't get the idea of this feature. as i understand, it will be kind of background live camera to make react vr look like ar, right?

[mikearmstrong001]

This is similar to using a pass through camera as a background. With this component it would be possible to implement something like a pokemon game or overlay 3d content on the camera view.

[EugeneNguyen]

thanks for your reply. but i can't use that anywhere (always show white / black background). can you give me instruction for working example?

[EugeneNguyen]

anyway to make it work on ios?

[mikearmstrong001]

You replace the Pano with LiveEnvCamera
However there are permissions

• the address of the site needs to be https
• localhost is considered secure
• iOS can be more picky with security permissions, the implementation uses getUserMedia which I understand to be in iOS 11

[EugeneNguyen]

:( noway to make it done in iOS < 11? even with custom app / library?
2nd question: should we make the background transparent? so we can place a camera below the webview to make it "ar-sense"?

[EugeneNguyen]

Hi. Anyway to make the background of view transparent? If it's possible, i can place a camera behind the view to make it work on ios.

[mikearmstrong001]

Can you explain more about what you are trying to achieve, perhaps a link to an example. I'm not sure I follow.

[EugeneNguyen]

My case is i'm implement an AR in react-native.

My solution:
Implement react-vr, deploy it to a server. Then in my react-native app, i will use a webview and load the url that contain react-vr app.

Current status:
Android: working fine without any more action
iOS: Can't load the LiveEnvCamera (as we confirmed it above), showing black background.

My solution:
If we can make the blackbackground of react-vr to transparent, i can place a cameraView below the webview in my react-native app, then it can make a little bit sense of AR. I can confirm that Webview of iOS can have transparent background and will show the content of layer under the webview.

What i need:
Somewhere i can config the background color of the react-vr (which is default black). By that we we can walkthrough the problem of iOS 10 and under and deploy react-vr in native application.

[EugeneNguyen]

anyway that we can archive that?

[EugeneNguyen]

anybody here?

[mikearmstrong001]

Very much ... :)

The clear state of the background is handled via three.js. If you were to clear to transparent rather than black (with solid alpha) this may allow you to achieve what you want. This control is on the renderer of Three js

Priorities mean I can't try this myself and it will also be something that would need to be resolved with the webview

hope this helps

[EugeneNguyen]

YOU'RE INCREDIBLE!!! YOU SAVED MY DAY!!! THANKS A LOT BUDDY :D

[jgwinner]

What would the syntax be on Android for using the built in camera? Mike, the instructions were clear, for URL's, above, but I'm wondering what the built in camera URL would be?

I understand priorities, a little more docs on this one would be good. I can go with what I have and the above question.

Sorry for replying to a closed issue :)

== John ==

[Mdsp9070]

I have the same question? How about use the device camera as background? Is it possible?