Hi, I need to make a functionality in which user can take picture using mobile camera and then convert it to 360 view or directly take 360 degree view image if that’s possible using recho theta api. I am not sure where to begin. What I need to do at react-native (expo) side. Do I need to have ricoh device for this? Kindly help me as I am stuck at it because of no clear path available on the internet (I have browsed). I dont know how to connect to theta api without having its device or even if that’s the way to go. Any kind of help will be much appreciated.
I’m not sure if ReactVR is still under development.
Using ReactVR with THETA Images
Most people are using A-Frame for VR applications.
This is an example with Electron
HowTo: Develop 360 Image Desktop Apps with JavaScript and RICOH THETA
There’s some information on Cordova here:
Building Cordova Apps for RICOH THETA 360 Images
There is currently no example for Expo.
Most people use these examples:
GitHub - ricohapi/theta-api2.1-ios-sdk: RICOH THETA API v2.1 SDK for iOS
GitHub - ricohapi/theta-api2.1-android-sdk: RICOH THETA API v2.1 SDK for Android
You can also use Flutter. This tutorial series will take you through each step.
Thank you for your reply. I have gone through all these and as far as I understand, all these references are directly attached with the device because they use local url 192.168.1.1 (correct me if I am wrong) but I do not have any device. I just want to use api directly. That’s is what making it confusing for me. If you could please explain a bit that would be great. Thanks
There is no emulator. You will need the physical device to build a mobile app that works with the RICOH THETA APIs.
If you want to use media from the RICOH THETA to display an image, you can use the media at the link below.
Yes, I know that I need mobile device but I am talking about ricoh theta device. How can I set up local url like 192.168.1.1 so that when I hit it, end points like 192.168.1.1:80/osc/info, it returns some result. Is it my router’s url? what if my router url is different? Do I need to change it to match with 192.168.1.1 Because right now if I hit this, nothings happens as there is no local server setup and may be because my router’s url is different i.e 192.168.18.1. So, how can I set this up?
I want to use ricoh theta Api in my mobile app to capture picture in 360 view using my mobile camera and then display it
You need to buy a RICOH THETA camera to use the RICOH THETA API. If you do not have RICOH THETA camera, you cannot use the API.
Sounds to me like you just want to use your camera phone to take 360’s and nothing else.
If that is the case some Android cameras come with that capability, there are also apps you can get and Google Street view will let you make a photo sphere. Good chance you’re going to have a lot of stitching errors.
You’re much better off buying a 360 camera. I have several. If you want the best quality a Theta Z1 is the way to go. If you need to use it in water I would suggest a Insta360.
Theta is great but not designed for action shots.
Hi, But the theta api will work for expo right? and the process is same as react native ? @craig
There is a React Native demo in this repository.
Community information including the complete build process is here:
theta-client | Developer information for RICOH THETA
I’m planning to update the documentation with a theta cloud-based simulator. Let me know if you don’t have access to a physical camera and I can prioritize the documentation on the simulator and fake storage with sample media.
Hi @craig Thanks for the response but there is no example for expo! And i tried the same process as react native cli but in the end its showing error that i cant use expo go app! It means the thetha client api will not work in expo i guess! Any idea how i can make it work in expo? or any reference?
Will it work with node-rest-client and a normal http://192.168.1.1/osc/info GET request?
If you do not have a physical camera, I set up a fake-theta cloud server with sample media yesterday. It’s in the community documentation.
Do you have a physical device camera?
Are you using Access Point (AP) mode where the camera is the WiFi hotspot? Or, are you using Client Mode where the camera connects to an office router?
I am using RICHON THETA SC2 and i am using AP mode and i dont think there is Client mode in this! I am running expo app from expo go! in my physical device! Both mac and android device are connected to same wifi in order to run expo app! I am not sure how can i connect my richon! like i find a npm for using the ThetaHttpClient but i am not sure what to put in hostname and base url of that!
Its like i want to connect the richon sc2 or any version via usb and able to use to for clicking 360 pictures which i will use in my app! i am using expo app so i cant switch to other tech like expo cli or react native cli! I want to use the ThetaHttpClient sdk apis but i am not sure how can i connect richon over usb and get the hostname and all!
You can only use the WebAPI over WiFi. You cannot use it over USB.
This is the specification for the WebAPI
theta-api-specs/theta-web-api-v2.1 at main · ricohapi/theta-api-specs · GitHub
If you want to build an application to communicate over the USB cable, you must use the USB API.
theta-api-specs/theta-usb-api at main · ricohapi/theta-api-specs · GitHub
I used the USB API with Flutter in this video on a Raspberry Pi
You can try use libgphoto2 with React Expo to access the USB API.
I have not tried it.
If you get it working, please post your results.
i tried to use @goroya.io/theta-api-client - npm this library for expo over wifi! Its clicking the pictures but i dont know much about gphoto2!
Like the installation and configuration is not readable!
There are two different ways of connecting to the camera.
- WiFi
- USB
If you use WiFi, you need to use the WebAPI.
If you use USB, you need to use the USB API.
If you are using the WebAPI, you can try and use the @goroya.io/theta-api-client - npm
If are you using the USB API, you can try and use gphoto2.
I don’t know if the THETA works with gphoto2. I have not tried it. Does something like this work with the THETA SC2?
GPhoto.list(function (list) {
if (list.length === 0) return;
var camera = list[0];
console.log('Found', camera.model);
// get configuration tree
camera.getConfig(function (er, settings) {
console.log(settings);
});
...
I think i will use the WebAPI, but if i am using the cameraTakePicture({baseUrl:http://192.168.1.1}) from the npm package, i am not getting good response! Even though i am using await function still the res is under process or something i guess! The api is returning me
"data":"Object"{
"id":"5593",
"name":"camera.takePicture",
"progress":"Object"{
"completion":0
},
"state":"inProgress"
},
That is normal.
use osc/state to get the _latestFileUrl
theta-api-specs/state.md at main · ricohapi/theta-api-specs · GitHub
/osc/commands/status will show you the status of the camera
theta-api-specs/commands_status.md at main · ricohapi/theta-api-specs · GitHub
This article explains the concept
Thanks alot for the reference! I managed to get the url (i read one of your thread) which is something like “http://192.168.1.1/files/thetasc270f7540d16415838797aa068/100RICOH/R0010031.JPG”. but when i am using this url in my <Image style={{width:100,height:200,borderWidth:1}} source={{uri:this.state.dataUrl}} />
image tag its not showing!
Do i have to have something to access it like connection or something?
The URL is GET endpoint, so it should work like a normal file on the Internet. You can get the thumbnail with
http://192.168.1.1/files/thetasc270f7540d16415838797aa068/100RICOH/R0010031.JPG?type=thumb
You may need to wait until the file is fully downloaded.
Connect your computer to the THETA with WiFi, then use curl, Postman, or Insomnia to send a state command. Then, drop the URL into a web browser. You should see the image come up in the browser.
Test your app with a fake API tester like this:
If it works, then swap in the THETA URL.
Hi,Thanks i can see the image now! But i have a question, i am using the web urls and if i want to check the api response like get preview in POSTMAN, how can i do it? because currently i am connecting my laptop to the RICHON wifi and then using POSTMAN but its not working! GIving 503 error! Can you guide! I want to see the response of the getLivePreview!
Thanks