http://contest.theta360.com/index-en.html

1. RICOH THETA x
IoT Developers
Contest Cloud
API Seminar
SV Technology Development Center
New Business Development Division
RICOH COMPANY,LTD.
May 18, 2016

2. Agenda
1. Introduction of Cloud API
2. Function No. 1 - Video Communication
3. Function No. 2 - Photo and Media Storage
4. Q & A
5. Functions to be introduced in the future
2

3. 1. INTRODUCTION OF CLOUD API
3
Hisakazu Takakuwa
Platform Development Department
SV Technology Development Center
New Business Development Division
RICOH COMPANY,LTD.

4. 4
Our Questions to
You

5. Ricoh Cloud API
• Interface available from programs which run on PC, smartphone/tablet and
singleboard computer
• It has following functions provided by Ricoh.
1. Video communication
2. Photo and media storage
3. Authentication/Authorization
• Free beta version
5
Ricoh Cloud API
Singleboard
computer
PC
Smartphone/
Tablet
Video
communication
Photo and media
storage
Authentication/
Authorization

6. Resources Available for the Developers
• Developers can use the following resources:
1. Cloud API
2. SDK
3. Sample programs
• Available from github
https://github.com/ricohapi/
6
Developers SDK
Sample
program
Ricoh Cloud API
Video
communication
Photo and media
storage
Authentication/
Authorization

7. Prerequisites for the Usage
The followings are necessary to use Ricoh Cloud API
1. Client credential (to identify the application)
• Client ID
• Client secret
2. User account (to identfity the user)
• User ID
• Password
7

8. Preparation 1 - Obtaining Client Credential
Step 1. Enter the contest by filling in the form on the contest website
Step 2. Follow the instructions in the confirmation e-mail
Step 3. An e-mail will be sent to notify the registration has completed
Step 4. Download material by following the steps in the e-mail which explains
how to access API
8
http://contest.theta360.com/index-en.html

9. Preparation 2 - Obtaining User Account
Step 1) Open the webpage for the administrator of RICOH Unified Communication System.
9
https://beta2.ucs.ricoh.com/dashboard/login?lang=en
Step 4) Complete the registration by clicking the URL in the confirmation e-mail.
* E-mail address is used as user ID.
Step 3) Click "Send" after filling in the form.
Step 2) Click the link.

10. 10
２. FUNCTION 1
- VIDEO COMMUNICATION
Tomonori Aikawa
Platform Development Department
SV Technology Development Center
New Business Development Division
RICOH COMPANY,LTD.

11. § Overview
l Video chat (only image) between two PCs
l Uses WebRTC (a function of modern Web browsers)
Streaming Functions
11

12. § Configuration
l Authentication Server/BOSH (Bidirectional-streams Over Synchronous
HTTP) Server
l JavaScript/HTML
l JavaScript/HTML
Streaming Functions
*JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners. 12

13. § Obtaining the sample program
§ Setting up a client credential
§ Build
§ Execution
https://github.com/ricohapi/video-streaming-sample-app
How to Use
$ gulp run
$ git clone https://github.com/ricohapi/video-streaming-sample-app
$ cd video-streaming-sample-app
$ cp samples/config_template.js samples/config.js
$ vi samples/config.js
$ npm install
$ gulp build
13

14. § Developers can use a signaling server.
l WebRTC (over BOSH)
§ Only one user ID is necessary.
l abc@example.com+mac
l abc@example.com+theta
§ A sample that shows a view similar to the one at
theta360.com
l WebGL
Please make an interesting use of the APIs!
We welcome requests for enhancement.
Summary
14

15. 15
３. FUNCTION 2
- PHOTO AND MEDIA STORAGE
Eiji Hosono
Platform Development Department
SV Technology Development Center
New Business Development Division
RICOH COMPANY,LTD.

16. Main Storage APIs
Storage function REST API SDK API
Image upload POST /media .upload()
Obtaining the list of
images already uploaded
GET /media .list()
Obtaining the information
about an image
GET /media/{id} .info()
Obtaining the image data GET /media/{id}/content .download()
Deleting an uploaded
image
DELETE /media/{id} .delete()
Service URL: https://mss.ricohapi.com/v1/media
16
Authentication /
Authorization function
REST API SDK API
User authentication POST /auth/token .connect()
Service URL: https://auth.beta2.ucs.ricoh.com/auth/token

17. Let's Create a Simple Application!
17
<SAMPLE> slideshow application

18. Feature 1. Supports Cloud
This application shows the images in Ricoh Cloud Media
Storage service one by one.
Feature 2. Multi accounts
User accounts can be switched.
Feature 3. Multi platform
The application uses HTML5 - it can run under Mac OS,
Windows, iOS, and Android.
18
Demo Application Overview
Let's start the application within the browser.
※ Mac OS is a trademark of Apple Inc.
※ Windows is a registered trademark or trademark of US Microsoft Corporation in the United States and other countries.
※ The official name for Windows is Microsoft Windows Operating System.
※ iOS is a trademark in the United States and other countries, or a registered trademark of Cisco, and is used under license.
※ Android is a trademark of Google Inc.

19. Overall Demo Configuration
19
My PC
Web Server
http://localhost
RICOH Cloud Service
CSS
HTML
JavaScript
Web Browser
Cloud Media Storage Server
https://mss.ricohapi.com
Photos
by User A
Photos
by User B
Photos
by User C
Ricoh API
Auth Server
CSS
HTML
JavaScript
1. Application content is
distributed from
Web Server
2. Open the application URL in a browser
then the content is read and the
application starts
3. JavaScript version SDK allows
the developers to
coordinate with RICOH Cloud
Service
*JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

20. When Creating Demo Application...
It is always difficult to support Cloud such as handling security,
authentication, and so on…
BUT,
By using SDK, it is easy!
We could develop the application with
about 100 lines of code.
20

21. Source Code Configuration
21
File Content Line of Codes
index.html HTML file 41 lines
ric-sample.css stylesheet 25 lines
ric-sample.js JavaScript file 53 lines
ricohapi-mstorage.js Media Storage SDK (Distributed at GitHub)
Total About 100 lines
(119 lines)
* Blank lines, comments and lines for log output are not counted.
Let's check the source code and its operation by using a browser.
*JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective
owners.

22. Processing Flow in the Program
ü Calling event handler function in ric-sample.js when Start/
Pause/Resume buttons are tapped
Start button:
ü Obtains the list of uploaded images in the cloud
ü Starts a timer
Pause button:
ü Stops the timer
Resume button:
ü Starts a timer
ü Using the timer, a new image is obtained from the cloud
at regular interval and is shown.
22

23. Essence of Cloud Support
There are two points to supporting Cloud.
23

24. First Point to Supporting Cloud
Point 1
Authentication information needs to be set by using SDK
API before the cloud is connected.
Once you have completed, SDK takes care of the rest.
Security and authentication handling, necessary to
communicate with SDK cloud server, are done by SDK.
※ Authentication information: Client ID/Secret, User ID/Password
24

25. First Point to Supporting Cloud (Continued)
25
$(document).ready(function() {
var authClient = new AuthClient("koTjKwBm…", "rWOwyT5d…"),
mediaStorage = null;
…
$("#ric-start-stop").on("click", function() {
var buttonText = $(this).text();
if (buttonText == "Start") {
var userID = $("#ric-account").val();
authClient.setResourceOwnerCreds(userID, USER_PASSWORD[userID]);
mediaStorage = new MStorage(authClient);
mediaStorage.connect();
…
}
…
});
});
1. At the time of starting
application,
Client ID/Secret are specified.
2. When Start button is
pressed, User ID/Password is
specified.
3. Set authentication information
when Storage API is used.
Security and authentication handling is
automatically done by SDK when storage
API is used.
Let's check the actual operation by using a browser.

26. Second Point to Supporting Cloud
Point 2
The image data stored in the cloud cannot be referred to directly from
the <img> tag due to security concerns.
We suggest that the image is obtained securely from the cloud
and then converted into BLOB format.
Image data in BLOB format can be referenced by the object URL
where the data is store
<img> tag.
※BLOB: Binary Large Object
SDK can take care of obtaining and converting the image
data!
SDK supports obtaining image data in the BLOB format.
26

27. Second Point to Supporting Cloud
(Continued)
function slideshow() {
var mediaID = photoList[photoIndex++].id;
if (photoIndex == photoList.length) photoIndex = 0;
mediaStorage.download(mediaID, "blob")
.then(function(blob) {
var imageURL = URL.createObjectURL(blob);
$("#ric-view")
.one("load", function() { URL.revokeObjectURL(imageURL); })
.attr("src", imageURL);
});
…
}
27
1. Specify the BLOB
format, and
obtain image data
3. src attribute of <img> tag will be
given the
object URL
2. Object URL that
contains
BLOB data is created
The image from the
cloud is shown
Let's check the actual operation by using a browser.

28. Additional Notes
Conversion to Browser SDK
Media Storage SDK for JavaScript has been prepared as a
package that works with Node.js. Therefore, if you intend to use
it in a browser environment, converting source code is
necessary.
Converted source code will be distributed in GitHub
repository.
Media Storage SDK for browser:
https://github.com/ricohapi/media-storage-js/tree/master/build
※ to be distributed in the near future
28*JavaScript is registered trademark of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

29. 29
4. Q & A

30. 30
5. FUNCTIONS TO BE
INTRODUCED IN THE FUTURE

31. Functions to be Introduced in the Future
Following functions are under consideration for
future releases.
・Remote control
・Sensor collaboration
・Image processing and recognition
・Data store and analysis
・SNS linking
31

32. RICOH
THETA S
Instruction for
photo shoot
Remote Control Function Overview
32
MQTT
Ricoh Cloud APISingleboard
computer
RICOH
THETA S
Singleboard
computer
Instruction for
photo shoot Photo shoot
MQTT
Example 1) Photo shoot
Instruction to
obtain the
image data
MQTT
Ricoh Cloud APISingleboard
computer
Singleboard
computer
Instruction to
obtain the
image data
Obtaining an
image
MQTT
Example 2) Obtaining an image
Image

33. Summary
Cloud API Overview
・Functions
・How to use it
Introduction of Functions
- Video communication
- Photo and media storage
Functions to be introduced in the future
33

34. 34
Enjoy
RICOH THETA
and
RICOH Cloud API!!