Main Virtual Tours SC2 Linux

HowTo: Develop 360 Image Desktop Apps with JavaScript and RICOH THETA

ill keep working on this after im done my current project.

To use the current code to make a simple interface that takes video or pictures and back them up to a harddrive when there done, possibly try to do long video recording then transfer and loop.
i have a car show i go to id like to record since i foundout you can inport 360 video into a 3d render program i have.

.
A little improvement code: (to update on to my previous CMD notepad edit)
Using the “application on GitHub”
Features:

  • Adds Close Program Button to web page
    .thetalist
  • Also minimizes the “RUNTHETA” program at start

    ’ note i did add “hidden” to the image and video demo(s)

Step A - Create:

  • "RUNTHETA.bat" (used to run program)
    open notepad & paste code below, then save as RUNTHETA.bat

if not DEFINED IS_MINIMIZED set IS_MINIMIZED=1 && start "" /min "%~dpnx0" %* && exit TITLE RUNTHETA electron app.js exit

  • "KILLRUN.bat" (used to Close RUNTHETA.bat also Close’s Electron)
    open notepad & paste code below, then save as KILLRUN.bat

taskkill /F /FI "WindowTitle eq RUNTHETA" /T


Step B - Add:

  • Add The Button to your App Page " X " & “Refresh Page” Button
    open “index.html” in notepad & paste code below where you’d like, then save.

<button onclick="KILLRUN();">X</button> <button value="Refresh Page" onClick="window.location.href=window.location.href">Refresh Page</button>

  • Add The Button code
    open “index.js” in notepad & paste code below at the bottom of the Document, then save.

KILLRUN = function() { require('child_process').exec('cmd /c KILLRUN.bat'); }


I will also make a powershell program when i have time that Adds this all for you…
so all you have todo it run the program.

enjoy.

1 Like

doing some testing…
made a easy way to input code for testing…

2 Likes

Nice progress! Thanks for these updates. :slight_smile:

1 Like

More progress:
finaly after some time trying to figure this out
i found a way to find info from a result

example code (result code from a request):

{
	"fingerprint":"FIG_0019","state":
	{
		"_apiVersion":2,
		"batteryLevel":1,
		"_batteryState":"charged",
		"_cameraError":[],
		"_captureStatus":"idle",
		"_capturedPictures":0,
		"_latestFileUrl":"",
		"_pluginRunning":false,
		"_pluginWebServer":false,
		"_recordableTime":0,
		"_recordedTime":0,
		"storageUri":"http://192.168.1.1/files/150100525831424d42075931ce41c300/"
	}
}

and say i want the url from the “storageUri” everytime i use the same request and get the above result above.

well i can get that and extract only the url.
as of now ive made it so all you have todo is select the name of the element you want, and if the element result requres (Quotation marks, comma) before or after the info you want to require.


*the picture displays it getting the “fingerprint” element 1st result
also the code on the page isnt displayed the best, but i was more focused on getting the equation to work as i wanted then make it look good for myself lol

2 Likes

Congratulations on your progress. This will be useful to people in the future as there is no easy way for people to set camera parameters from a desktop/laptop.

Also, the mobile app doesn’t allow configuration of the entire API.

Whenever you’re ready, feel free to put your code up on GitHub. Maybe other people will join into the development and submit pull requests.

2 Likes

result2

a little more user friendly.

i will repost to github once i finish what ive been currenly working on,
this is just one step to get me closer to my main plan.

time is a factor.

2 Likes

Kevin,

Really cool that you’re putting in the effort. I’m pretty interested in trying this out myself. I’ve wanted to be able to grab bigger chunks of API accessible info all at once. This seems like a cool answer to that.

No pressure. But if you do get it up in a GitHub repo, I’d love to be able to try it out myself.

Jesse

PS. Time is always a factor. :slight_smile:

2 Likes

Very compelling Motivation, and Quote.

just had to do some work.
not sure if its useful the way im going, but I’ve never made a Github before.


also formatting text so when set at the correct width, the code has a smaller layout of the same data.

The next step i would like to figure out would be how to send a data responce update from the device, or if that is even possible, instead of a timed refresh update.

Ex. After the recording is converted to a file, theta sends a update of some sorts to post that the updates the users incoming request of active info.

2 Likes

this API command may work to check to see if the camera is ready to take another video. The example is with still image, but it may work with video.

https://developers.theta360.com/en/docs/v2.1/api_reference/protocols/commands_status.html

2 Likes

That is perfect for getting a approximate finish time and also convertion time and speed after the video has been converted then transferred*

Thank you

2 Likes

I found a much easyer way to get the info from the json info.

https://www.w3schools.com/js/tryit.asp?filename=tryjson_parse

Ive decoded json before but this seams to be the easyest way todo so for those following.

1 Like

just a little update, i think i found something that will work nicely.
it decodes “Response” and gets each field.

ADDED automatic loop to get current update,
also doesn’t require the"Response" field as show in the image example,
and now updates every second with added format:

  • uptime:1205
    Device On Time: 0D 0H 20M 5S

possibly make a simple interface?..
endless possibility’s?

** As it appears making a windows based camera interface is a given requirement before I move further with what I am currently working towards.


*current… i havn’t had time to add to it but will try todo so today.

1 Like

I am interested in this as well. My objective is to get the livestream preview from the camera in to electron and then view it in an Occulus headset using either Google VR or A-Frame. I think A-Frame and electron work together, but I am not sure.

Do you have a GitHub repo for this setup yet?

3 Likes

There is a gethub for this forum, but I have not posted one for what I am working on yet.
I’m currently just trying to setup a order of getting the info that possible to get from the theta to a easyer to use format.

1 Like

How are you connecting Electron to the Oculus headset? Are you using Oculus Rift or Oculus Go?

5 posts were split to a new topic: Wireless Streaming to VR Headset With On-Premise Equipment

@Kev091190 Did you ever find a JavaScript package that works with Digest Authentication with the THETA? I’m also curious about a package that can do discovery and find the IP address of the camera in client mode.

I have not found the solution yet… just getting back into the project i was working on…

i have found out some usefull info…

using cmd
below code finds the ipadress by using the devices mac address…
**(Replace DeviceMACAddress with your devices mac address)
arp -a | find “DeviceMACAddress”
Responce:
192.168.X.XXX DeviceMACAddress dynamic

then using cmd to ping the address to verify its connected
**(Replacing 192.168.X.XXX with shown device ip)
ping “192.168.X.XXX”

if responce is
" Reply from 192.168.X.XXX: bytes=XX time=Xms TTL=XX "
your device is active
else
" Ping request could not find host DeviceMACAddress. Please check the name and try again. "
failed connection

Sadly you cannot use JavaScript to do this…
(well only idea id have to use JavaScript this way is to try and discover the devices ip address based on if it can connect to the web page and get a response… but you would have to scan through 254 pages and if your devices ip address has a layout as show with a number above 2 in the third column (192.168.2.50),
then you would have to scan through 254 pages per each number until you stop scanning though.

Example i want to search from 192.168.1.1 to 192.168.2.254 thats about 508 web pages to scan through to find one that connects to http://192.168.X.XXX/osc/info/ .)

Im sure with some work in making a cmd script i could find these values and make it return to a text file a response with the address,mac address, Status

I hope this is some help to others.

@Kev091190, thanks for the update.

There’s a way to set the IP address of the THETA V/Z1 so that when it goes into client-mode, it goes to a known IP address.

First, coonnect to the camera in AP mode. Then send this:

  name: "camera._setAccessPoint",
  parameters: {
    "ssid": config.ssid,  // change to string for your ssid
    "security": "WPA/WPA2 PSK",
    "password": config.password,  // set string to the password of your router
    "connectionPriority": 1,
    "ipAddressAllocation": "static",
    "ipAddress": "192.168.2.123",
    "subnetMask": "255.255.255.0",
    "defaultGateway": "192.168.2.1"

After that, reboot the camera and the client-mode IP address will be saved. Now, you can go back to that IP address from your Electron app.

According to the documentation for request, it supports Digest authentication, but I have not been able to get it to work yet.

Digest authentication is supported, but it only works with sendImmediately set to false ; otherwise request will send basic authentication on the initial request, which will probably cause the request to fail.

Application in Electron which you can use to control the Theta, paste the url for a YouTube stream and my application starts a new stream with OBS. But the problems already start by choosing the right API.
I am going to use Windows, this pc is connected to the internet with ethernet and activates a hotspot where the Theta can connect to in client mode.
The live stream to OBS will be going over a USB cable but when I connect the Theta to a pc the wifi gets disabled (I read this already in your post here). Is there a workaround for this?

No, you can’t send WiFi API commands to the THETA when it is streaming through the USB cable. You can send USB API commands to control the stream.

I’m still testing on a Theta V but I will be using the Theta Z1 for the final project. I will have the Z1 in a few days and I don’t know yet if the it also disables the wifi on USB connection.

I do not think you can use the Wi-Fi API while the THETA Z1 is streaming over the USB cable. You can use the USB API with the USB cable and the stream will work.

You can stream over Wi-Fi. One of the easier solutions is to use the RICOH THETA LiveView, however that will not generate the FPS you need for streaming to YouTube. This Wi-Fi plug-in can stream to YouTube.

It sounds like your application would benefit from the USB API.

  • Is it possible to have client mode always enabled on the Theta V or Z1?

You can leave the THETA in client mode 24/7 and it will stay up if you disable sleep and shutdown. You can do this with the API.

  • Can I use the USB for the stream in OBS and the Web API for commands simultaneously?

No.

  • Alternatively how can I use the full USB API with Electron?
  1. Use existing library for PTP on the desktop. For Linux, it is libptp
  2. Use Electron child process to run the shell command from Electron (It will run the host command line script) https://nodejs.org/api/child_process.html

On Windows Desktop, look at WpdMtp.

  • Also, do I need to be a real professional to make this work? Its my first Electron app and I’m still in secondary school.

Get it working from a shell script first and then do the GUI with Electron later. This developer was in high school too. His application didn’t stream.

If you divide your project into small steps and test each step, you can do it. The streaming and the USB API access (with existing library) are controlled by components other people built, so you should be able to glue the components together with JavaScript and Electron.

The primary difficulties you will encounter:

  1. there’s no example using the USB API with Electron, but you should be able to find some from the command line, then you just need to practice using sub-process (I think called child process in Electron) . With this technique, you should be able to use an command line example that someone else built and then adapt it for your specific application
  2. There are more examples on this forum of using the USB API with Linux (on Raspberry Pi), but I believe there are people using Windows. Please help out the community and document your work with Windows and the USB API.
    Translate this from Japanese to your language.

I think I can take care of the OBS part (OBS settings are in JSON format) but I was wondering if you could share your thoughts and experience with me about the Theta.

Feel free to ask more questions.

1 Like