Basic JavaScript to connect to THETA

[jcasman]

I’m doing a little work to use JavaScript to connect to THETAs. I’m just getting started. If you are using JavaScript to run THETA API comments and have comments or suggestions on, well, anything - like good libraries to use - I’m interested. I’m just learning.

Notes

• There is a cloud API called fake-theta that allows you to test API commands without a THETA.
• I am using Node.js, so I can run JavaScript programs from the command line. I’m running version 18.15.0.
• I am on a MacBook Air, running Node.js from the Terminal. I connect directly to my THETA X by Wi-Fi.

Node.js

If you don’t have Node.js installed, here’s a good guide written by @erikrod1. Requires email registration.

https://theta360developers.github.io/sdk/

Make sure to run npm init in the directory you’re working from.

npm init will help you build a basic package.json file. You can just accept all the defaults. After the setup is completed, you may need to edit the package.json file that has just been created and add the following line:

"type": "module",

So my package.json file looks like this:

{
  "type": "module",
  "name": "js",
  "version": "1.0.0",
  "description": "",
  "main": "takepic.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Getting info from the THETA

Here’s my get info app, pointed at fake-theta cloud API server:

const response = await fetch('https://fake-theta.vercel.app/osc/info', 
    {method: 'GET', 
    headers: {'Content-Type': 'application/json;charset=utf-8'}
});

const data = await response.json();

console.log(data);

Here’s the output I get back:

{
  api: [
    '/osc/info',
    '/osc/state',
    '/osc/checkForUpdates',
    '/osc/commands/execute',
    '/osc/commands/status'
  ],
  apiLevel: [ 2 ],
  _bluetoothMacAddress: '00:45:de:78:3e:33',
  endpoints: { httpPort: 80, httpUpdatesPort: 80 },
  firmwareVersion: '1.41.0',
  gps: false,
  gyro: false,
  manufacturer: 'Ricoh Company, Ltd.',
  model: 'RICOH THETA X',
  serialNumber: '10100001',
  supportUrl: 'https://theta360.com/en/support/',
  uptime: 67,
  _wlanMacAddress: '00:45:78:bc:45:67'
}

I can also change the target IP to a real THETA X.

Note: Use http, not https.

const response = await fetch('http://192.168.1.1/osc/info', 
    {method: 'GET', 
    headers: {'Content-Type': 'application/json;charset=utf-8'}
});



const data = await response.json();

console.log(data);

Here’s the output from a physical camera. You can see the gps and gyro response is not false. But for the purposes of testing, the fake-theta server works great.

{
  api: [
    '/osc/info',
    '/osc/state',
    '/osc/checkForUpdates',
    '/osc/commands/execute',
    '/osc/commands/status'
  ],
  apiLevel: [ 2 ],
  _bluetoothMacAddress: '58:38:79:78:F7:C8',
  endpoints: { httpPort: 80, httpUpdatesPort: 80 },
  firmwareVersion: '2.00.0',
  gps: true,
  gyro: true,
  manufacturer: 'Ricoh Company, Ltd.',
  model: 'RICOH THETA X',
  serialNumber: '14113405',
  supportUrl: 'https://theta360.com/en/support/',
  uptime: 142,
  _wlanMacAddress: '3C:A6:F6:28:B8:E3'
}

I intend to build more simple apps to test the THETA API more. With these simple tests, there is not much difference between the fake-theta cloud server and the real THETA.

[craig]

I posted information on getting the motionjpeg stream here:

React native (expo)

Try this to read a stream and display it to the console for testing. const body = {'name': 'camera.getLivePreview'} const response = await fetch('http://192.168.1.1/osc/commands/execute', {method: 'POST', body: JSON.stringify(body), headers: {'Content-Type': 'application/json'} }); const data = response.body const reader = data.getReader() while (true) { const {value, done} = await reader.read(); if (done) break; console.log('Received', value); } console.log(data); fake-theta no c…

I’ll try and practice a bit more with JavaScript and will likely take the Coursera React Native course by Meta.

If you and @erikrod1 want to take the online course at the same time, we can discuss topics in this forum and apply the knowledge to RICOH THETA mobile apps.

[craig]

I’ve gone through the first few modules of week 1 of the Coursera React native course by Meta. I’m viewing it at 1.5x speed. I’ve built an Android app using a Pixel 4 AVD and another app using snack.expo.dev, which looks pretty cool.

The introductory material suggested taking the 26 hour React Basics course prior to the React Native course. However, I’m planning to ignore the suggested prerequisite and go through the React Native material only.

React Basics

So far, things are easy and it looks doable to build a app quickly.

This is the Android Pixel 4 AVD version.

The snack version is a nice tool.

Hope to get some buttons up shortly.

I’m using VSCode for the development of the AVD version.

May 10, 2023: at 12% Course is still easy.