Theta Client Guide Update - React Native - Theta Client SDK 1.2

erikrod1 · June 20, 2023, 8:13pm

Hello Yall!

Added in a new small guide about running the theta client 1.2 SDK using the React Native demo provided by RICOH.

I’ve added comments enabled on my Guide in the website so if guys want you can make comments for any problems, ideas, cool facts etc.

Here is a sneak peak

To get access to this sign up here
SDK Guide

erikrod1 · June 26, 2023, 8:10pm

Testing out the new Features with getOptions() in the React Native Theta-client library but so far the values only show up in the console. In the future I’ll update this to show it working in a react native app.
‘Capture Mode: IMAGE’ shows its working.

erikrod1 · June 27, 2023, 5:11pm

Here is my Repo that I’m using to work on the React Native Demo.

erikrod1 · June 27, 2023, 7:44pm

I’ve finished adding the Get Options button in the React Native Demo. Here is the code for it.

github.com

AirTechWick/theta-client-1_2/blob/b811686d619867c1c106fbd35361198cf6277b69/demos/demo-react-native/src/GetOptions.tsx

import React, {useEffect, useState} from 'react';
import {
  View,
  Image,
  TouchableOpacity,
  NativeModules,
  NativeEventEmitter,
  Text,
} from 'react-native';

import {
  OptionNameEnum,
  getOptions,
} from 'theta-client-react-native';

const GetOptions = ({ navigation }) => {
  const [optionNames, setOptionNames] = useState([]);

  useEffect(() => {
    const fetchOptions = async () => {

This file has been truncated. show original

It shows the 6 new properties available that are listed here.

dilip · July 3, 2023, 2:05pm

Can you please provide the step to set up the react native project on the macOS m1 chip. I have read the document but didn’t find any doc for the mac

Thanks

craig · July 3, 2023, 3:15pm

github.com

ricohapi/theta-client/blob/main/demos/demo-react-native/README.md

# React Native demo for theta-client

A simple sample React Native application using [theta-client](https://github.com/ricohapi/theta-client).

## Objective

* Show developers how to use Theta client.

## Functions

* List photos in Theta.
* View sphere photo in Theta.
* Take a photo with Theta.

## Note

* Change bundle id and signature to your own.
* Before building, set the directory of theta-client to environment variable `THETA_CLIENT`.

## Building and execution

This file has been truncated. show original

In the directory ./demos/demo-react-native do

yarn install
yarn run android

You must have the Android SDK and yarn installed as well as set the environmental variable for THETA_CLIENT

for iOS, it is

yarn run ios

Please post the problem you are encountering.

erikrod1 · July 3, 2023, 6:53pm

For initial setup and installation, it’s posted here in the Official Documentation. theta-client/react-native at main · ricohapi/theta-client · GitHub. I believe they use Linux to set up the demo, which should have similar commands to the MacOS terminal.

Initial Setup: theta-client/react-native at main · ricohapi/theta-client · GitHub
Running Demo: theta-client/demos/demo-react-native at main · ricohapi/theta-client · GitHub

I can talk to @jcasman and @craig about adding a Mac Version to the guide.

erikrod1 · July 3, 2023, 7:17pm

Update Post

I added Fake Theta Functionality to the Demo App.

Here is the code:

To test it out, uncomment the fake URL

github.com

AirTechWick/theta-client-1_2/blob/f168482baa69332828e28e3a12497aa0e95d6edb/demos/demo-react-native/src/MainMenu.tsx#L20C6-L20C6


      
          //const endpoint = 'https://fake-theta.vercel.app'

And comment out the real URL.

github.com

AirTechWick/theta-client-1_2/blob/f168482baa69332828e28e3a12497aa0e95d6edb/demos/demo-react-native/src/MainMenu.tsx#L19C6-L19C6


      
          const endpoint = 'http://192.168.1.1'

Results are shown here:

craig · July 3, 2023, 10:32pm

I’m not sure, but I think the engineers at RICOH use a Mac, likely because it can run both the iOS and Android emulators.

dilip · July 4, 2023, 5:49am

Thanks for the support I will review the link you have provide and let you know if found any issue

dilip · July 6, 2023, 9:46am

@erikrod1 and @craig I have follow the step provide from your end in this thread. In the android its working fine.

For the iOS when I have tried with fake url its provide me this error “TLS sessions are not supported on Native platform.” its working fine on the android and provide the list as well.

I am using this url to connect the camera “https://fake-theta.vercel.app”. Can you please help me out here.

Thanks
Dilip

craig · July 6, 2023, 12:38pm

github.com/ricohapi/theta-client

fake-theta compatibility

opened 01:29PM - 28 Apr 23 UTC

closed 04:03AM - 28 Jun 23 UTC

codetricity

Does theta-client work with fake-theta? I'm using this endpoint in a Flutter …app. ``` final endpoint = 'https://fake-theta.vercel.app'; ``` I am accessing `listFiles` like this: ``` var imageList = await _thetaClient.listFiles(FileTypeEnum.image, 2); ``` I am getting this error: ``` E/flutter (32599): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(NotConnectedException, java.lang.NullPointerException, null, null) E/flutter (32599): ``` This is the output. ``` I/flutter (32599): call listFiles I/System.out(32599): HttpClient: REQUEST: https://fake-theta.vercel.app/osc/commands/execute I/System.out(32599): METHOD: HttpMethod(value=POST) I/System.out(32599): COMMON HEADERS I/System.out(32599): -> Accept: application/json I/System.out(32599): -> Accept-Charset: UTF-8 I/System.out(32599): -> Cache-Control: no-cache I/System.out(32599): CONTENT HEADERS I/System.out(32599): -> Content-Length: 126 I/System.out(32599): -> Content-Type: application/json; charset=utf-8 I/System.out(32599): BODY Content-Type: application/json; charset=utf-8 I/System.out(32599): BODY START I/System.out(32599): {"name":"camera.listFiles","parameters":{"fileType":"image","startPosition":0,"entryCount":2,"maxThumbSize":0,"_detail":true}} I/System.out(32599): BODY END D/TrafficStats(32599): tagSocket(125) with statsTag=0xffffffff, statsUid=-1 I/System.out(32599): HttpClient: RESPONSE: 200 OK I/System.out(32599): METHOD: HttpMethod(value=POST) I/System.out(32599): FROM: https://fake-theta.vercel.app/osc/commands/execute I/System.out(32599): COMMON HEADERS I/System.out(32599): -> Cache-Control: public, max-age=0, must-revalidate I/System.out(32599): -> Connection: keep-alive I/System.out(32599): -> Content-Length: 474 I/System.out(32599): -> Content-Type: application/json; charset=utf-8 I/System.out(32599): -> Date: Fri, 28 Apr 2023 13:24:56 GMT I/System.out(32599): -> Etag: W/"1da-hHC5yGdk33EyyPKk7kdMEU5xSy8" I/System.out(32599): -> Server: Vercel I/System.out(32599): -> Strict-Transport-Security: max-age=63072000; includeSubDomains; preload I/System.out(32599): -> X-Vercel-Cache: MISS I/System.out(32599): -> X-Vercel-Id: sfo1::iad1::lhxgq-1682688296310-f744396b0ed8 I/System.out(32599): BODY Content-Type: application/json; charset=utf-8 I/System.out(32599): BODY START I/System.out(32599): {"results":{"entries":[{"dateTime":"2015:07:10 11:05:18","_favorite":false,"fileUrl":"https://fake-theta.vercel.app/files/100RICOH/R0010001.JPG","isProcessed":true,"name":"R0010001.JPG","previewUrl":"","size":4051440},{"dateTime":"2015:07:10 11:05:18","_favorite":false,"fileUrl":"https://fake-theta.vercel.app/files/100RICOH/R0010002.JPG","isProcessed":true,"name":"R0010002.JPG","previewUrl":"","size":4051440}],"totalEntries":10},"name":"camera.listFiles","state":"done"} I/System.out(32599): BODY END E/flutter (32599): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(NotConnectedException, java.lang.NullPointerException, null, null) E/flutter (32599): ``` In addition to the error, I cannot access the `ThetaFiles.fileList` and `ThetaFiles.totalEntries` properties. How can I use theta-client with fake-theta for the basic APIs supported by fake-theta? The same `listFiles` command works with a normal `http.post` command in my Flutter app. At the moment, I am forced to build the app with the [http](https://pub.dev/packages/http) package instead of theta-client. However, I would like to use theta-client.

It does not seem possible to use fake-theta with iOS right now

dilip · July 6, 2023, 1:50pm

@craig Thanks to point out this here. I will check with real device and let you know if face any issue

Thanks for the quick response

craig · July 6, 2023, 3:15pm

It may be possible to use fake-theta with iOS in the future. However, right now, there is a problem with the https.

dilip · July 12, 2023, 5:48am

@erikrod1 and @craig I have done the demo on the android. and its working fine with fetch the exiting photo from the actual device. I have provide the option to take the photo and see the live preview as well.

Showing the live preview on the react native is not working fine and flicker issue. I have read the comment on this link of github.
So to fix this issue I have put the delay on the update the preview and now its working much better still facing the issue of the blinking but for now we can view the preview for the same. Let me know if you have suggestion to avoid the blinking issue.
Here is the code for the same.

var updateUrl = true;

useEffect(() => {
    const interval = setInterval(() => {
      updateUrl = true;
    }, 1000);

    return () => clearInterval(interval);
  }, []);

const eventListener = emitter.addListener(THETA_EVENT_NAME, event => {
        if (updateUrl == true) {
          updateUrl = false;
          setDataUrl(event.data);
        }
      });

Other issue which I am facing here is when I am taking the photo first time and called the method of stopLivePreview it crash on the android and provide the error like this “Could not invoke ThetaClientReactNative.stopLivePreview” I have attached the image for the same in the below.

Here is the full code of the take photo screen.

import React, {useEffect} from 'react';
import {
  Alert,
  Image,
  NativeEventEmitter,
  NativeModules,
  PermissionsAndroid,
  Platform,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import RNFS from 'react-native-fs';
import {
  getLivePreview,
  stopLivePreview,
  getPhotoCaptureBuilder,
  THETA_EVENT_NAME,
} from 'theta-client-react-native';
import {useIsFocused} from '@react-navigation/native';

const Preview = props => {
  const {navigation} = props;
  const [dataUrl, setDataUrl] = React.useState();
  var updateUrl = true;
  const isFocused = useIsFocused();

  const startLivePreview = async () => {
    try {
      getLivePreview().then(x => {});
    } catch (error) {
      console.log('preview error', error);
    }
  };

  useEffect(() => {
    const interval = setInterval(() => {
      updateUrl = true;
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (isFocused) {
      const emitter = new NativeEventEmitter(
        NativeModules.ThetaClientReactNative,
      );
      const eventListener = emitter.addListener(THETA_EVENT_NAME, event => {
        if (updateUrl == true) {
          updateUrl = false;
          setDataUrl(event.data);
        }
      });
      startLivePreview();
      return () => {
        stopLivePreview();
        eventListener.remove();
      };
    }
  }, [isFocused]);

  const getPath =
    Platform.OS == 'android'
      ? RNFS.DownloadDirectoryPath
      : RNFS.DocumentDirectoryPath;

  const checkStoragePermission = async () => {
    if (Platform.OS === 'ios') {
      return true;
    } else {
      try {
        var permission = false;
        if (Platform.constants.Release >= 13) {
          const grants = await PermissionsAndroid.requestMultiple([
            PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES,
            PermissionsAndroid.PERMISSIONS.READ_MEDIA_VIDEO,
          ]);
          if (
            grants['android.permission.READ_MEDIA_IMAGES'] ===
              PermissionsAndroid.RESULTS.GRANTED &&
            grants['android.permission.READ_MEDIA_VIDEO'] ===
              PermissionsAndroid.RESULTS.GRANTED
          ) {
            permission = true;
          } else {
            permission = false;
          }
        } else {
          const grants = await PermissionsAndroid.requestMultiple([
            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
            PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          ]);
          if (
            grants['android.permission.WRITE_EXTERNAL_STORAGE'] ===
              PermissionsAndroid.RESULTS.GRANTED &&
            grants['android.permission.READ_EXTERNAL_STORAGE'] ===
              PermissionsAndroid.RESULTS.GRANTED
          ) {
            permission = true;
          } else {
            permission = false;
          }
        }
        return permission;
      } catch (err) {
        return false;
      }
    }
  };

  const takePhoto = async () => {
    let permission = await checkStoragePermission();
    if (permission) {
      try {
        const photoCapture = await getPhotoCaptureBuilder().build();
        const url = await photoCapture.takePicture();
        let filename = url.substring(url.lastIndexOf('/') + 1, url.length);
        var path = `file://${getPath}/${filename}`;
        RNFS.downloadFile({
          fromUrl: url,
          toFile: path,
        }).promise.then(async r => {
          Alert.alert(
            'Capture Image',
            `Here is the url for the same \n\n${path}`,
          );
          setDataUrl(path);
          navigation.goBack();
        });
      } catch (error) {
        Alert.alert(`${error}`);
      }
    } else {
      Alert.alert('', `Please provide storage permission to save the image.`);
    }
  };

  return (
    <View style={{flex: 1, backgroundColor: 'white'}}>
      <SafeAreaView style={{flex: 1}}>
        <View style={{flex: 1}}>
          {dataUrl != undefined && dataUrl != '' && (
            <Image
              style={styles.takePhoto}
              source={{uri: dataUrl}}
              fadeDuration={0}
            />
          )}
        </View>
        <TouchableOpacity
          onPress={takePhoto}
          style={{
            marginHorizontal: 20,
            alignItems: 'center',
            padding: 20,
            backgroundColor: 'black',
            borderRadius: 10,
            marginVertical: 20,
          }}>
          <Text style={{color: 'white', fontSize: 20}}>Take Photo</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </View>
  );
};

const styles = StyleSheet.create({
  takePhoto: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    resizeMode: 'contain',
    zIndex: 0,
    elevation: 0,
  },
});

export default Preview;

Can you you please review once this and let me know if you have suggestion for the same.

Thanks
Dilip

erikrod1 · July 12, 2023, 6:44pm

Looks good, I can test it out when I get back in the office and post results here.

dilip · November 2, 2023, 11:33am

@erikrod1 Did you get chance to look into the issue which I am facing on the android to capture the photo. I have already share the code sample and image on the above thread.

Thanks

craig · November 2, 2023, 2:23pm

@erikrod1 if you have time, you should try the React Native demo with the new 1.5 version of theta-client using a physical device camera and physical device Android phone or tablet. I haven’t tried the React Native demo, only the Android and Flutter demos.

@dilip please add your experience to this issue on GitHub.

dilip · November 6, 2023, 10:39am

Sure I will try and let you know

craig · November 22, 2023, 10:16pm

live preview on Android from React Native works with theta-client 1.6

Tested with React Native Demo Android on Google Pixel 4a physical device and THETA X with fw 2.30