THETA GitHub Repository

THETA API Usage
1

Community Applications on GitHub, updated March 2017

Image Viewing

JavaScript 360 Image Viewers

  • Photo Sphere Viewer by Jeremy Heleine :hotsprings: (hot)
    • good and popular viewer. Uses Three.js
  • ThetaViewer by Atsushi Kokubo
    • Viewer works great. Documentation is in Japanese. This would be great for @jcasman to translate into English. :japan:
  • theta-viewer.js by Sho Hashimoto
    • Animate multiple-Photos taken by RICOH THETA.
  • Google VR for Web by Google
    • Solid 360 image and video viewer that can be embedded in web site or mobile phone
  • Pannellum by Matthew Petroff
    • lightweight, free, and open source panorama viewer for the web
  • A-Frame by MozVR
    • A web framework for building virtual reality experiences

Other Image Viewers

  • PanoramaViewer by Sunao Hashimoto
    • Written in Processing language. No documentation.

Camera Control

JavaScript Control of Camera

Other Camera Controllers

  • OpenSphericalCamera Client by Duiker Research
    • A Python library for interfacing with cameras that implement the OpenSphericalCamera API
  • scala-ricoh by Freddie Poser
    • Download photos from the RICOH THETA using scala or Java
  • python-download-rossgoderer
    • Example Python script from community member Ulrich Rossgoderer. This was posted in the THETA Developer Forum. Uses the requests module, which you may need to install on your system.

Small Board (like ESP8266) Camera Control

Video Streaming

  • THETA_GL by mganeko
    • THETA WebGL viewer using three.js This looks super interesting
  • :new: Pull Request by Daniel Sandoval, adding “Cardboard” functionality, Mobile Fullscreen and (OpenTok) WebRTC Element Overrides
  • :new: unity-steamvr-demo by Megan Zimmerman :hotsprings: (hot)
  • Full tutorial called “RICOH THETA S Unity SteamVR Demo” published in the THETA Unofficial Guide community
  • Ricoh Video Streaming Samples by RICOH
    • Sample applications written by RICOH engineers for live streaming of 360 video using WebRTC for browser to browser video chat or to use a Raspberry Pi to stream video to a browser. Includes JavaScript code to convert a dual-fisheye stream into equirectangular within the browser [UPDATED: Depends on discontinued cloud authentication service]
  • THETA-S-LiveViewer-P5 by Sunao Hashimoto
    • Live streaming using the Processing language
  • theta-s-quartz by Kieran Farr
    • CamTwist Effect Plugin to Convert Theta-S Live Video from Fisheye to Equirectangular via Quartz. An experiment to use OS X Quartz Composer to transform Ricoh Theta S live feed dual fisheye to equirectangular.
  • ThetaWifiStreaming by Makoto
    • THETA S WiFi streaming demo with Unity using PC/Mac

Time-Lapse Photography

  • :new: Photosphere by Koen Hufkens, Research Associate at Harvard
  • Connect a Raspberry Pi and the USB API with a Ricoh Theta S for time-lapse spheres for tracking changes in leaf development in a Northeastern US forest (http://virtualforest.io)
  • :new: tlapser360 by Jason Charcalla
  • Time-lapse auto-adjust camera with Adafruit LUX meter, geotagging with gpsd, USB camera control, Raspberry Pi
2 Likes
2

Translated the README for the THETA_GL repo by mganeko. This is a THETA WebGL Viewer using three.js, a Javascript 3D library. This should make it more accessible to THETA :theta: developers who don’t speak Japanese.

Comments, edits, questions welcome!

1 Like
3

THETA_GL

THETA WebGL Viewer using three.js (Javascript 3D library)

[Many thanks to mganeko for this useful repo! This English translation of the README.md file for mganeko’s THETA_GL repo provided by the RICOH THETA Unofficial Guide. Original Japanese language README.md file information is appended below. This is provided “as-is and unofficial." Comments and edits welcome. More information on useful GitHub repos for the RICOH THETA curatated by the RICOH THETA Unofficial Guide here]

Acknowledgments

  • In order to render WebGL, three.js is used

    • To show rendering of full photospheres, samples of panoramas / equirectangular are referenced
    • three.js is covered under the MIT license

  • In order to handle UV Mapping, the following data was utilized:

  • Using anzu-sdk.js from the WebRTC SFU as a Service called Anzu, a WebRTC distribution service

    • The Anzu WebRTC SFU as a Service is provided by the company Shiguredo, K.K. (Japan)
    • anzu-sdk.js is under the Apache License Version 2.0

Thank you, everyone.

Operating Environment

I have tested and confirmed the following operating environment:

  • Chrome 47.0.2526.106 (64-bit) for MacOS X
  • Firefox 43.0.3 for MacOS X
  • Chrome 47.0.2526.106 m for Windows
  • Firefox 43.0.2 for Windows
  • Chrome for Android
  • Firefox for Android

Maybe because Firefox for Android uses m4v format, playback for recorded video files is not possible.

Samples

Playback of prerecorded video file

Connecting to USB Camera

Using WebRTC SFU Distribution Video

[Translator’s Note: This section of links appears to need an account with this service, and this section of links do not appear to work.]

Usage

Prep

  • Load three.js and three.min.js in HTML
  • Load theta_gl.js in HTML
    • You must have the JSON file in the UV folder when you use it
  • When you use Anzu, anzu.js or anzu.min.js is required

Initialization

  • THETA_GL.init(divId, autoResuze, debugFlag)
    • string divId: It will be a Canvas container displaying WebGL, set the div element ID [REQUIRED]
    • bool autoResize: Comply with window resize or not (true/false) - default is true
    • bool debugFlag: For debugging, running video elements or displaying canvas elements, or displaying log information in the console - default is false

Starting WebGL Animation

  • THETA_GL.startAnimate()

Setting the source URL of videos

  • THETA_GL.setVideoSrc(url, loopFlag)
    • string url: URL for videos. Use a web URL or set a URL created with URL.createObjectURL() [REQUIRED]
    • bool loopFlag: Run the video in a loop or not (true/false) - default is false

Stopping Video

  • THETA_GL.stopVideoSrc()

Setting Device Orientation

  • THETA_GL.followOrientation(flag)
    • bool flag: Setting whether to follow the smart device orientation or not. [REQUIRED]

Code Samples

var url = 'http://yourserver.com/video.mp4';
THETA_GL.init('container', true, false);
THETA_GL.setVideoSrc(url, true);
THETA_GL.startAnimate();

License

THETA_GL is under the MIT license

4

Thanks. Is it only for prerecorded video files or does it support live streaming through the THETA USB? There’s the interesting section heading, Connecting to USB Camera, but the sample link is blank. There’s also reference to this Anzu WebRTC SFU as a Service. Were you able to figure out what that is?

There’s this tantalizing picture:

I’m primarily interested because it seems like it may be connected to the WebRTC sample code from RICOH.