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

my mistake. it will allow you to access it through the web browser but not through the electron app

ill keep trying :confused:

im guessing it would have to be something of this sorts? (in arrows below)
but it does not exist in the api v2.1

startSession = function() {
    var args = {
    data: { "name": "camera.startSession" , 
      ------> "client" : {
                              "username" : "THETAYLXXXXXXXXX" ,
                              "password" : "NEWPASSWORD"
                               }    <-----------------
 },
    headers: { "Content-Type": "application/json" }
};
...

The client mode user name and password is with digest authentication.

I have not tried the library below:

I think the request library below does not implement digest auth correctly.

May Not Work


You Need a Library That Handles DigestAuth

var postData = {
// post data here
}

var postReq = new digestAuthRequest('POST', url, 'username', 'password');

postReq.request(function(data) { 
  // success callback
  // data probably a success message
},function(errorCode) { 
  // error callback
  // tell user request failed
}, postData);
1 Like

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.